CODEWITHSUNDEEP
csshtmldrop-down-menu
user3175214
user3175214

Reputation: 11

Can't Find Issue with CSS Drop Down Menu

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;
}

Upvotes: 1

Views: 57

Answers (2)

Deharlan
Deharlan

Reputation: 32

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/

Upvotes: 0

scrappedcola
scrappedcola

Reputation: 10572

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>

Upvotes: 1

Related Questions