CSS dropdown on hover [duplicate] - html

Question

This question already has answers here:
CSS drop down menu hover effect
(4 answers)
Closed 8 years ago.
I'm trying to create a drop down navigation bar, this is what I've got.
html
<div class="navBar">
<ul class="navBarStyles navBarWidth navBarMain">
<li class="onSelect">Item1</li>
<li>Item2</li>
<li>Item3</li>
<ul class="navBarExtended">
<li class="borderLeft">ExtraItem</li>
</ul>
<ul class="navBarExtra" id="floatRight">
<li class="i-icon">Dropdown</li>
<ul class="dropdown">
<li>SubItem1<li>
<li>SubItem2<li>
<li>SubItem3<li>
</ul>
</ul>
</ul>
</div>
css
a{
text-decoration: none;
}
.header {
width: 100%;
background-color: #000000;
}
.headerContent{
width: 960px;
margin: 0 auto;
}
.navBar{
font-family: "opensans-regular";
width: 100%;
position: absolute;
line-height: 48px;
background-color: #0088FF; /*0088FF*/
color: #ffffff;
}
.navBarWidth{
width: 400px;
margin: 0 auto;
}
.navBarStyles li{
float: left;
}
.navBarStyles li a{
display: inline-block;
color: #FFFFFF;
font-size: .9em;
text-align: center;
padding-left: 20px;
padding-right: 20px;
vertical-align: top;
letter-spacing: 0;
text-decoration: none;
}
.navBarMain li a:hover{
background-color: #40A5FF; /*#005569 #3D3C3C 12B0CC*/
text-shadow: none;
/* Firefox */
-moz-transition-property: background-color;
-moz-transition-duration: .30s;
-moz-transition-timing-function: ease-out;
-moz-transition-delay: 0s;
/* WebKit */
-webkit-transition-property: background-color;
-webkit-transition-duration: .30s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: 0s;
/* Opera */
-o-transition-property: background-color;
-o-transition-duration: .30s;
-o-transition-timing-function: ease-out;
-o-transition-delay: 0s;
/* Standard */
transition-property: background-color;
transition-duration: .30s;
transition-timing-function: ease-out;
transition-delay: 0s;
}
.navBarExtended li a:hover{
text-decoration: underline;
background: none;
}
/*Class applied to current page element */
.onSelect{
background-color: #40A5FF;
}
/*Navigation Bar Extra - Sytles*/
.navBarExtra li{
float: right;
opacity: .88;
}
.navBarExtra li:hover{
opacity: 1;
background: none;
cursor: pointer;
-moz-transition-property: opacity;
-moz-transition-duration: .30s;
-moz-transition-timing-function: ease-out;
-moz-transition-delay: 0s;
}
.dropdown{
font-family: 'opensans-regular';
font-size: .95em;
}
.navBarExtra ul li{
visibility: hidden;
float: left;
min-width: 150px;
position: absolute;
margin-top: 50px;
left: 0;
z-index: 999;
}
.navBarExtra ul li:hover > ul,
.navBarExtra ul li ul:hover{
visibility: hidden;
}
jsFiddle
but not able to display the sub items under dropdown button. How can I target the dropdown button to display those when user hovers over dropdown button?

Answer 1

To be honest, with all the complicated class names and styles involved in your example, it's hard to work out what needs fixing. I put together a simple example that you can edit to work however you like. Should be pretty self explanatory.
See on fiddle: http://jsfiddle.net/5Uejn/23/
HTML
<ul class="navbar">
<li>page 1</li>
<li>page 2</li>
<li>title 1
<ul>
<li>page 3</li>
<li>page 4</li>
<li>page 5</li>
</ul>
</li>
<li>title 2
<ul>
<li>page 6</li>
<li>page 7</li>
</ul>
</li>
</ul>
CSS
.navbar, .navbar ul
{
font-size:20px;
list-style:none;
z-index:10;
margin:0;
padding:0;
}
.navbar a, .navbar a:link
{
color:black;
text-decoration:none;
}
.navbar li
{
float:left;
background: #666;
width:100px;
}
.navbar li:hover, .navbar a:hover
{
background:#aaa;
color:blue
}
.navbar li ul
{
display:none;
}
.navbar li:hover ul
{
position:absolute;
display:block;
width:100px;
}
.navbar li ul li
{
float:none;
}