I am attempting to develop a vertical menu with flyouts, which includes sub-menus. Can you point out any issues in the code provided below?
<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>