CSS
/* Menu vertical starts here */
#menu{
width: 200em;
float:left;
background: ;
}
#menu ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#menu li{
position: relative;
display: inline;
/* for IE5 and IE6 */
}
#menu a{
color: #483000;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;
width: 160px;
background-color: #F0F0D8;
border-bottom: 1px solid #fff;
}
#menu a:link, #menu a:visited
{
color: #483000;
text-decoration: none;
}
#menu a:hover
{
background-color: #487890 ;
color: #fff;
}
#menu li a#current
{
border-bottom: 3px solid #C0C018;
background: #487890 ;
color: #fff;
}
#menu2 ul ul{
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul{
display: none;
}
div#menu ul ul li:hover ul{
display: block;
}
/* Menu 2 ends here */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AIO Microcommunication</title>
<link href="css/css-horizontal-menus.css" rel="stylesheet" type="text/css" />
<link href="css/css-vertical-menus.css" rel="stylesheet" type="text/css" />
<link href="css/page-layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page-container">
<div id="main-nav">
Main Nav
<div id="menu3">
<ul>
<li><a href="#">Featured Items</a></li>
<li><a href="#">Desktop</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">Hardwares</a></li>
<li><a href="#">New Arrivals</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div style="clear:both;"><br /><br /></div>
<div style="clear:both;"><br /><br /></div>
</div>
<div id="header">
<img border="0" src="images\pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
</div>
<div id="computer_hardware_selection">
<form action="">
<fieldset>
Shop for
<select name="Computer_Hardware">
<option value="Featured_Items" selected="selected">Featured Items</option>
<option value="Motherboard">Motherboard</option>
<option value="Memory">Memory</option>
<option value="Graphic_Card">Graphic Card</option>
<option value="Sound_Accessories">Sound Accessories</option>
</select>
Search <input type="text" size="30" />
<input type = "button" value = "Search now"/>
</form>
</fieldset>
</div>
<div id = "vertical_menu">
CATEGORIES <br><br>
<div id="menu">
<ul>
<li><a href="#">Feature Items</a></li>
<li><a href="#">Desktops</a></li>
<li><a href="#">Notebooks</a>
<ul>
<li><a href=# title = "">ACER</a></li>
<li><a href=# title = "">TOSHIBA</a></li>
<li><a href=# title = "">ASUS</a></li>
<li><a href=# title = "">DELL</a></li>
<li><a href=# title = "">SAMSUNG</a></li>
<li><a href=# title = "">LENOVO</a></li>
</ul>
</li>
<li><a href="#">Hardware</a></li>
<li><a href="#">New Arrival</a></li>
</ul>
<div style="clear:both;"><br /><br /></div>
<div style="clear:both;"><br /><br /></div>
</div>
</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
vertical pop-up menu not functioning
