Menu
I am rather new to CSS and have never worked with anything like this before. I am having trouble trying to get a sub menu going on on the Locations and Menu tabs. I’ll be honest with you and state that I have no idea what I am doing from this point and don’t know where to start. If you can help me I’d much appreciate it.
With that said, I just want the nested list from the Locations and Menu tab to give a sub menu when rolled over. I don’t want to change the style of anything, I like it the way it is. Here’s what I got.
[code=html]
<!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=iso-8859-1″ />
<title>CSS Rollover Menus</title>
<style type=”text/css”>
#list-menu {
width: 132px;
}
#list-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, sanf-serif;
font-size: 12px;
}
#list-menu li {
margin: 2px 0 0;
}
#list-menu a {
display: block;
width:120px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #dcdcdc;
text-decoration: none;
}
#list-menu a:link, #list-menu a:active, #list-menu a:visited {
color: #000000;
}
#list-menu a:hover {
border: 1px solid #000000;
background: #333333;
color: #ffffff;
}
</style>
</head>
<body>
<div id=”list-menu”>
<ul>
<li><a href=”/” onfocus=”this.blur()” >Home</a></li>
<li><a href=”/locations/” onfocus=”this.blur()” >Locations</a>
<ul>
<li><a href=”/locations/losangeles.aspx” id=”subNav_losangelesLink” onfocus=”this.blur()”>Los Angeles</a></li>
<li><a href=”/locations/sanantonio.aspx” id=”subNav_sanantonioLink” onfocus=”this.blur()”>San Antonio</a></li>
<li><a href=”/locations/dallasfortworth.aspx” id=”sub_Nav_dallasfortworthLink” onfocus=”this.blur()”>Dallas / Fort Worth</a></li>
</ul>
</li>
<li><a href=”/menu/” onfocus=”this.blur()” >Menu</a>
<ul>
<li><a href=”/menu/coldseafood.aspx” id=”subNav_coldSeafoodLink” onfocus=”this.blur()”>Cold Seafood</a></li>
<li><a href=”/menu/hotseafood.aspx” id=”subNav_hotSeafoodLink” onfocus=”this.blur()”>Hot Seafood</a></li>
<li><a href=”/menu/soups.aspx” id=”subNav_soupsLink” onfocus=”this.blur()”>Soups</a></li>
<li><a href=”/menu/mexicanfood.aspx” id=”subNav_mexicanFoodLink” onfocus=”this.blur()”>Mexican Food</a></li>
<li><a href=”/menu/familymeals.aspx” id=”subNav_familyMealsLink” onfocus=”this.blur()”>Family Meals</a></li>
<li><a href=”/menu/beverages.aspx” id=”subNav_beveragesLink” onfocus=”this.blur()”>Beverages</a></li>
</ul>
</li>
<li><a href=”/aboutus/” onfocus=”this.blur()”>About Us</a></li>
<li><a href=”/contact/” onfocus=”this.blur()”>Contact</a></li>
</ul>
</div>
</body>
</html>
Thank you for your time and help.
-Cesar