CSS dropdown on hover [duplicate]

Question

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"><a href="#">Item1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>

        <ul class="navBarExtended">
            <li class="borderLeft"><a href="#">ExtraItem</a></li>
        </ul>
        <ul class="navBarExtra" id="floatRight">
            <li class="i-icon">Dropdown</li>
                <ul class="dropdown">
                    <li><a href="#">SubItem1</a><li>
                    <li><a href="#">SubItem2</a><li>
                    <li><a href="#">SubItem3</a><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?

Are you using JavaScript? Consider using jQuery. Also, consider using Bootstrap. It's great for this kind of thing. — rybo111
– rybo111, Commented Dec 15, 2013 at 9:51
You'd at least have to use onclick="" which is JavaScript. — rybo111
– rybo111, Commented Dec 15, 2013 at 9:54
your code is not well formatted. you have uls inside ul directly. and some lis doesn't have closing tags. — Ravimallya
– Ravimallya, Commented Dec 15, 2013 at 11:26

Andrew · Accepted Answer · 2013-12-15 21:14:02Z

3

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><a href="#">page 1</a></li>
    <li><a href="#">page 2</a></li>
    <li>title 1
        <ul>
            <li><a href="#">page 3</a></li>
            <li><a href="#">page 4</a></li>
            <li><a href="#">page 5</a></li>
        </ul>
    </li>
    <li>title 2
        <ul>
            <li><a href="#">page 6</a></li>
            <li><a href="#">page 7</a></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;

}

edited Dec 15, 2013 at 21:14

answered Dec 15, 2013 at 11:46

Andrew

20.4k13 gold badges110 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ravimallya Over a year ago

instead of using <div class="navbar"> use <ul class="navbar">

Andrew Over a year ago

That's right thanks, changed to ul

Collectives™ on Stack Overflow

CSS dropdown on hover [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related