Click to See Complete Forum and Search --> : CSS Dropdown Help


mme
07-10-2009, 10:13 AM
I am trying to create a dropdown menu however I am having some trouble with CSS, below is the code I am using however no menu shows up when I hover my mouse iver the item:

My CSS
/*=== Navigation ===*/
/*- Nav1 -*/
.nav1{
float: left;
font-size: 14px;
height: 122px;
padding: 0 0 0 20px
}
.nav1 li{
background: url(images/vl-sep.gif) no-repeat left top;
float: left;
height: 35px;
padding: 87px 0 0
}
.nav1 li a span{
color: #686868;
display: block;
font-size: 11px;
letter-spacing: -1px
}
.nav1 li a{
color: #cecdcd;
display: block;
float: left;
padding: 0 20px
}
.nav1 li a:hover,
.nav1 li.active a{
color: #e2c14e;
text-decoration: none
}
.nav1 li a:hover span,
.nav1 li.active a span{
color: #b9af8c
}
/* === Dropdown Navigation ====*/
.nav2 li {display:none; }
.nav2 ul {display: none;}
li:hover > ul {display: block;}

Here is my HTML code:

<div class="nav1">
<ul>
<li><a href="#">Home<span>Welcome</span></a></li>
<li><a href="#">Page 1<span>Sub Title</span></a></li>
<li><a href="#">Page 2<span>Sub Title</span></a></li>
<li><a href="#">Page 4<span>Sub Title</span></a>
<ul class="nav2">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><a href="#">Contact<span>Contact Us</span></a></li>
</ul>
</div>

KDLA
07-10-2009, 11:05 AM
li:hover doesn't work in some versions of Internet Explorer. You have to have some javascript to supplement that.

You might look at this article: http://htmldog.com/articles/suckerfish/dropdowns/
to help you with the CSS, as well as providing the javascript.

mme
07-10-2009, 11:37 AM
Thats the thing I have been using Firefox 3.5 but nothing happens also with a:hover, so I am thinking my CSS my be wrong or something in the HTML?

KDLA
07-10-2009, 12:18 PM
I would guess, then, that this has something to do with it:

.nav2 li {display:none; }
.nav2 ul {display: none;}
li:hover > ul {display: block;}

What you're doing is applying "none" styles, separately, to the <ul> and <li> but then only applying the change only to the <ul>.
I suggest you get rid of the <li> display none setting.