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
Without getting into the details of alignment & layout(because I hate implementing stuff like this - it's cool, but a real pain to get just right), how it generally works is the sub menu is a <ul> inside the <li>that surrounds the "MY ACCOUNT" link. By default the <ul> is set to "display:none;". Then, when the <li> is hovered over, the <ul> is set to "display:block". Modern browsers can handle this just with these 2 CSS rules:
Hi, I have taken pickles advise and help from others, but I still can't get this to work, on mouse over the dropdown menu does not appear and behaves the same as the original code I posted. this is what I have changed the code to:
.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;
}
this is possibly the best resource for css navigation and many other things css.
to top that off, a lot of the examples provided on the website will work in ie6 and up without any additional js.