我正在尝试创建一个带有弹出菜单的垂直菜单。这是一个带有子菜单的垂直菜单。以下代码有什么问题？
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#navmenu ul ul li a {
border:1px solid #888888; border-bottom: none; font-size:12pt; line-height: 1.6em; color:#303030; background-color:#a5a5a5; background-image:none;
}
#navmenu {
width: 150px; /* set width of menu */
}
#navmenu ul {
list-style-type:none; margin:0px; padding:0px;
}
#navmenu a {
text-decoration:none; border: 1px solid #303030; width:170px; display:block; text-align:center; font-size:14pt; line-height:2em; background:url(Button_top.gif) repeat-x left; font-family:Arial, Helvetica, sans-serif; color:white;
}
#navmenu a:hover {
color: #a00;
/* red text color on hover */
background: #fff;
/* white bgcolor on hover */
}
#navmenu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}
#navmenu ul ul {
position: absolute; top: 0; left: 100%;
/* to position them to the right of their containing block */
width: 100%;
/* width is based on the containing block */
}
#navmenu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}
#navmenu ul ul {
display: none;
}
#navmenu ul li:hover ul {
display:block;
}
</style>
</head>
<body>
<div id="navmenu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<ul>
<li>
<a href="#">Blog 1</a>
</li>
<li>
<a href="#">Blog 2</a>
</li>
</ul>
<li>
<a href="#">Websites</a>
</li>
<ul>
<li>
<a href="#">Websites 1</a>
</li>
<li>
<a href="#">Websites 2</a>
</li>
</ul>
<li>
<a href="#">Photos</a>
</li>
</ul>
</div>
</body>
</html>
最佳答案
您可能需要重新审视您构建菜单的方式。例如:
<li>
<a href="#">Blog</a>
</li>
<ul>
<li>
<a href="#">Blog 1</a>
</li>
<li>
<a href="#">Blog 2</a>
</li>
</ul>
应该是 Blog带有两个子菜单的菜单 Blog 1和 Blog 2 .但是然后 <ul>因为子菜单应该在 <li> 中 菜单的而不是单独的:
<li>
<a href="#">Blog</a>
<!-- The <li> does not end here -->
<ul>
<li>
<a href="#">Blog 1</a>
</li>
<li>
<a href="#">Blog 2</a>
</li>
</ul>
</li> <!-- end tag for the blog <li>, now enclosing the submenu also -->
执行此操作后，对于其他子菜单，您也将获得飞行子菜单。您现在可以算出位置、颜色等。
关于html - 垂直菜单，鼠标悬停时子菜单会飞出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6894048/