CODEWITHSUNDEEP
htmlcssdrop-down-menu
Karen
Karen

Reputation: 38

How do I make a dropdown submenu appear directly below its parent <li>?

I'm building a css dropdown menu and have been unable to get the submenus to appear below their respective parent li elements. I've tried a bunch of the solutions suggested in response to similar questions but have been unable to get them to work.

Here's a sample of the menu I'm building:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Menu Test</title>
<link rel="stylesheet" href="menustyle.css" type="text/css">
</head>
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
</html>

And here's the css:

#menudiv {
text-align:center;
}

ul.menu {
list-style-type:none;
}

li.menuitem {
position:relative;
display:inline-block;
}

ul.submenu {
display:none;
position:absolute;
}

.menuitem:hover+ul.submenu {
display:block;
}

I can move the submenus around by adding things like right:50px; to ul.submenu, but that moves all the submenus to the same location.

What am I missing here? Thanks!!

Here's a Fiddle.

Upvotes: 1

Views: 12092

Answers (5)

sachin arora
sachin arora

Reputation: 41

You can also Bootstrap Dropdown CSS in a normal case too.

Upvotes: 0

haltersweb
haltersweb

Reputation: 3139

Remember, when you are developing menus you need to make sure the link content is inside anchor tags, including the links at the top level navigation that launch the subnav. That way these links are natively focusable. You want to be able to reach these menu elements with a keyboard only since many with arthritis, Parkinson's disease, etc. may be unable to use a mouse (and you won't want to use tabindex to mimic this behaviour since screen-readers will look for anchor tags.)

There was a similar StackOverflow question yesterday: Absolutely positioned child's top edge pinned to the bottom edge of its parent that has unknown height?

Upvotes: 0

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5135

First of all, the following markup structure :

<li class="menuitem">Aluminum</li>
<ul class="submenu">
   <li class="subitem">Round</li>
   <li class="subitem">Sheet</li>
   <li class="subitem">Plate</li>
</ul>

is incorrect. It should be :

<li class="menuitem">Aluminum
   <ul class="submenu">
       <li class="subitem">Round</li>
       <li class="subitem">Sheet</li>
       <li class="subitem">Plate</li>
   </ul>
</li>

Secondly, you could use a CSS reset for ul,li elements. For the sake of simplicity I've used :

* {
    margin: 0;
    padding: 0;
}

Now, coming to your question. the following classes needs to be changed :

.menuitem:hover+ul.submenu {
   display:block;
}

to 

.menuitem:hover > ul.submenu {
   display:block;
}

and

ul.submenu {
    display:none;
    position:absolute;
    top:0px;
    right:50px;
}

to

ul.submenu {
    display:none;
    position:absolute;
}

You can then modify the following class (so that the child ul elements "fits-in" to the parent li):

li.menuitem {
    position:relative;
    display:inline-block;
}

to

li.menuitem {
    position:relative;
    display:inline-block;
    padding: 5px 10px;
    margin: 0 10px;
}

In summary, I guess this is what you are looking for :

* {
    margin: 0;
    padding: 0;
}
#menudiv {
    text-align:center;
}
ul.menu {
    display: inline-block;
    list-style-type:none;
}
li.menuitem {
    position:relative;
    display:inline-block;
    padding: 5px 10px;
    margin: 0 10px;
}
ul.submenu {
    display:none;
    position:absolute;
}
.menuitem:hover > ul.submenu {
    display:block;
}
<body>
    <div id="menudiv">
        <ul class="menu">
            <li class="menuitem">Aluminum
                <ul class="submenu">
                    <li class="subitem">Round</li>
                    <li class="subitem">Sheet</li>
                    <li class="subitem">Plate</li>
                </ul>
            </li>
            <li class="menuitem">Copper
                <ul class="submenu">
                    <li class="subitem">Round 2</li>
                    <li class="subitem">Sheet 2</li>
                </ul>
                <li class="menuitem">Steel</li>
        </ul>
    </div>
</body>

Hope this helps!!!

Upvotes: 4

hungerstar
hungerstar

Reputation: 21685

Your markup is incorrect for nesting a sub-list.

You're doing this:

<ul>
    <li>text</li><!-- incorrect, don't close li here -->
    <ul>
        <li>sub</li>
    </ul>
    </li><!-- correct, though li is already closed -->
    <li>text</li><!-- incorrect, don't close li here -->
    <ul>
        <li>sub</li>
    </ul>
    <!-- needs closing li here -->
    <li>text</li>
</ul>

Instead do this:

<ul>
    <li>text 
        <ul>
            <li>sub</li>
        </ul>
    </li>
</ul>

Then update your CSS selector from .menuitem:hover + ul.submenu to .menuitem:hover > ul.submenu as you're no longer selecting a sibling element (+) but a child element (>).

You'll need to fine tune the positioning of your sub-menus from here but this should get you where you need to be.

Upvotes: 0

mt_xing
mt_xing

Reputation: 653

Try placing the <ul class="submenu"> inside the <li class="menuitem">. Then set the <li> to position:relative; and set the <ul> to position:absolute;left:0;. This will position the <ul> relative to its parent element, the <li>.

Here's a codepen example: http://codepen.io/anon/pen/WQdMjX

Upvotes: 0

Related Questions