CSS Menu: Horizontal Submenu Items

**merrygoround** · 05-26-2009, 04:24 PM

Hi, I've been struggling for 2 hours now, trying to get my submenu to list Horizontally instead of vertically.

here is an example of what I'm trying to go for:
http://www.duoh.com/csstutorials/2levelmenu/index.html

How can I get my submenu items to display horizontally like that menu does?

thanks for reading!

**rdoyle720** · 05-26-2009, 05:35 PM

Well here's a quick and dirty version:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	UL {list-style: none; margin: 0; padding: 0}
	LI {position: relative;	display: block;	float: left; padding: 1px 5px; background: #666; color: #fff;}
	LI UL {position: absolute;	top: 1.5em; left: 0; width: 500px;}
	LI LI {background: #999}
</style>
</head>
<body>
<ul>
  <li>Item 1 |</li>
  <li>Item 2 |</li>
  <li>Item 3 |
    <ul>
      <li>Subitem 1 |</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 4 |</li>
  <li>Item 5</li>
</ul>
</body>
</html>

**merrygoround** · 05-26-2009, 07:04 PM

Okay, great! Got it. Thanks a ton!

**squidlips** · 06-05-2009, 11:58 PM

Having a similar sort of problem trying to apply this to my image rollover drop down navigation...

I changed rdoyle720's script so that it had my images sitting well in it...

Code:

<style type="text/css">
	UL {list-style: none; margin: 0; padding: 0}
	LI {position: relative;	display: block;	float: left; padding: 0px;}
	LI UL {position: absolute;	top: 1.5em; left: 0; width: 220px;}
</style>

however when I placed...

Code:

<ul>
  <li><a href="index.html"><img src="images/linkportfolio.jpg" alt="" oversrc="images/linkportfolioover.jpg"/></a>
    <ul>
      <li><a href="index.html"><img src="images/linkimage.jpg" oversrc="images/linkimageover.jpg" /></a></li><li><a href="index.html"><img src="images/linkillustration.jpg" oversrc="images/linkillustrationover.jpg" /></a></li><li><a href="index.html"><img src="images/linkweb.jpg" oversrc="images/linkwebover.jpg" /></a></li>
    </ul>
  </li>
</ul>

in place of where i used to just have...

Code:

<a href="index.html"><img src="images/linkportfolio.jpg" alt="" oversrc="images/linkportfolioover.jpg"/>

it is moving the whole list to a new line in my div.

This is what it looks like when placed in the div below my navigation.

QUESTIONS:
1. How do I make the 2nd tier images appear on rollover, rather than just being always visible?

2. How can I make the "linkportfolioover.jpg" image stay when the mouse is over the drop downs?

2. How can I make the drop downs 'float', appearing under the same relative position as the proper placed instace of "linkportfolio.jpg" rather than moving it all onto a new line?

Any help would be really truly appreciated.

**squidlips** · 06-07-2009, 06:21 AM

Below is what I'm using at the moment, I changed a suckerfish example a bit, and tried placing the drop down images in one list to try and get them to appear horizontally but they want to stay vertical, the one problem I think I'm having at the moment. The code is probably a bit ugly as well. :P

AUD$10 to whoever helps helps me out. It may also be worth noting that I want the dropdowns to not push around any other content, so absolutely positioned I guess?

Code:

<html>
<head>
<title>Portfolio</title>

<style type="text/css">

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 0;
}

#nav a {
display: block;
width: 10em;
}

#nav li { /* all list items */
float: left;
width: 77px; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
width: 220px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
clear: left;
color: #ccc;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

</head>

<body>

<ul id="nav">

<li><img src="CVIC/ADD/images/linkportfolio.jpg" alt="" width="77" height="24" />
<ul>
<li><img src="CVIC/ADD/images/linkimage.jpg" alt="" width="54" height="22" /><img src="CVIC/ADD/images/linkillustration.jpg" alt="" width="120" height="22" /><img src="CVIC/ADD/images/linkweb.jpg" alt="" width="46" height="22" /></li>

</ul>
</li>

</ul>

</body>

</html>

**squidlips** · 06-07-2009, 08:35 AM

http://www.2shared.com/file/6160494/dd82fb94/site.html

A nice fellow over at Whirlpool helped me get this far, but I can't figure out how to get it positioned properly. The $10 is already gone and I'm a broke uni student, but you will get my eternal gratitude and a photo of me doing a handstand!

**squidlips** · 06-09-2009, 07:32 AM

$10 back on the table! I'm dying here guys.

**squidlips** · 06-10-2009, 08:01 PM

After all that, I just put it in a table and it works perfect. I might write a tutorial up if anyone is interested, seems like quite a powerful/flexible navigation.

**ayatali** · 11-03-2015, 03:34 PM

Thread: CSS Menu: Horizontal Submenu Items

Thread Tools

Display

CSS Menu: Horizontal Submenu Items

Posting Permissions