Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop Down Menu - When I hover on Sub Nav, Main Cat title dissapears

    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
    Code:
    <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

    Code:
    /* 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

  • #2
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    By the way this is a IE6 and IE7 issue only.

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •