CSS Horizontal Menu full code (incl) Need help with submenus
Posted: Mon Jan 25, 2010 3:26 pm
The code that follows produces the following menu:

The menu works great but I cannot figure out how to add dropdown/submenus as shown in the next graphic where I have added in submenus using a graphics editor:

Could somebody please help me to modify the css and html to allow submenus as shown in he second graphic! Any help will be much appreciated and I am sure others will find this menu useful
Thanks in advance
Here is the HTML I'm using:
Here is the CSS code for the menu - menu_style.css:

The menu works great but I cannot figure out how to add dropdown/submenus as shown in the next graphic where I have added in submenus using a graphics editor:

Could somebody please help me to modify the css and html to allow submenus as shown in he second graphic! Any help will be much appreciated and I am sure others will find this menu useful
Thanks in advance
Here is the HTML I'm using:
Code: Select all
<html>
<head>
<link href="template/css/menu_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu metallic horizontal grey">
<ul>
<li><span><a><span></a></span></span></li>
<li><span class="menu_a"><a href="index.php" target="_self"><span class="menu_a"><font color="#C5C5C5">HOME</font></span></a></span></li>
<li><span class="menu_a"><a href="userinfo.php?user=Grant"><span class="menu_a">MY ACCOUNT</span></a></span></li>
<li><span class="menu_a"><a href="useredit.php"><span class="menu_a">EDIT ACCOUNT</span></a></span></li>
<li><span class="menu_a"><a href="admin.php"><span class="menu_a">ADMIN</span></a></span></li>
<li><span class="menu_a"><a href="process.php"><span class="menu_a">LOGOUT</span></a></span></li>
<li><span class="menu_a"><a href="register.php"><span class="menu_a">REGISTER</span></a></span><br/ ></li>
</ul>
</div>
</body>
</html>Code: Select all
.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}
/* METALLIC HORIZONTAL MENU */
.metallic.horizontal {
width: 100%;
height: 27px;
margin: 0;
padding: 0;
background: transparent url(images/menubar.gif) top left repeat-x;
}
.metallic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}
.metallic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
}
.metallic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 12px;
float: left;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #FFFFFF;
background: transparent url() top right no-repeat;
text-decoration: none;
outline:none;
}
.metallic.horizontal ul li a span.menu_a {
display: block;
float: left;
height: 22px;
padding-top: 7px;
padding-right: 12px;
background: transparent url() top right no-repeat;
cursor: pointer;
}
/* END METALLIC HORIZONTAL MENU */
/* GREY HOVER */
.metallic.grey ul li a:hover,
.metallic.grey ul li.highlight a {
background: transparent url(images/menubarover.gif) top left no-repeat;
color: #58B0D4;
}
.metallic.grey ul li a:hover span.menu_a,
.metallic.grey ul li.highlight a span.menu_a {
background: transparent url(images/menubarover.gif) top right no-repeat;
color: #FB6900;
font-family: Verdana, Arial, Helvetica, sans-serif;
}