# Drop down menu in css, broswer issue

**URL:** <https://forum.kirupa.com/t/drop-down-menu-in-css-broswer-issue/236765>\
**Category:** web dev\
**Created:** [August 23, 2007, 2:19pm UTC](https://forum.kirupa.com/t/drop-down-menu-in-css-broswer-issue/236765 "2007-08-23T14:19:16Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![stefanmhodgson](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@stefanmhodgson](https://forum.kirupa.com/u/stefanmhodgson)\
**Post date:** [August 23, 2007, 2:19pm UTC](https://forum.kirupa.com/t/drop-down-menu-in-css-broswer-issue/236765/1 "2007-08-23T14:19:16Z")

</div>

Hello, building a website, I got some css for a drop down menu that was supposed to be cross browser. It works fine in IE but doesn’t appear in MF. There is a bit in the CSS that I have messed about with, which is:

.menu ul li a.hide,  
.menu ul li a:visited.hide {display:none;}  
.menu ul li a:hover ul li a.hide {display:none;}

When I mess with this, I can get it to work in MF but it then appears differently in IE. It displays every link in the list twice!

I know that this code just needs some tinkering to get it to work on both browsers.

Any help would be much appreciated.

Below is the CSS for the whole document.

/\* CSS Document for Washingwell School\*/

body{  
font-family:Verdana, Arial, Helvetica, sans-serif;  
color:#996600;  
font-size:10px;  
background:#88652b;  
}

/\* This is NAV \*/  
#mainNav{  
padding:0;  
margin:0;  
text-align:right;  
font-size:12px;  
width:186px;  
font-family:Georgia, “Times New Roman”, Times, serif;  
}

#mainNav a{  
display:block;  
color:#996600;  
background:url(…/images/nav\_bg.gif) right no-repeat;  
text-decoration:none;  
padding:7px 75px 7px 0;  
margin:0;  
}

#mainNav a:hover{  
background:url(…/images/nav\_rollover.gif) right no-repeat;  
color:#996600;  
text-decoration:none;  
padding:7px 75px 7px 0;  
margin:0;  
}

/\* common styling \*/  
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative top; margin:0; font-size:11px; margin:0;}  
.menu ul li a, .menu ul li a:visited {  
display:block;  
text-decoration:none;  
color:#654a1d;  
width:128px;  
voice-family:""}"";  
voice-family:inherit;  
width:118px;  
height:25px;  
text-align:right;  
border:1px solid #fff;  
border-width:1px 1px 0 0;  
padding-right:10px;  
background:#ebe4d0;  
line-height:19px;  
font-size:11px;}  
.menu ul {padding:0; margin:0;list-style-type: none; }  
.menu ul li {float:left; margin-right:1px; position:relative;}  
.menu ul li ul {display: none;}

.menu ul li:hover a {color:#654a1d; background:#ebe4d0;}  
.menu ul li:hover ul {display:block; position:absolute; top:0; left:129px; width:80px;}  
.menu ul li:hover ul li a.hide {background:#ebe4d0; color:#654a1d;}  
.menu ul li:hover ul li:hover a.hide {width:100px;}  
.menu ul li:hover ul li ul {display: none;}  
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#fff; width:100px;}  
.menu ul li:hover ul li a:hover {background:#dfc184; color:#fff;}

table {border-collapse:collapse; border:0; margin:0; padding:0;}

.menu ul li a.hide,  
.menu ul li a:visited.hide {display:none;}  
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#b3ab79;}  
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:129px; width:80px;}  
.menu ul li a:hover ul li a.sub {background:#dfc184; color:#fff;}  
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff; width:100px;}  
.menu ul li a:hover ul li a ul {visibility:hidden;}  
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#654a1d;}

#leftcolumn h1{  
font-family:Verdana, Arial, Helvetica, sans-serif;  
font-size:10px;  
color:#663300;  
padding:5px;  
letter-spacing:5px;  
text-align:left;  
width:500px;  
background-image:url(…/images/header\_bg.gif);  
border-left:1px solid #CCCC99;  
border-bottom:1px solid #996600;  
border-right:1px solid #996600;  
border-top:1px solid #CCCC99;  
}

#docnav a{  
display:block;  
color:#996600;  
background:url(…images/nav\_bg\_docs.gif) right no-repeat;  
text-decoration:none;  
padding:6px 55px 6px 0;  
margin:0;  
}

#docnav a:hover{  
background:url(…images/nav\_rollover.gif) right no-repeat;  
color:#996600;  
text-decoration:none;  
padding:6px 55px 6px 0;  
margin:0;  
}

#holder{  
width:868px;  
margin:auto;  
padding-top:40px;  
padding-bottom:0px;  
}

#header{  
width:868px;  
height:33px;  
background:url(…/images/header.jpg) no-repeat;  
}

#mainHolder{  
background:url(…/images/hackline.gif) repeat-y;  
width:868px;  
margin:0;  
padding:0;  
}

#galleryhome img{  
border-left:2px solid #CCCC99;  
border-bottom:2px solid #996600;  
border-right:2px solid #996600;  
border-top:2px solid #CCCC99;  
margin-bottom:10px;  
margin-right:6px;  
}

.clearfix:after {  
content: “.”;  
display: block;  
height: 0;  
clear: both;  
visibility: hidden;  
}

/\* Hides from IE-mac \*/

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

#leftcolumn{  
margin:0;  
float:left;  
padding:170px 102px 30px 50px;  
width:682px;  
voice-family:""}"";  
voice-family:inherit;  
width:530px;  
background:url(…/images/bg\_girl\_white\_lines.jpg) top left no-repeat;  
}

#rightcolumn{  
background-image:url(…/images/right\_column\_1\_pixel.gif);  
margin:0;  
float:right;  
width:186px;  
}

#footer{  
clear:both;  
float:none;  
height:70px;  
vertical-align:top;  
background:url(…/images/footer.gif) no-repeat;  
text-align:right;  
margin:0px;  
padding: 10px 70px 0 0;  
width:868px;  
voice-family:""}"";  
voice-family:inherit;  
width:798px;  
}