CSS menu help

I have created a css menu bar. How can i get it to display horizontaly in my header?

code for menu bar

code for css

any advice welcome

 

Take away the <li> </li> tags and it will go horizontal.

 

Check this css menu, it may help you.

 

Get rid of the list's width and float the list items to the left, thus:

ul {
margin: 0;
padding: 0;
list-style: none;
}

ul li {
float: left;
}

Code (markup):

 

It's a menu, menus are a list. Making it a flat row of anchors is NOT semantic markup - so bad advice there.

Assuming there is no dropdown, and you aren't applying any extra's, you're basically attempting to style the wrong elements, and have scripting for no good reason.

First, let's get rid of the DIV, it probably isn't needed as you can likely apply whatever it is you are doing directly to the elements.

<ul id="mainMenu"> 
	<li><a href="#">Home</a></li> 
	<li><a href="services.html">Services</a>
	<li><a href="Contactus.html">Contact Us</a></li>
	<li><a href="aboutus.html">About Us</a></li>
	<li><a href="faq.html">Faq</a></li> 
</ul>

Code (markup):

You're CSS is really confusing given your markup, I can't for the life of me figure out what you are doing if there are no dropdowns, which is what 90% of that CSS appears to be FOR. The width declaration of 150px is confusing... Basically your CSS seems to have nothing to do with your markup.

The big trick is do NOT try to do ANYTHING with the LI unless you have to. For this I'm assuming you are using a reset so margins and paddings on all involved elements are already zero.

Assuming you just want them all left justified:

#mainMenu {
	list-style:none;
}

#mainMenu li {
	display:inline; /* just get these the **** out of the way */
}

#mainMenu a {
	float:left;
	padding:5px;
	text-decoration:none;
	color:#039;
	background:#FFF;
	border:solid #CCC;
	border-width:1px 1px 0;
}

Code (markup):

If you are going to try and have a dropdown menu, or want to center them, have a look at my current codebase for handling that.

http://battletech.hopto.org/html_tutorials/cssMenu/template.html

The directory:
http://battletech.hopto.org/html_tutorials/cssMenu

is unlocked so you can grab the gooey bits.

 

Thanks for the reply's.

I have now added the following:

The menu bar is now horizontal but the drop down section is now displayed horizontally.

here's the edited css

 

Also, when I add the menu into my index the main page, it messes up the layout completely. This is starting to wind me up.

 

Wait, is that javascript IN your CSS? If so that's completely invalid...

I'll try to remember to hit this when I'm back at my workstation later - all that scripting needs to come out of the css, and really that technique wherever you got it from is horribly broken.

 

you try this,
www(dot)dynamicdrive(dot)com/style/csslibrary/category/C1/

 

still stuck with this, have attached the html page. Its just not displaying properly, i want it to display horizontally across the page with the sub menu displaying below. cheers

 

Also set the width of <li> tag, it should work well .

 

You would have gotten working CSS from deathshadow right from the getgo if you had happened to mention those dropdowns in your first post. You did not mention them at all and did not post the actual HTML you had.

As deathshadow said, remove the javascript from the CSS. Not only does Javascript smell like rotten fish, it has no business in dropdowns except as a crutch for IE6, and to enhance things like keyboarding support and delaying the dropdown-- which are extras, which is what JS is for. In a separate JS file please.

li ul {
position: absolute;
left: 10px;
top: 0;
display: none;
}

Code (markup):

That's pretty evil too-- hiding your submenus from screen readers. They take display: none literally most of the time. The better technique is pulling the subs off-screen and bringing them back on :hover and :focus (focus is doable but hard to wrap your head around).

First, your absolutely-positioned submenus don't know who they're supposed to line up with! You need to give someone above them position: relative. Usually I do this on the main li's.

Not tested, based on a menu I did recently:

ul {
  margin: 0;
  padding: 10px;
  list-style: none;
}
  ul li {
    float: left;
    padding: 10px;
    [b]position: relative;[/b]
  }
    ul li a {
      [b]display: block;[/b] (this will make your anchors 100% width of their containers, the li's)
      text-decoration: none;
      color: #039;
      background: #fff;
      padding: 10px;
      [b]remove this cruft, it makes NO sense:
border: 1px solid;
border-bottom: 1px solid;
width: 0px;[/b]
      What's the point of no width on your anchors???  Or a border without a colour?  Some browsers default to black, so it that what you wanted??  Then
      border: 1px solid #000; or border-bottom: 1px solid #000;
}

ul a:focus, ul a:hover {
  whatever changes you want to happen to the anchors themselves on hover/focus, like colour changes enz.
}

  ul ul {
    position: absolute;
    left: 0;
    width: whatever makes sense, but pls add a width... otherwise, width: auto;
    [b]margin-left: -9999px;[/b]
  }

(IE7 trigger)
ul li:hover {
  visibility: visible;
}


ul li:hover ul,  ul a:focus+ul {
 margin-left: 0; (brings the submenu onscreen)
}
    ul ul a:focus {
      width: pls set one here;
      margin-left: 9999px;
    }

(IE6 might need margin-left: auto depending on what you're using for scripts for IE6)

ul ul a:focus:hover {
   margin-left: 0; (gecko bug, bleh)
}
* html ul ul a:active:hover {
  margin-left: auto; (IE6's version of the bug, use whatever you used above for margin-left: auto or 0)
}

Code (markup):

K I don't care to use px for margins like that but it's the only way I can get it to work with focus.

If you choose to use the Sons of Suckerfish javascript then you'll be adding a class of sfhover to every place where the li:hover is.

If you choose to use Peterned's CSShover then IE6 definitely needs "auto" instead of 0, dunno why, I'm sure it's something to do with how his Javascript works.

Of course, since there will still be someone, somewhere, who can't get those dropdowns to drop down, I see you have the main services link to services.html... good. So long as that page then also has those links you have in the subs, people can get to them. Some people will even prefer to use them rather than going through the menu.