Question

您好我正在尝试在页面上设置简单的侧边栏菜单。

我的css看起来像这样

#nav {
 float:left;
 font-size: 9pt;
 width:2in;
 margin: 0px; 
 padding: 0px;
 color: white;
}

#nav :link{color:white ;text-decoration:none;}
#nav :visited{color:white ;text-decoration:none;}
#nav :hover{color:white  ;text-decoration:none;}
#nav :active{color:white ;text-decoration:none;}


#nav ul{
 background: #efefef; 
 background: linear-gradient(top, #555555 0%, #aaaaaa 100%);  
 background: -moz-linear-gradient(top, #555555 0%, #aaaaaa 100%); 
 background: -webkit-linear-gradient(top, #555555 0%,#aaaaaa 100%); 
 padding: 0 20px;
 border-radius: 10px;  
 list-style: none;
 position: relative;
 display: inline-table;
}

#nav ul ul{
 display: none;
 position: absolute;
 left: 100%;
 top: 0;
 text-align:left;
}

#nav ul li:hover{
 background: #00008b;
 color: #fff;
 display: block;
}

#nav ul li:hover > ul{
 width:85%;
 display:block;
}

和我的html一样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel='stylesheet' type="text/css" href='./main.css'> 
</head>

<body>

<div id='nav'>
<ul id='topmenu'>
    <li><a href="execsumm.html">Summary</a> </li>
    <li><a href="current.html">Parties</a>
        <ul>
            <li><a href="ukprocess.html">Balearics</a></li>
            <li><a href="usprocess.html">Americas</a></li>
            <li><a href="approcess.html">Asia</a></li>
        </ul>
    </li>
    <li><a href="proposed.html">New Proposal</a></li>
    <li><a href="views.html">Views</a>
        <ul>
            <li><a href="./Interviews/mes.html">Frames</a></li>
            <li><a href="./Interviews/bot.html">Robot</a></li>
        </ul>
    </li>
    <li><a href="">Existing</a></li>
    <li><a href="">Contacts</a></li>
    <li><a href="">dfjd</a></li>
</ul>
</div>


<div id='main'>
content here
</div>
</body>

</html>

菜单可以正常工作到第一个悬停，但是当我尝试将鼠标移动到第二级列表时它会消失。我做错了什么，如何解决？

感谢

Answer 1

问题是您在CSS中定位'li：hover'，但只要用户将鼠标移到右侧，您就会离开li，不再悬停。

一种可能的解决方案是给ul ul填充，并将填充物放在li上。

#nav ul{
 ...
 margin:0; padding:0;
 ...
}

#nav ul > li {
    margin:0; padding:0 20px;
}

这样，用户在点击子菜单之前就无法移出li。 JSFiddle

现在显示有所不同：突出显示的li现在占据了父级的所有宽度。那可以接受吗？

一些随机评论：如果你不通过给出内部元素inline-table等将事物变成真实的表格，则不应该使用table-cell。在这种情况下，inline-block的效果一样好。你的背景色为#EFEFEF，非常浅灰色，几乎是白色。因此，在不支持渐变的浏览器上菜单是不可读的。我怀疑你想要一些渐变范围内的东西，例如#7F7F7F。

CSS导航菜单不会持续在二级

1 个答案: