css Horizontal menu full code (incl) need help with submenus

grantp22 · January 25, 2010

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:

<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>

Here is the CSS code for the menu - menu_style.css:

.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;
}

Tazerenix · January 25, 2010

<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>
  <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
  </ul>
</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>

.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;
}

.metalic.horizontal ul li ul {
display:none;
position:absolute;
margin-top:27px;
}

.metalic.horizontal ul li ul li a {
display:block;
background:url('your image');
height:27px;
width:auto;
line-height:27px;
text-align:center;
}

.metalic.horizontal ul li:hover ul {
display:block;
}


/* 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;
}

That SHOULD work (with a bit of editing to padding and such), but i havent tested it. Please post back if it didnt

grantp22 · January 27, 2010

Tazerenix: I gave it a try, and it doesn't work, no drop down menu's appear on mouseover. The menu behaves exactly the same way as the original code posted. Any ideas?

Thanks for the help

Grant

Sign In

css Horizontal menu full code (incl) need help with submenus

Recommended Posts

grantp22

Link to comment

Share on other sites

Tazerenix

Link to comment

Share on other sites

grantp22

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information