CODEWITHSUNDEEP
htmlcssdrop-down-menu
Dr_Strangebone
Dr_Strangebone

Reputation: 3

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

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?

Upvotes: 0

Views: 57

Answers (3)

Dhaust
Dhaust

Reputation: 5550

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.

Upvotes: 1

slashsharp
slashsharp

Reputation: 2833

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>

Upvotes: 2

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

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>

Upvotes: 0

Related Questions