0
我正在嘗試製作一個水平菜單,有幾個水平子菜單。但代碼不起作用:https://jsfiddle.net/5v9Ljrwy/製作多個水平子菜單
我認爲#help ul li:hover > li:first-child {position: absolute;display:inline;width: 80%;left:0;}
會使下一個子菜單可見。任何建議如何做到這一點?
<html>
<head>
<style>
#help{
overflow:hidden;
text-align:center;
width:80%;
background-color:#0066ff;
}
#help li{
list-style-type:none;
float:left;
padding:5px;
margin:0px;
}
#help li ul {display: none;background-color:#abcdef;}
//#help li:hover ul, #help li.hover ul {position: absolute;display: inline;width: 80%;left:0;}
#help ul li:hover > li:first-child {position: absolute;display:inline;width: 80%;left:0;}
</style>
</head>
<body>
<p id="ShowHelp">I like</p>
<nav id="help">
<ul>
<li>animals
<ul>
<li>Mammals
<ul>
<li>Elephant</li>
<li>Elephant</li>
<li>Elephant</li>
</ul>
</li>
<li>Fish</li>
</ul>
</li>
<li>cars
<ul>
<li>Ferrari</li>
</ul>
</li>
<li>games</li>
<li>other</li>
</ul>
</nav>
</body>
</html>
爲什麼使用是件好事?胡佛效應不需要嗎? –
它不是,除非有鏈接。如果你喜歡,你可以放在那裏,但是你必須更新CSS。但是無論如何都不能鏈接到任何地方。 –