Css Menu

**MadSpikey** · Oct 1, 2004, 20:41

Hey i found a sweet menu in css http://www.alistapart.com/d/horizdro...orizontal2.htm

But i would like the initial hober overs from left to right not up and down.

Could someone help, Thanks.

**loadx** · Oct 1, 2004, 21:44

i have no idea what you are trying to say.

Is your objective to have a horizontal drop down menu ?

**maxor** · Oct 1, 2004, 23:34

Originally Posted by loadx

i have no idea what you are trying to say.

Is your objective to have a horizontal drop down menu ?

Yea I think you got it.

**Paul O'B** · Oct 2, 2004, 08:28

You should find some horizontal examples here:

http://www.htmldog.com/articles/suckerfish/dropdowns/

Paul

**MadSpikey** · Oct 2, 2004, 09:22

Originally Posted by Paul O'B

You should find some horizontal examples here:

http://www.htmldog.com/articles/suckerfish/dropdowns/

Paul

Thats what i want but it to look like the one in my first post

**Paul O'B** · Oct 2, 2004, 11:10

Thats what i want but it to look like the one in my first post

Sorry, but I didn't have time to style it for you. It should just be a simple matter of applying the presentational styles from the other layout without changing the structure of the new one.

If you are desparate and can't do it yourslef then post again and I'll try and find time tomorrow

Paul

**MadSpikey** · Oct 2, 2004, 11:25

I know its simple but my real problem is when i add a width to ul they stack up

**Paul O'B** · Oct 2, 2004, 11:28

Well post what you've got so far and I'll take a look in the morning as I've finished for the day now

**MadSpikey** · Oct 2, 2004, 14:22

I got pissed off and deleted it

I can wait if you still wanna do it for me tommorow morning

**Paul O'B** · Oct 3, 2004, 05:23

Hi,

Here you are (but needs testing).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// 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;
</script>
<style type="text/css">
body {
 font: normal 11px verdana;
 }
ul {
 margin: 0;
 padding: 0;
 list-style: none;
 }
ul li {
 position: relative;
 float: left;
 width:149px;
}
 
li ul {
 position: absolute;
 left: 0; /* Set 1px less than menu width */
 top: auto;
 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;
 }
/* commented backslash mac hiding hack \*/ 
* html ul li a {height:1%}
/* end hack */ 
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 */
</style>
</head>
<body> 
<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> 
</body>
</html>

Paul

**MadSpikey** · Oct 3, 2004, 20:37

Thanks a zillion man

User Tag List

Thread: Css Menu

Thread Tools

Display

Css Menu

Bookmarks

Bookmarks

Posting Permissions