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>
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>