CODEWITHSUNDEEP
htmlcss
Anel
Anel

Reputation: 23

CSS dropdown menu edit

I created the drop-down menu by using CSS and HTML. I just can't figure out what am I making wrong. When I hover the mouse over the Social it doesn’t pop-up me the drop-down menu.

Entire fiddle here

Js Fidle Example

A part of code where I think its mistake.

   #nav ul li a:hover {
    color: #ccc;
    text-decoration: none;
}
#nav ul li:hover ul{
    display : block; 
}
#nav ul ul {
    display: none;
    position : absolute ;
    background-color: #333;
    border: 5px solid #222;
    border-top : 0;
    margin-left: -5px;        
}

Upvotes: 2

Views: 65

Answers (3)

Ash Reno
Ash Reno

Reputation: 41

The <ul> containing facebook, youtube, twitter needs to be within the social <li>. It works with that change.

Upvotes: 1

gsiradze
gsiradze

Reputation: 4733

youo have <li><a href="#"> Social</a></li> and it should be

<li><a href="#"> Social</a>
                <ul>
                  <li> Facebook</li>
                  <li> Twitter </li>
                  <li> Youtube </li>
                </ul>
             </li>

JSFIDDLE

Upvotes: 1

Jonathan Crowe
Jonathan Crowe

Reputation: 5803

You need to put the sub UL inside the li

<li><a href="#"> Social</a>
    <ul>
         <li> Facebook</li>
         <li> Twitter </li>
         <li> Youtube </li>
    </ul>
</li>

See fidde: http://jsfiddle.net/2j55uthz/1/

The reason is because in your CSS this line:

#nav ul li:hover ul {
    display: block
}

Is target the UL element inside of the hovered li

Upvotes: 1

Related Questions