Comments on: Full CSS Horizontal Drop Down Menu

By: achilez

achilez — Thu, 17 Sep 2009 01:32:47 +0000

interesting, it works on FF, IE, Opera, Chrome and Safari

By: Paul

Paul — Thu, 10 Sep 2009 07:04:29 +0000

Got everything figured out that I mentioned above and the dropdown menu works fine in every browser I checked it in except for IE 6. Too bad, I liked it alot.

By: Paul

Paul — Sun, 23 Aug 2009 20:28:57 +0000

For what ever reason the doctype didn’t show up after I pasted the code. I had to change it to transitional instead of strict. See source code.

By: Paul

Paul — Sun, 23 Aug 2009 20:26:34 +0000

You’re awesome!! I really appreciate what you’ve done! I had to make the doctype as follows to make it validate, will that make a difference in older browsers?

It seems to work just fine in the newest versions that I tried.

Also if I wanted to center the menu under the header how would I do this? I tried a few things with no luck. See the link for how it looks now.
http://www.freehostbc.com/temp/index3.html

Again thanks for doing this for me I’ve spent a lot of time trying to figure it out.

By: ikawka

ikawka — Sun, 23 Aug 2009 03:10:11 +0000

hi paul; i’ve updated my post, please check… i hope it does the trick…

By: Paul

Paul — Sat, 15 Aug 2009 07:16:08 +0000

Hey I very much appeciate that. I am still trying to figure it out and changed my doc reference to html 401 transitional to see if that would make a difference. I’ve also double checked my html to make sure the nested lists are correct. I have to assume it is in the css somewhere or a hack that I know nothing about for IE or Firefox. I’ve looked at a couple of others that use javascript. I really don’t want to use it though if I can avoid it.

By: ikawka

ikawka — Fri, 14 Aug 2009 07:00:58 +0000

hi paul,

I will try to modify your CSS, however I cannot do it now, I’m in the middle of something, I will update my POST to 4 level menu.

By: Paul

Paul — Fri, 14 Aug 2009 06:52:00 +0000

Thanks again for your reply. I tried what you suggested but it is still the same. Hope you don’t mind appending my css code here for you to look at.

/* horizontal dropdown menu */

.menu {
height:26px;
position:relative;
z-index:100;
font-family:Verdana;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:149px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:100px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12px;
text-decoration:none;
color:#1a2732;
width:89px;
height:26px;
background:#FFF;
padding-left:10px;
line-height:29px;
font-weight:bold;
border-color:#AAAAAA;
border-width:1px;
border-style:solid;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:100px;
w\idth:88px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#1a2732 url(http://www.freehostbc.com/fnfsportsfishing/images/grey-arrow.gif) no-repeat 100px center;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#1a2732 url(http://www.freehostbc.com/fnfsportsfishing/images/blue-arrow.gif) no-repeat 100px center;
color: #FFF;
}
.menu ul ul :hover > a.drop {
background:#1a2732 url(http://www.freehostbc.com/fnfsportsfishing/images/blue-arrow.gif) no-repeat 100px center;
color: #FFF;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#FFF }
/* style the third level hover */
.menu ul ul ul a:hover {background:#1a2732; color:#FFF }
/* style the fourth level background */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#FFF }
/* style the fourth level hover */
.menu ul ul ul ul a:hover {background:#1a2732; color:#FFF }
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul,.menu ul ul ul,.menu ul ul ul ul{
visibility:hidden;
position:absolute;
height:0;
top:26px;
left:0;
width:100px;
border-top:1px solid #AAAAAA;
}
* html .menu ul ul { top:26px }
/* position the third level flyout menu */
.menu ul ul ul{
left:100px;
top:-1px;
width:100px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left { left:-100px }
/* position the fourth level flyout menu */
.menu ul ul ul ul{
left:100px;
top:-1px;
width:100px;
}
/* position the fourth level flyout menu */
.menu ul ul ul ul.left { left:-100px }
/* style the table so that it takes no part in the layout – required for IE to work */
.menu table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#FFFFFF;
color:#1a2732;
height:auto;
line-height:1em;
padding:5px 10px;
width:79px;
border-width:0 1px 1px 1px;
}
* html .menu ul ul a, * html .menu ul ul a:visited { width:101px }
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#FFF;
background:#1a2732;
}
.menu :hover > a, .menu ul ul :hover > a { color:#FFF; background:#1a2732; }
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul{ visibility:visible }
/* keep the third level hidden when you hover on second level list OR link */
.menu ul :hover ul ul{ visibility:hidden }
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible }
/* keep the fourth level hidden when you hover on the second level list OR link */
.menu ul :hover ul ul ul{ visibility:hidden }
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul{ visibility:visible }
/* keep the fifth level hidden when you hover on the third level list OR link */
.menu ul :hover ul ul ul ul{visibility:hidden }
/* make the fifth level visible when you hover over fourth level list OR link */
.menu ul :hover ul :hover ul :hover ul :hover ul{ visibility:visible }

/* end horizontal dropdown menu */

By: ikawka

ikawka — Fri, 14 Aug 2009 02:50:01 +0000

try modifying this line:

.menu ul ul {
visibility:hidden;
…

into
//4th and 5th
.menu ul ul, .menu ul ul ul, .menu ul ul ul ul {
visibility:hidden;
…

and
4th
.menu ul :hover ul :hover ul :hover ul{ visibility:visible }
5th
.menu ul :hover ul :hover ul :hover ul :hover ul{ visibility:visible }

try that perhaps

By: Paul

Paul — Fri, 14 Aug 2009 02:30:13 +0000

Thanks for your reply. That is what I did but it doesn’t seem to work for me. I get all the levels but the fourth level is visible before you hover over the third level list. I know it must be something simple as I followed your original lead and added the extra
.menu ul ul ul ul{
left:100px;
top:-1px;
width:100px;
}
and also added the extra
.menu ul ul ul ul.left { left:-100px }
and an extra
.menu ul :hover ul ul ul{ visibility:hidden }
and extra
.menu ul :hover ul :hover ul :hover ul{ visibility:visible }

If you have firefox you can view the css code and source here http://www.freehostbc.com/temp/index3.html

Thank you very much for helping me with this.