-
CSS horizontal menu
Thanks for your help in advance!
I am trying to figure out how to create 3 tier drop down menu. I have this basic horizontal menu. See html and css code below.
Any help is appreciated!
Here is my html code:
Here is my CSS code:
#menu_container{
text-align:center;
margin:0px;
width:882px;
height:39px;
background-image: url(../nav_bg.jpg);
}#nav_menu{ /* div that contains the nav menu */
width:882px;
height:39px;
margin:0px auto;
padding:0px;
}#nav_menu ul{ /* unoredereslist gets rid of bulets centers text */
list-style-type:none;
margin:0px;
text-align:center;
padding-top: 4px;
padding-left: 0px;
}#nav_menu ul li { /* unordered list items within ul nav menu */
width:86px;
float:left;
margin: 0px;
height: 34px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #999;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}#nav_menu ul li a { /* manipulate anchor tags in list items */
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
display:block;
width:87px;
height:34px;
font-size: 13px;
color: #FFF;
}#nav_menu a:hover {
color:#FF0;
font-family:Arial, Helvetica, sans-serif;
} -
5 Replies
-
hello…
so do you also have the javascript to trigger the menus? not quite following what your specific issues are?
sitruc
-
I’m tryin to create a horizontal menu with 2 sublevels.
I’d rather not use javascript. I want to keep it all css driven.
I just need to know how I can recode my css to create the teir 1 and tier 2 sub menus w/out javascript. If there is a way which I know there is…
Thanks!
Hoss
-
hello…
still not quite clear on your goal – if you want a menu that appears and disappears when you mouse over another element such as this:
https://www.lwis.net/free-css-drop-down-menu/dropdown.simple.horizontal.html
then you have to use javascript to trigger the menu appearing and disappearing. if you just want a menu that has all of it showing at one time and doesn’t get triggered by mousing over something else, then you can use all css for that…
sitruc
-
Thanks for the link!
The menu works great exactly what I needed but it doesn’t work on IE.
Any other suggestions!
Hoss
-
hello…
wasn’t endorsing that one per se – it was just a sample to clarify what you wanted to do…
here’s a plethora of ’em that might suit your needs:
https://www.google.com/search?q=horizontal+menu+javascript
sitruc
Reply to this Discussion! Login or Sign Up