We help IT Professionals succeed at work.

Css unordered list drop down menu problem in IE

timkamer
timkamer asked
on
Hi

I'm laying out some pages with CSS, and I have made a veritcal drop menu using nested unordered lists. This menu is nested within a floating block element. The problem is that IE/Win aligns the nested <ul> element at top right of its containing <li> element, so the menu is dropping down off to the right, like a horizontal drop. Works as should in Firefox and Netscape.

I've been trying to troubleshoot this for days, no luck. Why can't IE be more like FF?

I can't post a link because I have not yet set up the remote app and dB servers, so all I have to give you is the CSS and markup:
 
CSS for menu:

#nav, #nav ul { padding: 0px 0px 0px 0px;
      margin: 7px 0px 0px 3px;
      list-style: none;
      font-size: 10px;
      font-family: Arial, Helvetica, sans-serif;      
      }

#nav a { display: block;
       text-decoration: none;
       color: #985C75;
       padding: 2px 0px 2px 2px;
       background: transparent;
       width: 110px;}

#nav a:hover {background: #AB878E; color: white;}

#nav ul li {       color: white;
      list-style-type: none;
             }
             
/*these are the top level li elements, when hovered, will drop the nested <ul> elements*/
             
#nav li#residential {width: 82px;
             padding: 0px;
             float: left;
             margin: 0px;
             }
                              
#nav li#commercial {width: 82px;
            float: left;
             padding: 0px;
             margin: 0px;
             }
                              
#nav li#plWorship {width: 112px;
             float: left;
             padding: 0px;
             margin: 0px;
             }
            
/* the unordered list element that is dropped down.*/
#nav li ul {position: absolute;
                  padding: 0px 0px 0px 0px;
                  width: 110px;
                  font-size: 11px;
                  left: -999em;
                  
                  margin: 0px 0px 0px 0px;
                  display: block;
                  background: #F2EBDB;
                  border: 2px solid #85696E;
                  
                  z-index: 500;
                  }
                  
      li > ul {
      top: auto;
      left: auto;
      }

                  

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
      left: auto;
}


Here is markup:
<div class="blockRight"><!-- this is the element that is floated left, which is nested within elements that go with the flow of page-->
 <div id="nav">
 <ul>
 
<li id="residential">RESIDENTIAL
<ul>
<cfoutput query="q_residential">
<li><a href="getportfolio.cfm?dgID=#dgID#">#heading#</a></li>
 </cfoutput>
</ul>
 </li>
<li id="commercial">COMMERCIAL
<ul>
<cfoutput query="q_commercial">
<li><a href="getportfolio.cfm?dgID=#dgID#">#heading#</a></li>
</cfoutput>
</ul>
</li>
<li id="plWorship">PLACES OF WORSHIP
 <ul>
<cfoutput query="q_placesofworship">
<li><a href="getportfolio.cfm?dgID=#dgID#">#heading#</a></li>
</cfoutput>
</ul>
</li>
</ul>
</div>

Thanks in advance for your help!  

Tim :)
Comment
Watch Question

Top Expert 2013

Commented:
Without being able to see it, I am not sure whether I understand the problem or not.  If you just have the UL to fire to the right in IE yu can pull the entries back to the left with negative indents:

<ul style="text-indent:-25px">

Standard compliant browsers like Ff will ignore that so you should be able to adjust it for IE without messing up the other browsers.

If that is not the problem, you will need to just stick a static version of the page up somewhere so you can post a link.  These kinds of problems are not easy to solve without being able to see what the page is doing.  That is probably one reason you have not had much response to the question.

Cd&

Commented:
You can also use code in your stylesheet that works only in IE:
* html ul {
  text-indent:-25rpx;
}

The "* html" thing is IE only apparently.  You can apply any IE specific styles like this.

Author

Commented:
thanks for your responses. modifying the text-indent property is moving the second level list elements over (the links), not the unordered list element they are in.

I used *html li ul {text-indent:-82px;}  

I will set up the remote server in the morning and then get back to you all so you can see for yourselves. sorry this wasn't done.

again, thank you. Tim.

Author

Commented:
Hi

now you can view the problem in IE.

http://www.kamermedia.com/agd/decorative-glass/

roll over the Residential, Commercial, and Places of Worship submenus - they are within the purple block. You'll see that the menu drops off to the side.

Thanks in advance. Tim
Commented:
Change your CSS section about the floating NAV's to the below:

#nav li#residential {width: 82px;
  padding: 0px;
  float: left;
  margin: 0px;
}
                              
* HTML #nav li#residential ul {
  margin-left: -82px;
  margin-top: 10px;
}
                              
#nav li#commercial {width: 82px;
  float: left;
  padding: 0px;
  margin: 0px;
}
                              
* HTML #nav li#commercial ul {
  margin-left: -82px;
  margin-top: 10px;
}
                              
#nav li#plWorship {width: 112px;
  float: left;
  padding: 0px;
  margin: 0px;
}
            
* HTML #nav li#plWorship ul {
  margin-left: -112px;
  margin-top: 10px;
}


You may want to play with the numbers a little.

Author

Commented:
right on! this fixed it. thank you very much dij8!

if you have a moment, would you explain how using *HTML #nav# on the selector fixes this in IE.

:)

Commented:
When listing tags and id's with spaces then CSS follows that path through the DOM and applies the style. e.g. DIV P {} will style all P tags inside a DIV.

HTML is the first tag in any DOM so following the path HTML #NAV li#plWorship ul follows the path (in reverse order) any UL inside an LI named plWorship (note the lack of space there) inside an element named #NAV inside the HTML tag.  Of course, you don't want to do this so you add the * at the beginning because IE, wrongly, has an unknown element BEFORE the HTML tag.  Therefore, following the same path, the HTML must be inside some other element, any element (that's what * stands for).  Only IE has an element prior to the HTML tag so this method will only effect IE.

Commented:
>>>  right on! this fixed it. thank you very much dij8!

I guess you can see what my recommendation might be. :-)
Top Expert 2013

Commented:
Most definitely points to the Kiwi. :^)

Cd&

Commented:
Thanks guys.
Top Expert 2013

Commented:
Plus it get every body together for a beer. :^)

Cd&

Commented:
You know Kiwi's were made for beer.  We have our own built in straw.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.