...

View Full Version : Drop Down Menu - When I hover on Sub Nav, Main Cat title dissapears



Nesalot
01-15-2010, 06:20 PM
I am having a problem where I have a nav bar with a dropdown menu.. the top layer items in the menu show but as soon as i scroll over one and the drop down appears if i move my mouse down the sub menu the "header" of that sub menu disappears. I don't know if this would be considered the peekaboo bug or not. I have tried everything, I was curious if anyone could please help?

Third Level is the header for the sub menu that drops down which includes test 1 through 5. Third Level is the text that disappears on me when i hover over any one of the test 1-5 subs.

HTML


<div id="ctl00_PlaceHolderTopNavBar_customNav" __webpartid="{89DFF3CB-0E4A-4623-B69B-DFB818FBF6DB}">
<div id="mygp2nav_outer">
<div id="mygp2nav_inner" onmouseout="resetnav()">
<div id="mygp2primary" class="clearfix">
<div id="leftcorner"><img src="Admin.aspx_files/spacer.gif" alt=""></div>
<div temp="true" class=" " id="mygp2nav-4"><a href="#">Home</a></div>
<div temp="true" id="mygp2nav-5" active="true" class="lasttab active2 active2" lasttab="true"><a href="#">Admin</a></div>
<div id="rightcorner"><img src="Admin.aspx_files/spacer.gif" alt=""></div>
</div>
<div id="mygp2subnav" class="clearfix">
<div id="mygp2subnavs" onmouseover="stopreset()">
<div id="submenulist">
<ul id="menuList">
<li class="menubar"><a href="#">Admin</a></li>
<li class="menubar" onmouseover="showsub(this,'mygp2subnav-5;#Admin-6');" onmouseout="hidesub(this,'mygp2subnav-5;#Admin-6');">
<ul id="mygp2subnav-5;#Admin-6" class="dynamicmenu3">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul><a href="#">Third Level</a></li>
<li class="menubar lasttab" lasttab="true" onmouseover="showsub(this,'mygp2subnav-5;#Admin-12');" onmouseout="hidesub(this,'mygp2subnav-5;#Admin-12');">
<ul id="mygp2subnav-4" style="display: none;">
<li class="menubar lasttab" lasttab="true"><a href="#">Home</a></li>
</ul>
<ul id="mygp2subnav-5" style="display: none;">
<li class="menubar"><a href="#">Admin</a></li>
<li class="menubar" onmouseover="showsub(this,'mygp2subnav-5;#Admin-6');" onmouseout="hidesub(this,'mygp2subnav-5;#Admin-6');">

</div>
<div id="submenulistextender"><img src="Admin.aspx_files/spacer.gif" alt=""></div>
</div>
</div>
</div></div></div>
</body>



CSS



/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}


.clearfix {
display: block;
clear: both;
}
/* End hide from IE-mac */

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}
/* END CLEARFIX */

div#mygp2nav_inner {
margin:6px 0 5px;
white-space: nowrap;
overflow:hidden;
}

div#mygp2nav_outer {
overflow:hidden;
}
div#mygp2primary
{
background: url(images/nav_back.gif) repeat-x 0px 0px;
min-height: 0;
margin: 0;
padding: 0;
max-width: 100%;
}
div#mygp2primary div
{
background: transparent url(images/nav_div.gif) no-repeat right top;
float: left;
line-height: 25px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
}
div#mygp2primary div#leftcorner
{
background: transparent url(images/nav_corner.gif) no-repeat scroll 0 0;
width: 3px;
height: 3px;
border: none;
}
div#mygp2primary div#rightcorner
{
background: transparent url(images/nav_corner.gif) no-repeat right top;
float: right;
width: 3px;
height: 3px;
border: none;
}
div#mygp2primary div.lasttab {
background:transparent none repeat scroll 0 0;
}
div#mygp2primary div.active {
border: none;

}
div#mygp2primary div.active2 {
background: #91B5C3 url(images/nav_div.gif) no-repeat right top;
}
div#mygp2primary div a {
color:#FFFFFF;
float:left;
font-family: Verdana, Tahoma;
font-size: 12pt;
padding:0 12px;
text-decoration:none;
line-height:23px;
vertical-align: top;
}
div#mygp2subnav
{
clear:both;
background: url(images/snav_back.gif) repeat-x 0px 0px;
min-height: 0;
}
div#mygp2subnavs {
overflow:hidden;
}
#menuList {
z-index: 100;
position: absolute;
margin: 0;
padding: 0;
font-size: 11px;
min-height: 0;
}
/* set positioning of Primary and Secondary Navs */
#mainMenu .menuBar a {
/* added */
padding: 5px 8px 7px 8px !important;
/* IE 7 and Below */
padding: 7px 8px 6px 8px;
text-decoration: none;
border: 0;
min-height: 0;
}
#menuList :hover {
min-height: 0;
}
#menuList ul {
margin: 0;
padding: 0;
font-size: 11px;
font-weight: normal;
}
#menuList li {
position: relative;
line-height: 23px;
height: 23px;
display: block;
float: left;
list-style: none;
margin: 0;
background: transparent url(images/snav_div.gif) repeat-y right top;
}
#menuList li.lasttab {
background: transparent;
}
#menuList a {
color: #FFFFFF;
margin: 0;
padding: 5px 7px;
text-decoration: none;
}
/* End Setting Width for Each SubCategory */
#menuList li ul li {
line-height: 1;
height: auto;
display: block;
list-style: none;
margin: 0;
padding: 0;
background: #91B5C3;
}
#submenulistextender
{
width: 100%;
position: relative;
line-height: 23px;
height: 23px;
display: block;
float: left;
}
.dynamicmenu3 {
text-align: left;
position: absolute;
visibility: hidden;
top: 23px;
}
.dynamicmenu3 li {
border-bottom: solid 1px #666666;
}
.dynamicmenu3 li a {
display: block;
font-size: 1em;
width: 200px;
}





Thank you so much in advance, this problem has frustrated me so much.

- Nesalot

Nesalot
01-15-2010, 06:40 PM
By the way this is a IE6 and IE7 issue only.

Rowsdower!
01-15-2010, 09:36 PM
We would need to see your full source code (HTML and CSS) to get to the root of the issue. There should be a valid doctype for starters - which you may or may not have but I can't tell right now - and before wrestling with CSS make sure that your HTML code validates:
http://validator.w3.org/

and then make sure that your existing CSS validates:
http://jigsaw.w3.org/css-validator/

Also, if you can give us a link to your test page that makes debugging much easier for us than giving raw code. If you don't have a web host to put your page online then check out the free hosting links in my sig below.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum