0

http://jsfiddle.net/z9wAg/

对于音乐链接悬停和对齐作品，但不适用于图片！为什么？它是相同的类型，所以在我看来，它应该以相同的方式工作。但是，您可能会看到，事实并非如此。我试图比较它们，它们在代码中几乎相同。

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

2 回答 2

0

通过使菜单 LI 具有相同的宽度，对我来说似乎已经消除了这个问题。

#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/

于 2013-08-15T19:37:38.800 回答
0

据我所见，margin-left问题在于#menubox ul ul li. 您可以指定一个具体的距离（例如 80 像素），而不是 40%。

小提琴

于 2013-08-15T19:38:45.693 回答