CSS Horizontal Menu

[granwalla]

I'm trying to convert a nice CSS vertical menu to a horizontal menu. I have no idea what I need to do. I will post the HTML and CSS for you and if anyone can give me a clue, I'd be very appreciative.

Here's the menu itself: http://sarah.htc.net/menu/menu.htm
Following is all of the involved code from A List Apart's site . . .

THE HTML:

<ul id="nav"> 
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 

</ul>

THE CSS:

body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

LIL' JAVA SNIPPET:

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

 

[StephanieCordray]

For starters, look at line 9 of the css code... width: 150px; /* Width of Menu Items */

You have a defined width for the menu items of 150px. You also have an absolute positioning of 149px on the left. What that means is that each item in the menu will be placed on the left with an absolute postion of 149px and each menu item will be 150px wide. There is only way for the menu items to go within these definitions and that is down.

You might want to think about creating a css class called menu, create a <div> or use tables, whichever you prefer, and define your menu attributes within that <div> or table cell... to make it go horizontal rather than vertical.

From the javascript you posted I can't tell if there are parameters within the script that determine whether the menu can be horizontal or not. Some of them do, some of them don't.