Help with Submenu Disappearing (IE)

John,

I'm about to lose it here... I have been fighting with this menu and have almost given up... If you could shed some light on this one, I would really appreciate it.

Every time I try to hover over the submenu, I can't get to it - it disappears.

I know it's something in the CSS (like a space between the parent and child - but I can not find it.  My CSS is really goofy as I have tried to break everyting out into levels (0-2) using their respective classes to make sure I am getting the right class applied to the right menu item.  Also, I am using an image in the root level and to get it not show on the submenu I needed to create another class with .Level1 and set the bg-image to none and give it a bg-color.

Here is my CSS

/* Menu */
#nav, #nav li, #nav a { font-family: Georgia, 'Trebuchet MS', 'Times New Roman'; font-size: 13px; font-weight: normal; color: #C7C0B5; text-transform: uppercase }

/* Level 0 */
#nav ul { list-style: none; float: left; width: auto; background-color: transparent }
#nav li { position: relative; float: left; width: 107px; padding:0; list-style: none; text-align:center }
#nav a { display: block; padding: 0px; text-decoration: none; width: 107px; height: 40px; line-height: 44px; }
#nav li a:hover { background-image: url(images/menu_over.gif); padding-top: 0px; border:0 }
#horizontalmenu > #nav li a:hover { background-image: url(images/menu_over.gif); padding-top: 1px; border:0 }
#nav li.SelectedTab a { background-image: url(images/menu_over.gif); padding-top: 0px }
#horizontalmenu > #nav li.SelectedTab a { background-image: url(images/menu_over.gif); padding-top: 1px }
/* Level 1 */
#nav ul.Level1 { position: absolute; left: -999em; background-color: #666563; margin: -2px 0 0 0; padding: 3px; border: 0px solid #666563; font-size: 11px; z-index: 99 } /* second-level lists */
#nav ul.Level1 li { position: relative; float: left; width: 200px; padding:0; list-style: none; text-align:left }
#nav ul.Level1 li a { font-size: 11px; line-height: 20px; display: block; padding: 0px 5px; text-decoration: none; width: 190px; height: 20px; background-color: #4A5057 }
#nav ul.Level1 li a:hover { background-image: none; background-color: #4A5057 }
#horizontalmenu > #nav ul.Level1 li a:hover { background-image: none; background-color: #666563; padding-top: 1px }
#nav ul.Level1 li.SelectedTab a { background-image: none; background-color: #666563 }
#horizontalmenu > #nav ul.Level1 li.SelectedTab a { background-image: none; background-color: #666563; padding-top: 1px }

#nav li:hover ul, #nav li.iehover ul { top: 42px; left:0 }

/* Level 2 */
#nav ul.Level2 { position: absolute; left: -999em; background-color: #4A5057; margin: -2px 0 0 0; border: 0px solid #666563; font-size: 11px; z-index: 99 } /* second-level lists */
#nav ul.Level2 li { position: relative; float: left; width: 200px; padding:0; list-style: none; text-align:left }
#nav ul.Level2 li a { font-size: 11px; line-height: 20px; display: block; padding: 0px 5px; text-decoration: none; width: 190px; height: 20px; background-color: #4A5057 }
#nav ul.Level2 li a:hover { background-image: none; background-color: #666563 }
#horizontalmenu > #nav ul.Level2 li a:hover { background-image: none; background-color: #666563; padding-top: 0px }
#nav ul.Level2 li.SelectedTab a { background-image: none; background-color: #666563 }
#horizontalmenu > #nav ul.Level2 li.SelectedTab a { background-image: none; background-color: #666563 }

#nav li li:hover ul, #nav li li li:hover ul, #nav li li.iehover ul, #nav li li li.iehover ul { top: 0; left:105px }

HTML - Curly Braces have replaced the "<" & ">"

{div id="horizontalmenuwrapper"}
  {div id="horizontalmenu"}
    {div id="nav" class="TabList"}
      {ul class="Level0"}
        {li id="nav37" onmouseover="this.className+=' iehover ';" onmouseout="this.className=this.className.replace(' iehover ', '');" class="SelectedTab"}
          {a href="#" title=""}Home{/a}
        {/li}
        {li id="nav58" onmouseover="this.className+=' iehover ';" onmouseout="this.className=this.className.replace(' iehover ', '');"}
          {a href="#" title="About"}About{/a}
        {/li}
        {li id="nav59" onmouseover="this.className+=' iehover ';" onmouseout="this.className=this.className.replace(' iehover ', '');"}
          {a href="#" title="Form"}Form{/a}
          {ul class="Level1"}
            {li id="nav64" onmouseover="this.className+=' iehover ';" onmouseout="this.className=this.className.replace(' iehover ', '');"}
              {a href="#" title="Form1"}Form1{/a}
            {/li}
            {li id="nav65" onmouseover="this.className+=' iehover ';" onmouseout="this.className=this.className.replace(' iehover ', '');"}
              {a href="#" title="Form2"}Form2{/a}
            {/li}
            {li id="nav66" onmouseover="this.className+=' iehover ';" onmouseout="this.className=this.className.replace(' iehover ', '');"}
              {a href="#" title="Form3"}Form3{/a}
            {/li}
            {li id="nav67" onmouseover="this.className+=' iehover ';" onmouseout="this.className=this.className.replace(' iehover ', '');"}
              {a href="#" title="Form4"}Form4{/a}
            {/li}
          {/ul}
        {/li}
      {/ul}
    {/div}
  {/div}
{/div}

Thanks for any help on this one.

Jon Winters

Hi Jon,

When I copied this menu into a static file it worked for me in IE.  This probably indicates that it is the other CSS in the system that is causing trouble.

On a couple of occasions I have seen problems because of the SelectedTab class which is a default DNN class. Try removing that from the default.css or change it in your template to use a different one.

I have attached the static file I made. If you are still having trouble, it may help to work it out with this file first.

Another thing I do is put border or background properties on different container elements so that I can see if there is a gap somewhere.

John,

I posted about this a couple of days ago, and I have narrowed the problem down.
I know this has something to do with the horizontalwrapper because when I add a top margin of more than 1px, I can hover over the first link in the submenu. If the margin-top is 0, no dice - the submenu disappears.

HTML

{div id="horizontalmenuwrapper"}
  {div id="horizontalmenu"}
    {Snapsis:NavMenu ID="nav" DisplayIcon="False" Level="0-2" Type="Hover" ExcludeTabs="Admin,Host" runat="server" /}
  {/div}
{/div}
{div id="horizontalwrapper"}
  {div id="breadcrumb"}You are here: {dnn:BREADCRUMB runat="server" ID="dnnBREADCRUMB" RootLevel="0" Separator="&nbsp;&raquo;&nbsp;" CssClass="breadcrumbs" /}{/div}
  {div id="LeftPane" class="leftpane" runat="server"}{/div}
  {div id="ContentPane" class="rightpane" runat="server"}{/div}
{/div}

CSS

#horizontalmenuwrapper { height: 44px; margin: 0pt auto 0pt; background: url(images/menu_bg.gif) top left repeat-x; position: relative; text-align:left}
#horizontalmenu { height: 44px; width: 750px; margin: 0px auto }
#horizontalwrapper { margin: 0pt auto 0pt; padding: 0px; position:relative; text-align:left; width:750px; }
#breadcrumb { margin: 0 0 10px 10px; padding: 3px; clear: both;}

This works perfectly in FF, but IE blows up.

Any help would be appreciated. I have been banging my head against the wall with this one.

Thanks,

Jon Winters