Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

CSS menu doesn't display in Explorer 6

8:18 pm on Jan 20, 2009 (gmt 0)

5+ Year Member

I have a css menu that I found code for that works great in everything except IE 6 in which it won't display at all.

Here's the css code for the menu:

#topnav {display:none;}
html>body #topnav {display:block;}/*--- These 2 lines Hide from IE6 and older ALTOGETHER----*/

#topnav {
position:absolute;/*---place exactly where I WANT it to appear----*/
*---usual IE Fix of following position:absolute with Position: relative will not work
Re-adjust the margin to correct IE Invented placement. Big headed MS will read the FIRST instance of a repeat element as THEIRS and ignore any repeat element afterwards...(sounds typically fitting for that company lol). All the other browsers that follow code convention properly will see the first, then see the second and update/use that instead----*/
margin-left: 115px;
top: 100px;
/*width:9999px;--makes no difference ---*/
font-size: 0; /*---fix menu placement - all browsers unified----*/
text-align:center; /*---If you want menu Items Centered then change it----*/

.nav li{
display:inline; /*no difference in all other browsers but REQUIRED for IE (7)*/

.nav li ul{
padding-top: 2px; /*padding at top (UNDER heading) of the entire submenus ONLY-*/
/* padding-bottom:5px; OPTINAL padding at bottom of the entire submenus ONLY - or use MARGIN - Does Not matter - get the SAME result in all browsers-*/

ul.nav { margin-top: 5px;}
/*display:table;--makes no difference inline, table, whatever---*/
/*position:relative;--makes no difference ---*/

.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none; /*--gets rid of horrid bullet points and associated indents---*/
} /*display: inline;no difference in ANY browser-*/

display: table-cell;/*--needs to be 'TABLE-CELL' or screws up ALL Menus - This ALSO hide the entire menu from ancient browsers (nice one) ---*/
/*display: inline;-screws up ALL Menus all do an IE and put subsequents AND Subs underneath-*/
/*position:relative;--makes no difference ---*/
padding: 1px ; /* This effectively puts 1px border extended around submenupopup - optional - make anything you want - will effect overall width of menu so may have to reduce widths unanimously to compensate---*/
width:120px; /*Specified width of menu Tabs-*/
float:left; /*IE (7) ONLY diff - doesnt plonk subsequent and subs underneath on hover -*/

ul.nav li>ul{
display: none; /*obviously - don't show submenu normally---*/
/*position:relative;--makes no difference ---*/

ul.nav a:hover{
background-color : #494036; /* Color of bar on rollover */
color : #FFFFFF; /* Color of text on rollover */

ul.nav li:hover>ul{
display : block;/*obviously - show submenu only when the mouse is over it--*/
/*position:relative; Makes stuff all difference -*/

.nav ul li a{
display: block;
padding: 2px 4px 2px 4px;/*padding around submenu links order- top right bottom left (clockwise) */
/*border-top: 1px solid #000; optional entries - of course, my example has border extended aound it already making a bottom line*/

.nav li a { color:#000;/*** Menu Title color only! ***/
padding-left:4px;}/*** Left and right padding effective ONLY for menu titles here - probably best to match padding of submenu items as above***/
/* padding-top:9999px;}** this may appear to be a silly entry BUT in all browsers apart from IE (7) it creates an invisible hotspot extending in this case 9999px above the menu title TEXT width. Cool trick - handy if you want it - nuke it if you dont. Take it out of comment to try***/

.nav ul li a{
background-color: #FFFFFF;/*** bg col of entire submenu***/
color: #000;/*** text col of entire submenu***/
width: 112px;/*fixes sub width Firefox*/ /* width minus padding (both sides) of sub items to compensate eg if 4 - same width as header cell 120 - (2×4 left right padding)= 112---*/
margin-top: 1px;} /*put this in IF you WANT a gop between each submenu item - the background of extended top item background will show behind***/

ul.nav li:hover, ul.nav li:focus, ul.nav li:active, ul.nav li.selected, ul.nav li.selected:hover, ul.nav li.selected:focus, ul.nav li.selected:active { /*** Color of menu items on rollover ***/
background-color: #494036;
color: #FFFFFF;

.nav ul li a:hover{
background-color: #494036;
color: #FFFFFF; /*** text col and bg col of submenu individual li items on hover - mine are kept black - you can choose different***/

ul.nav li:active,
.nav ul li a:active{
background-color: #494036;/*** text col and bg col of submenu individual li items on Click / active***/
color: #FFFFFF;
}/*** Browser differences - on click the title item will also change bg col including any visable background between menu item blocks. (not title txt col aswell) This is in Chrome Firefox Opera Netscape Flock- but not in IE - See notes for versions tested**Of course, you can always just remove ul.nav li:active,*/

.nav a{
font : 14px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
font-weight: bold;
color : #FFFFFF; /* color of text */
text-decoration: none;

Here's the html code for the menu portion:

<div id="topnav">
<ul class="nav">
<li><a href="http://www.example.com/index2.htm">Home</a></li>
<li><a href="http://www.example.com/AboutUs.htm">About Us</a></li>
<li><a href="http://www.example.com/Gallery1.htm">Galleries</a>
<li><a href="http://www.example.com/Gallery1.htm">Gallery 1</a></li>
<li><a href="http://www.example.com/Gallery2.htm">Gallery 2</a></li>
<li><a href="http://www.example.com/Gallery3.htm">Gallery 3</a></li>
<li><a href="http://www.example.com/Gallery4.htm">Gallery 4</a></li>
<li><a href="http://www.example.com/Gallery5.htm">Gallery 5</a></li>
<li><a href="http://www.example.com/Testimonials.htm">Testimonials</a></li>
<li><a href="http://www.example.com/Contact.htm">Contact Us</a></li>

Any help would be GREATLY appreciated!

[edited by: swa66 at 4:52 am (utc) on Jan. 21, 2009]
[edit reason] use example.com, no personal URLs allowed. [/edit]

2:00 am on Jan 21, 2009 (gmt 0)

5+ Year Member

ie6 won't understand the child selector property so it won't work, you'll be able to get this menu to show the top menu but the flyout you'll have no chance, get yourself over to the excellent cssplay website, there's a load of menus there that'll do the trick.
2:27 pm on Jan 21, 2009 (gmt 0)

5+ Year Member

What's the cssplay website?
2:32 pm on Jan 21, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

If you google cssplay, it will come up in the search for you.

Posting of url's isn't permitted, so we aren't able to post the link to the site for you.

Another Great Site for lists and menus is Listutorial's site. A fabulous site for you to go through.


Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month