您好我正在尝试在页面上设置一个简单的侧边栏菜单。
我的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>
菜单在第一次悬停之前工作正常,但是当我尝试将鼠标移动到第二级列表时它消失了。我做错了什么,我该如何解决?
谢谢