Why does the float menu behave differently for these items on a list?

http://jsfiddle.net/z9wAg/

For the music links hovering and aligning works, but not for the pictures! Why? It's the same types, so as I see it, it should work the same way. As you can probably see, though, it doesn't. I've tried to compare them, and they are pretty much the same in the code.

HTML:

   <link href="stylesheet.css" rel="stylesheet" type="text/css">
    <title>Home</title>
</head>
<body>
    <div ID="menubox">
        <ul>
        <li><a href="http://folk.ntnu.no/arnstekl/" class="link">Home</a></li>
        <li><a href="#" class="link">Music</a>
            <ul>
                <li><a href="https://soundcloud.com/arnsteinkleven/" class="link" target="_blank">My music</a></li>
                <li><a href="http://folk.ntnu.no/arnstekl/gilberto.html" class="link" target="_blank">The Joao Gilberto project</a></li>
           </ul></li>
        <li><a href="https://www.github.com/arnstein" class="link" target="_blank">Github</a></li>
        <li><a href="#" class="link">Pictures</a>
            <ul>
                 <li><a href="http://www.flickr.com/photos/92472314@N03/" class="link" target="_blank">Flickr</a></li>
                 <li><a href="https://plus.google.com/photos/104927400856808784381/albums/" class="link" target="_blank">Google+ albums</a></li>
             </ul></li>

        <li><a href="https://twitter.com/ArnsteinKleven" class="link" target="_blank">Twitter</a></li>

        </ul>

    </div>
    <div ID="circle">
        <p ID="title"> &alpha; <br> &Gamma; <br> &Pi; <br> &zeta; <br> &tau; <br> &xi; <br> &iota; <br> &Pi; </p>
    </div>
    </body>

CSS:

#menubox
{
    width: 8%;
    height: 30%;
    border: 10% solid #C7D93D;
    border-radius: 5%;
    position: fixed;
    margin-top: 12%;
    margin-left: 18%;
    font-family: Ubuntu, Futura, Trebuchet MS;
    list-style: none;
    float: left;
}

#menubox ul li a
{
    text-align: left;
    font-size: 200%;
    color: #FFF0A5;
}

#menubox ul li
{
    color: #468966;
    font-family: Ubuntu, Futura, Trebuchet MS;
    float: left;
    margin-right: 10px;
    position: relative;
}

#menubox ul
{
    color: #468966;
    font-family: Ubuntu, Futura, Trebuchet MS;
}

#menubox ul ul
{
    position: absolute;
    left: -9999px;
    list-style: none;
}

#menubox ul ul li
{
    float: left;
    margin-left: 40%;
    position: relative;
    font-size: 60%;
    text-align: left;

}

#menubox ul ul a
{
    white-space: nowrap;
}

#menubox ul li:hover a
{
    text-decoration: none;
    color: #FFB03B;
} 

#menubox ul li:hover ul
{
    left: 0;
    top: 0;
    z-index: 100;
    color: #FFB03B;
}

#menubox ul li:hover ul a
{
    text-decoration: none;
    color: #FFF0A5;
}

#menubox ul li:hover ul li a:hover
{
    color: #FFB03B;
}

div p
{
    color: #FFF0A5;
    text-align: center;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    margin-top: 300px;
    line-height: 60px;
}

#circle
{
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    background-color: #B64926;
    width: 500px;
    height: 500px;
    display: block;
    position: fixed;
    margin-top: 9%;
    margin-left: 52%;
    text-align: center;
}

#title
{
    text-color: #FFF0A5;
    font-size: 350%;
    display: inline;
    text-align: center;
}

body
{
    height: 100%;
    width: 100%;
    background-color: #468966;
    font-family: Ubuntu, Futura, Trebuchet MS;
}

.link
{
    text-color: #FFF0A5;
    text-decoration: none;
    text-align: left;
}

By making the menu LIs the same width, it seems to have eliminated this issue for me.

#menubox ul li
{
    color: #468966;
    font-family: Ubuntu, Futura, Trebuchet MS;
    float: left;
    margin-right: 10px;
    position: relative;
    width:190px;
}

http://jsfiddle.net/z9wAg/2/

Related Articles