FORUMS: list search recent posts

CSS horizontal menu

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Hoss Sarbaz
CSS horizontal menu
on Apr 14, 2010 at 2:57:31 am

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






Return to posts index

Curtis Thompson
Re: CSS horizontal menu
on Apr 14, 2010 at 3:33:39 am

hello...

so do you also have the javascript to trigger the menus? not quite following what your specific issues are?

sitruc



Return to posts index

Hoss Sarbaz
Re: CSS horizontal menu
on Apr 14, 2010 at 5:20:23 pm

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


Return to posts index


Curtis Thompson
Re: CSS horizontal menu
on Apr 14, 2010 at 5:23:44 pm

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:

http://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


Return to posts index

Hoss Sarbaz
Re: CSS horizontal menu
on Apr 16, 2010 at 12:11:28 am

Thanks for the link!

The menu works great exactly what I needed but it doesn't work on IE.


Any other suggestions!

Hoss


Return to posts index

Curtis Thompson
Re: CSS horizontal menu
on Apr 16, 2010 at 12:44:38 am

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:

http://www.google.com/search?q=horizontal+menu+javascript

sitruc


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]