SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
Thread: Css Menu
-
Oct 1, 2004, 21:41 #1
Css Menu
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.
-
Oct 1, 2004, 22:44 #2
- Join Date
- Jul 2004
- Location
- Melbourne, VIC, Australia
- Posts
- 221
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
i have no idea what you are trying to say.
Is your objective to have a horizontal drop down menu ?
-
Oct 2, 2004, 00:34 #3
- Join Date
- Feb 2004
- Location
- Scottsdale, Arizona
- Posts
- 909
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by loadx
-
Oct 2, 2004, 09:28 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
You should find some horizontal examples here:
http://www.htmldog.com/articles/suckerfish/dropdowns/
Paul
-
Oct 2, 2004, 10:22 #5
Originally Posted by Paul O'B
-
Oct 2, 2004, 12:10 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Thats what i want but it to look like the one in my first post
If you are desparate and can't do it yourslef then post again and I'll try and find time tomorrow
Paul
-
Oct 2, 2004, 12:25 #7
I know its simple but my real problem is when i add a width to ul they stack up
-
Oct 2, 2004, 12:28 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Oct 2, 2004, 15:22 #9
I got pissed off and deleted it
I can wait if you still wanna do it for me tommorow morning
-
Oct 3, 2004, 06:23 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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>
-
Oct 3, 2004, 21:37 #11
Thanks a zillion man
Bookmarks