CSS - dropdown menu

Question

I'm new with CSS and testing some stuff. I created a dropdown menu but this doesn't work correctly. Here is my code:

 <!DOCTYPE html>
<html>

<head>
    <link href = "üben_css.css" rel = "stylesheet" type="text/css">
    <title> xx</title>
</head>

<body>  


<div id="nav">
    <ul>
        <li> Home       </li>
        <li> xx
            <ul>
                <li> Hc </li>
                <li> Scc    </li>
            </ul>
        <li>Zubehör     </li>
        <li> Service    </li>
        <li> Forum </li>

    </ul>
</div>



</body>

</html>

CSS code:

  body{
margin:0;
padding:0;
}

#nav{
background-color:silver;
position:relative;
}

#nav ul li{

display:inline;
}

#nav ul ul{
display:none;
}

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

#nav ul ul li{
display:block;
}

The problem is that the nav bar is displayed inline but when I hover over my "xx" element the rest of my nav bar appear under my dropdown list. How can I fix this?

http://www.fotos-hochladen.net/uploads/20140921004u0kxad3i2r.png

Claudiu Creanga · Accepted Answer · 2014-09-21 00:15:09Z

1

Remove these lines from your css:

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

answered Sep 21, 2014 at 0:15

Claudiu Creanga

8,43613 gold badges79 silver badges120 bronze badges

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

Comments

rwxes · Accepted Answer · 2014-09-21 00:30:01Z

0

Using

#nav ul li{
    display:inline-block;
}

Compared to just inline. If it was just inline the absolute positioning below would cause multiple dropdowns to all appear in the same place according to the #nav div.

#nav ul li:hover ul{
    position: absolute;
    display:block;
}

This still doesn't look very good but it's functional. Checkout at tutsplus for some good tutorials.

At the same time, I'm sure you could solve this much more efficiently with jQuery.

answered Sep 21, 2014 at 0:30

rwxes

3031 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

CSS - dropdown menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related