Vertical Menu with submenus flying out when mouse is hovered
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>
http://jsfiddle.net/9bHkj/1/
You might have to revisit how you are constructing the menu. For instance:
<li>
<a href="#">Blog</a>
</li>
<ul>
<li>
<a href="#">Blog 1</a>
</li>
<li>
<a href="#">Blog 2</a>
</li>
</ul>
is supposed to be a Blog menu with two sub menus Blog 1 and Blog 2. But then <ul> for the sub menu is supposed to be within the <li> of the menu and not separately:
<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 -->
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.
you wrote this twice:
#navmenu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}
Your nested lists ul are not contained by li elements. So this will not work either:
#navmenu ul li:hover ul {
display:block;
}
nesting your ul in li elements may solve your problem.
加载中,请稍侯......
精彩评论