CSS - 下拉菜单

我是新来的CSS和测试一些东西。我创建了一个下拉菜单，但这不能正常工作。这里是我的代码：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

来源

2014-09-21 happyxx89

使用

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

比例仅为inline。如果仅仅是inlineabsolute定位在下面会导致多个下拉菜单根据#nav div显示在同一位置。

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

这仍然看起来不太好，但它的功能。在tutsplus检查一些很好的教程。

与此同时，我相信你可以用jQuery更高效地解决这个问题。

来源

2014-09-21 00:30:01 rwxes

谢谢你的链接！ – happyxx89 2014-09-21 09:04:25

从你的CSS删除这些行：

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

来源

2014-09-21 00:15:09

CSS - 下拉菜单

回答

相关问题