CODEWITHSUNDEEP
htmlcssdrop-down-menumenu
user1607759
user1607759

Reputation:

Can't make CSS dropdown menu show up below its parent?

I have a menu like this

<nav id="nav">
 <ul>
  <li>Home</li>
  <li>Menu1
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
  <li>Menu2
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
 </ul>
</nav>

My CSS file is like this

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

The sub-menu items drop down and look just fine, it's just that they're dropping down under the first list item, Home.

How can I get them to drop down under the parent list item they're under?

Upvotes: 0

Views: 17094

Answers (4)

Sathish
Sathish

Reputation: 2460

Try this..

HTML Code:

<div id="navMenu">
        <ul>
            <li>Home</li>

            <li>Menu1
                <ul>
                    <li>Sub1</li>
                    <li>Sub2</li>
                </ul>
            </li>
            <li>Menu2
                <ul>
                    <li>Sub1</li>
                    <li>Sub2</li>
                </ul>
            </li>
        </ul>
    </div>

CSS:

#navMenu{
    margin:0;
    padding:0;
}
#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
}
#navMenu li{
    margin:0;
    padding:5px;
    list-style:none;
    float:left;
    position:relative;
}
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
} 
#navMenu ul li:hover ul{
    right: auto;
    left: 0;
    visibility:visible
}

I hope this is useful for you.,

Upvotes: 0

webketje
webketje

Reputation: 10976

Here is a fiddle with a working solution: http://jsbin.com/akazev/2/edit

Have a look at the new CSS:

nav ul li {
    display:  block;
    float: left;
}
nav ul ul {
    display: none;  
}
nav ul li:hover > ul {
    display: block;
    position: absolute;
    margin-left: -30px;
}
nav ul ul li {
    display: block; 
    float: none;
}

Instead of displaying your first-level links as inline, display them either as inline-block or float. That was what bugged the nav. If you use float (like I did), don't forget to set the deeper level links to float: none. You will also have to set a margin-left for the absolutely positioned ul's.

PS: Isn't <nav id="nav"> a bit pointless?

Upvotes: 5

Jason VanHil
Jason VanHil

Reputation: 112

Here you are mate just update your code to 

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

http://jsfiddle.net/dPgQN/ <--- this is a live preview

Upvotes: 0

Nayana Adassuriya
Nayana Adassuriya

Reputation: 24766

Try this

<html>
<head>
<style type="text/css">
#nav ul li {
    float:left;
}
#nav ul ul {
    display: none;  
}
#nav ul li:hover ul {
    display: block;
    position:absolute;
}
#nav ul ul li {
    display: block;
    border:1px #ccc solid;
    padding:2px;
    float:none;
}
</style> 
</head>
<body>
<dev id="nav">
 <ul>
  <li>Home</li>
  <li>Menu1
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
  <li>Menu2
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
 </ul>
</dev>
</body>
</html>

Upvotes: 0

Related Questions