0

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

我的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>

菜单在第一次悬停之前工作正常,但是当我尝试将鼠标移动到第二级列表时它消失了。我做错了什么,我该如何解决?

谢谢

4

1 回答 1

1

问题是您在 CSS 中定位“li:hover”,但是一旦用户将鼠标向右移动,您就离开了li,不再悬停。

一种可能的解决方案是给 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.

于 2013-08-04T06:48:18.407 回答