HTML & CSS - Can't seem to figure out why drop-down menu isn't working.

Question

I cannot seem to get the most simple, basic drop down menu to work. I'm learning as I go through trial and error. I apologize if it's something obvious!

Here's the HTML:

<body>

<div class="drop">
<ul class="drop_menu">
<ul>
    <li><a href="main.html">Home</a></li>
    <li><a href="about.html">About</a></li>
        <ul>
            <li><a href="biography.html">Biography</a></li>
            <li><a href="statement.html">Statement</a></li>
            <li><a href="CV">CV</a></li> 
        </ul>

        <li><a href="gallery.html">New Work</a></li>
        <li><a href="archive.html">Archive</a></li>
        <li><a href="collaboration.html">collaboration</a></li>
        <li><a href="news.html">News</a></li>
</ul>
</ul>
</div>
</body>

CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    display: inline-block;
    width: 10em;
    height: 2em;
    line-height: 2em;
    position: relative;
    border-bottom: 2px solid #ccc;
}

ul li:hover {
    background-color: #ffa;
}

ul li ul {
    display: none;
    position: absolute;
    top: 2em;
    left: 0;
}

ul li:hover ul {
    display: block;
}

For demostration: http://jsfiddle.net/7env3ust/

What am I doing wrong?

score 2 · Answer 1 · answered Oct 14 '15 at 22:44

Your child ul must be inside li

<li><a href="about.html">About</a>
    <ul>
        <li><a href="biography.html">Biography</a>

        </li>
        <li><a href="statement.html">Statement</a>

        </li>
        <li><a href="CV">CV</a>

        </li>
    </ul>
</li>

DEMO

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    display: inline-block;
    width: 10em;
    height: 2em;
    line-height: 2em;
    position: relative;
    border-bottom: 2px solid #ccc;
}

ul li:hover {
    background-color: #ffa;
}

ul li ul {
    display: none;
    position: absolute;
    top: 2em;
    left: 0;
}

ul li:hover ul {
    display: block;
    background-color: red;
    z-index: 2;
}

<body>
    <div class="drop">
        <ul class="drop_menu">
                <li><a href="main.html">Home</a>

                </li>
                <li><a href="about.html">About</a>
                    <ul>
                        <li><a href="biography.html">Biography</a>

                        </li>
                        <li><a href="statement.html">Statement</a>

                        </li>
                        <li><a href="CV">CV</a>

                        </li>
                    </ul>
                </li>
                <li><a href="gallery.html">New Work</a>

                </li>
                <li><a href="archive.html">Archive</a>

                </li>
                <li><a href="collaboration.html">collaboration</a>

                </li>
                <li><a href="news.html">News</a>

                </li>
        </ul>
    </div>
</body>

score 1 · Accepted Answer · edited May 23 '17 at 10:27

1

For nested lists, your inner <ul> must be inside a <li>.

<ul>
    <li><a href="main.html">Home</a></li>
    <li><a href="about.html">About</a>
        <ul>
            <li><a href="biography.html">Biography</a></li>
            <li><a href="statement.html">Statement</a></li>
            <li><a href="CV">CV</a></li> 
        </ul>
    </li>
    <li><a href="gallery.html">New Work</a></li>
    <li><a href="archive.html">Archive</a></li>
    <li><a href="collaboration.html">collaboration</a></li>
    <li><a href="news.html">News</a></li>
</ul>

See this answer for more info.

edited May 23 '17 at 10:27

Community

1
1

answered Oct 14 '15 at 22:47

Dhaust

5,470
9
54
80

This clicked with me the most.Thank you so much! – Dr_Strangebone Oct 14 '15 at 22:58

score 0 · Answer 3 · answered Oct 14 '15 at 22:44

Your ul is actually outside your li so its always shown, take a look at the fixed example.

Here is how it's supposed to look:

   <li><a href="about.html">About</a>
     <ul>
       <li><a href="biography.html">Biography</a>

       </li>
       <li><a href="statement.html">Statement</a>

       </li>
       <li><a href="CV">CV</a>

       </li>
    </ul>
   </li>

HTML & CSS - Can't seem to figure out why drop-down menu isn't working.

3 Answers3