CSS-下拉菜单

happyxx89

我是CSS的新手,正在测试一些东西。我创建了一个下拉菜单,但这不能正常工作。这是我的代码:

 <!DOCTYPE html>
<html>

<head>
    <link href = "üben_css.css" rel = "stylesheet" type="text/css">
    <title> xx</title>
</head>

<body>  


<div id="nav">
    <ul>
        <li> Home       </li>
        <li> xx
            <ul>
                <li> Hc </li>
                <li> Scc    </li>
            </ul>
        <li>Zubehör     </li>
        <li> Service    </li>
        <li> Forum </li>

    </ul>
</div>



</body>

</html>

CSS代码:

  body{
margin:0;
padding:0;
}

#nav{
background-color:silver;
position:relative;
}

#nav ul li{

display:inline;
}

#nav ul ul{
display:none;
}

#nav ul li:hover ul{
display:block;
}

#nav ul ul li{
display:block;
}

问题是导航栏以行内显示,但是当我将鼠标悬停在“ xx”元素上时,导航栏的其余部分会显示在下拉列表下方。我怎样才能解决这个问题?

http://www.fotos-hochladen.net/uploads/20140921004u0kxad3i2r.png

rwxes

使用

#nav ul li{
    display:inline-block;
}

相比之下inline如果仅仅inlineabsolute下面位置,则将导致多个下拉菜单根据#navdiv都出现在同一位置

#nav ul li:hover ul{
    position: absolute;
    display:block;
}

这看起来仍然不太好,但是可以正常工作。tutsplus出一些不错的教程。

同时,我相信您可以使用jQuery更有效地解决此问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章