Forums
View unanswered posts | View active topics It is currently Wed Apr 16, 2014 6:51 pm



Reply to topic  [ 2 posts ] 
 Navigation menu - background on hover behave strangely 
Author Message

Joined: Wed Aug 17, 2011 9:20 am
Posts: 6
Post Navigation menu - background on hover behave strangely
Hello Jason, I have a problem with a navigation menu for which I have applied pie.js. Works well at first sight but if we will play a little bit with the menu, wrong behavior will raise:(. To receive that strange behavior you must move cursor a little faster left and right over the drop-down menu on IE8.

Here is a page test example: http://mainpage.ueuo.com
and here is a screen shoot with wrong behavior: http://s15.postimage.org/p115bv3ca/err.jpg


Thank's.


Last edited by mcmwhfy on Tue Sep 18, 2012 6:13 am, edited 1 time in total.



Wed Sep 12, 2012 2:40 am
Profile

Joined: Wed Aug 17, 2011 9:20 am
Posts: 6
Post Re: Navigation menu - background on hover behave strangely
Hello guys, can someone help me with this ? :|
What is wrong here?
...........................................................................................................
$(document).ready(function(){
if (window.PIE) {
$('.aahov, ul#menu, ul#menu li ul').each(function(){
PIE.attach(this);
});
}

});
..............................................................................................................

<div id="header">
<table cellspacing="0" cellpadding="0" border="0" class="light_gray">
<tbody>
<tr>
<td class="menuContent">
<div>
<div id="maifis">
</div>
<div id="menusus">
<ul id="menu">
<li class="lipic aa aahov"><a href="#" class="jaxy">SIGNOFF</a>
<ul id="subul" style="display: none;">
<li><a class="jaximus" id="new">New NEW</a></li>
<li><a href="#" class="jaximus" id="maNew">CNM DFHJA</a></li>
<li><a href="#" class="jaximus" id="myOrders">JKJJGJSSD</a></li>
<li><a href="#" class="jaximus" id="newDevice">KHJFHGEE</a></li>
<li><a href="#" class="jaximus" id="portins">KJKJHGJJ</a></li>
<li><a href="#" class="jaximus" id="portPPD">JK&gt;KLG JHVH JHED</a></li>
<li><a href="#" class="jaximus">JVMKGJF</a></li>
<li><a href="#" class="jaximus" id="check">VMGJD JJBSSH MORBJHBJD</a></li>
<li><a href="#" class="jaximus">MBNHJF JGJFJH</a></li>
<li><a href="#" class="jaximus">MBAHFGD HBFGDFHFS</a></li>
<li><a href="#" class="jaximus">MBHD HSHSJ</a></li>
</ul>
<span class="hasChildren"></span></li>
<li class="lipic ab"><a href="#" class="jaxy">MISD</a>
<ul id="subul" style="display: none;">
<li><a href="#" class="jaximus" id="conf">MOCDGJ NHJ HGHSS</a></li>
<li><a href="#" class="jaximus" id="sims">Lista Simuri</a></li>
<li><a href="" class="jaximus" id="sims">JFHGW JFHJWFD</a></li>
</ul>
<span class="hasChildren"></span></li>
<li class="ac"><a href="#" class="jaximus jaxy">SSX</a></li>
<li class="ad"><a href="#" class="jaximus jaxy">JKFJHKJ<em id="menu_panel_notificari_notificariSize"></em></a></li>
<li class="lipic ae"><a href="#" class="jaxy">VAXZ</a>
<ul id="subul" style="display: none;">
<li><a href="#" class="jaximus">MGHDD HJGFSJS</a></li>
<li><a href="#" class="jaximus" id="fraud">MGJD HJHNJHKHD</a></li>
<li><a href="#" class="jaximus" id="ezqQuality">MGHNFJHSDHFHD</a></li>
<li><a href="#" class="jaximus">GHSHWNMNJW</a></li>
<li><a href="#" class="jaximus">NNNS GFHS</a></li>
<li><a href="#" class="jaximus">NYN</a></li>
<li><a href="#" class="jaximus">JFJHSCGHJ GFS</a></li>
<li><a href="#" class="jaximus">JFJSD GFSSG</a></li>
<li><a href="#" class="jaximus">MNFHSD GFGW</a></li>
<li><a href="#" class="jaximus">JKJFKD</a></li>
<li><a href="#" class="jaximus">MGHA GDFGA GFGA</a></li>
<li><a href="#" class="jaximus">LJKJFSS</a></li>
</ul>
<span class="hasChildren"></span></li>
<li class="lipic af"><a href="#" class="jaxy">KJHJSDHS</a>
<ul id="subuladmin" style="display: none;">
<li><a href="#" class="jaximus">MGHA HS</a></li>
<li><a href="#" class="jaximus">KKHJSDS</a></li>
<li class="parent_menu"><a href="#">MJGJSSS</a>
<ul id="subulsub" style="display: none;">
<li><a href="#" class="jaximus">IMSOSRH</a></li>
<li><a href="#" class="jaximus">JGJFS HFSS</a></li>
<li><a href="#" class="jaximus">JGJFSVJH SJGS</a></li>
<li><a href="#" class="jaximus">MMNVGHSDH HJSGHV</a></li>
</ul>
<span class="hasChildren"></span></li>
</ul>
<span class="hasChildren"></span></li>
<li class="ag"><a href="#" class="jaximus jaxy">MBBFGSSA</a></li>
<li class="ah"><a href="#" class="jaximus jaxy">OHHBV</a></li>
</ul></div></div></td></tr>
</tbody>
</table>
</div>

............................................................................................................................


/* ---------------------MENU ---------------- */


ul#menu {
height: 52px;
margin: 5px 0 0;
list-style-type: none;
border-color: #f4f4f4 white white;
border-style: solid;
border-width: 1px;
border-radius: 30px 8px;
}



ul#menu li {
font-size: 13px;
letter-spacing: -1px;
float: left;
position: relative;
display: block;
padding: 6px 0;
}

ul#menu li ul {
position: absolute;
top: 0;
left: 0;
margin:0;
padding:0;
display: none;
}


#menu li ul li, #menu li ul li a{
float: none;
}

ul#menu li ul li ul {
position: absolute;
top: 0;
left: 102%;
}


ul#menu li ul li {
border-bottom: 1px solid #dfdfdf;
background-color: transparent;
padding: 2px;
margin: 2px;
}


ul#menu li ul li a {
padding: 5px 0 5px;
display: block;
position: relative;
overflow: auto;
width:217px;
}



ul#menu li ul li:last-child{
border-bottom:none;
}

ul#menu li > ul {
top: 100%;
left: 0;
}

ul#menu li:hover ul{
display:block;
background: #00b7ea;
border-radius:0 8px 8px 8px;
box-shadow: 0px 5px 7px 5px #eaeaea;
}

ul#menu li a {
color: #666666;
text-decoration: none;
display: block;
padding:5px 0px;
font-weight:bold;
}

.jaximus{
cursor:pointer;
}
ul#menu li a.jaxy{
line-height:30px;
margin-left: 5px;

}



ul#menu li a em {
font-style: normal;
font-size: 1em;
color: red;
left: 20px;
position: absolute;
top: 27px;
}


ul#menu li span {
font-weight: bold;
color: #ff0000;
text-decoration: none;
display: block;
cursor: default;
}

ul#menu li span em {
font-style: normal;
}

ul#menu li:hover {
color: #000000;
background:#00b7ea;
}

ul#menu li.aahov:hover {
border-radius: 30px 0 0 0;
}

ul#menu li a.highlighted {
color: #000000;
text-decoration: none;
font-weight: bold;
}

ul#menu li:hover ul{
display:block;
}


ul#menu li.selected {
font-weight: bold;
color: #ff0000;
}
ul#menu ul#subuladmin li,ul#menu ul#subuladmin ul#subulsub{
width:135px;
}
ul#menu ul#subuladmin ul#subulsub li,ul#menu ul#subuladmin{
width:129px;
}
ul#menu ul#subuladmin li,ul#menu ul#subuladmin li a{
width:121px;
}

ul#menu ul#subuladmin li ul#subulsub li a{
width:135px;
}

.aa{width:69px; border-right:1px solid #fafafa;}
.ab{width:55px; border-right:1px solid #fafafa;}
.ac{width:55px; border-right:1px solid #fafafa;}
.ad{width:75px; border-right:1px solid #fafafa;}
.ae{width:75px; border-right:1px solid #fafafa;}
.af{width:99px; border-right:1px solid #fafafa;}
.ag{width:83px; border-right:1px solid #fafafa;}
.ah{width:70px; border-right:1px solid #fafafa;}
.ai{width:60px; border-right:1px solid #fafafa;}
.aj{width:99px; border-right:1px solid #fafafa;}

/* ---------------------MENU ---------------- */


Sun Sep 16, 2012 6:36 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 2 posts ] 

Who is online

Users browsing this forum: No registered users and 7 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.