CSS dropdown menu edit

Question

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

gsiradze · Accepted Answer · 2014-10-28 20:58:20Z

1

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

answered Oct 28, 2014 at 20:58

gsiradze

4,71716 gold badges68 silver badges115 bronze badges

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

1 Comment

Anel Over a year ago

Thanks a lot i spend 20 minutes of searching problem in CSS.

Jonathan Crowe · Accepted Answer · 2014-10-28 20:56:53Z

1

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

answered Oct 28, 2014 at 20:56

Jonathan Crowe

5,8031 gold badge20 silver badges28 bronze badges

Comments

Ash Reno · Accepted Answer · 2014-10-28 20:59:26Z

1

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

answered Oct 28, 2014 at 20:59

Ash Reno

411 silver badge4 bronze badges

Collectives™ on Stack Overflow

CSS dropdown menu edit

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related