鼠标悬停时带有飞出子菜单的垂直菜单
我正在尝试创建一个带有弹出窗口的垂直菜单。这是一个带有子菜单的垂直菜单。以下代码有什么问题吗？
<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>
I am trying to create a vertical menu with fly outs .That is a vertical menu with sub-menus.What is wrong with the following code?
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可能需要重新审视构建菜单的方式。例如：
应该是一个
Blog菜单，有两个子菜单Blog 1和Blog 2。但是子菜单的应该位于菜单的内，而不是单独的：一旦您执行此操作，对于其他子菜单，您也将拥有飞行子菜单。您现在可以确定位置、颜色等。
You might have to revisit how you are constructing the menu. For instance:
is supposed to be a
Blogmenu with two sub menusBlog 1andBlog 2. But then<ul>for the sub menu is supposed to be within the<li>of the menu and not separately:Once you do this, for the other submenus as well, you have the flying sub menus. You can now work out the location, colors etc.
你写了两次：
你的嵌套列表
ul不包含在li元素中。因此，这也不起作用：将
ul嵌套在li元素中可能可以解决您的问题。you wrote this twice:
Your nested lists
ulare not contained bylielements. So this will not work either:nesting your
ulinlielements may solve your problem.