Can't Find Issue with CSS Drop Down Menu

Question

I've looked at all of the questions already posed on this subject, but can't find anything wrong with my coding. I need another person's eye to find what's wrong. There must be something I am just not seeing, as I've successfully made drop down menus before...

Here is my html5 coding for my menu:

<nav id="menu">
<ul>
    <li><a href="index.html" class="currentnew">Home</a></li>
    <li><a href="biography.html">Biography</a></li>
    <li><a href="artwork.html">Artwork</a></li>
        <ul>
            <li><a href="paintings.html">Paintings</a></li>
            <li><a href="drawings.html">Drawings</a></li>
            <li><a href="sculpture.html">Sculpture</a></li>
            <li><a href="viewall.html">View All</a></li>
        </ul>
    <li><a href="exhibitions.html">Exhibitions</a></li>
    <li><a href="commissions.html">Commissions</a></li>
</ul>
</nav>

And here is my CSS styling that is attempting to make a drop down menu:

/**** Main Menu ****/

#menu {
background-image: url(../images/paintbanner.png);
height: 55px;
width: 793px;
margin-left:125px;
margin-top: -25px;
}

#menu ul a {
color: #f7f5f1;
}

#menu ul a:hover {
color: #635ccb;
}

#menu ul {
margin-left: 75px;
}

#menu ul li {
float: left;
margin-right: 60px;
font-family: "Bell MT",
             serif;
font-size: 1.1em;
margin-top: 20px;
}

#menu ul ul {
display: none;
position: absolute;
}

#menu ul li:hover > ul {
display: block;
}

#menu ul ul li {
float: none;
margin-top: 0;
margin-right: 0;
position: relative;
background-image: url(../images/dropdown.png);
height: 100%;
width: 120px;
}

#menu ul ul a {
color: #1e1b1b;
font-size: .9em;
}

I knew it would be something stupid like that, thank you so much! :) — user3175214
– user3175214, Commented Jan 8, 2014 at 22:09

scrappedcola · Accepted Answer · 2014-01-08 22:07:08Z

1

You closed a <li> before I think you meant to. Look here:

<li><a href="artwork.html">Artwork</a></li>
        <ul>
            <li><a href="paintings.html">Paintings</a></li>
            <li><a href="drawings.html">Drawings</a></li>
            <li><a href="sculpture.html">Sculpture</a></li>
            <li><a href="viewall.html">View All</a></li>
        </ul>

Should probably be:

<li>
        <a href="artwork.html">Artwork</a>
        <ul>
            <li><a href="paintings.html">Paintings</a></li>
            <li><a href="drawings.html">Drawings</a></li>
            <li><a href="sculpture.html">Sculpture</a></li>
            <li><a href="viewall.html">View All</a></li>
        </ul>
</li>

answered Jan 8, 2014 at 22:07

scrappedcola

10.6k1 gold badge36 silver badges48 bronze badges

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

Comments

Zach Saucier · Accepted Answer · 2014-01-08 22:10:04Z

0

This happens because the li:hover should enable <ul> with display:block's out of <li>

Try this:

<nav id="menu">
<ul>
   <li><a href="index.html" class="currentnew">Home</a></li>
   <li><a href="biography.html">Biography</a></li>
   <li><a href="artwork.html">Artwork</a>
       <ul>
           <li><a href="paintings.html">Paintings</a></li>
           <li><a href="drawings.html">Drawings</a></li>
           <li><a href="sculpture.html">Sculpture</a></li>
           <li><a href="viewall.html">View All</a></li>
       </ul>
   </li>
   <li><a href="exhibitions.html">Exhibitions</a></li>
   <li><a href="commissions.html">Commissions</a></li>
</ul>
</nav>

example: http://jsfiddle.net/9zfsr/

edited Jan 8, 2014 at 22:10

Zach Saucier

26.2k12 gold badges101 silver badges161 bronze badges

answered Jan 8, 2014 at 22:08

Deharlan

322 silver badges11 bronze badges

Collectives™ on Stack Overflow

Can't Find Issue with CSS Drop Down 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