6 replies [Last post]
nswan
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2003-07-14
Posts: 20
Points: 0

Does anyone know if a horizontal sublist can be done? Experimentally, I have created a horizontal menu (using an unordered list), and upon hovering on an element I want a horizontal submenu to appear. Currently, I can only get a vertical submenu. Does anyone know of a resource? I've googled my eyes out trying to find something. Of course, I've experimented with the display: inline attribute, but to no avail.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Horizontal CSS sublist

Hi nswan,
Have you tried floating the LI's left, that should put them inline.
Also try this tutorial http://css.maxdesign.com.au/floatutorial/tutorial0601.htm

Hope that helps

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 16 years 4 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Horizontal CSS sublist

Here's a real good example I've worked on,
but it does use Javascript:

http://www.communitymx.com/

http//www.positioniseverything.net/

nswan
Offline
Regular
Last seen: 16 years 19 weeks ago
Joined: 2003-07-14
Posts: 20
Points: 0

Horizontal CSS sublist

Thanks for the replies. It seems I am close, but it's just not quite right. My eyes are beginning to cross, and now it seems I can't make heads or tails of anything right now. Smile I think it's time to quit for the night. The main navigational list is not the problem, and having a vertical subnav is not the problem, it's just having a horizontal subnav.

Here is the code I am using. Please excuse the horrible CSS as it is probably a jumbled mess.

The CSS:

div.menu {
	padding: 25px;
}

.menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: left;
	width: 100%;
}

.menu ul li  {
	width:100px;
	margin: 0 -1px 0 0;
	padding: 0;
	border:1px solid #ffffff;
	color: white;
	text-decoration:none;
	text-align: center;
	font-family: verdana, arial, helvetica, sans-serif !important;
	font-size: 9px;
	background-color: #3b5e78;
	float:left;
}

.menu a {
	text-decoration: none;
	display: block;
	color: white;
	background-color: #3b5e78;
	padding: 5px 8px 5px 8px;
}

.menu a:hover {
	text-decoration: none;
	color: #3b5e78;
	background-color: #ffcc66;
}

.menu li ul {
	display: none;
	float: left;
	width: 100%;
}

.menu li:hover ul {
	visibility: visible;
	display: inline;
	float: left;
	position: relative;
	z-index: 1;
	width: 314px;
	padding: 0;
	margin: 0;
	border-top: 2px solid #ffcc66;
}

.menu li:hover li {

}

.menu li li {
	border: none;

	}

.menu li li a {
	padding: 3px 8px 3px 8px;
	background-color: #e4e5d7;
	color: #3b5e78;
	float: left;
	width: 100%;
}

.menu li li a:hover {
	text-decoration: none;
	color: white;
	background-color: #e4e5d7;
}

The markup:

<div class="menu">
<ul>

  <li><a href="#">EVENTS</a>
    <ul>
      <li><a href="#">programs on world affairs</a></li>
      <li><a href="#">international speaker series</a></li>
    </ul>
  </li>

  <li><a href="#">VISITORS</a>
    <ul>
      <li><a href="#">international visitor program</a></li>
      <li><a href="#">community connections</a></li>
    </ul>
  </li>

  <li><a href="#">MORE</a>
    <ul>
      <li><a href="#">k-12 education</a></li>
      <li><a href="#">membership</a></li>
      <li><a href="#">council information</a></li>
    </ul>
  </li>

</ul>
</div>

See the test page at:

http://www.nicoleswan.com/experiment/index.shtml or
http://pyro.hostignition.com/~nswan/experiment/index.shtml

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Horizontal CSS sublist

Hi Nicole,
Unfortunately IE only supports hover on links so to get the sub list to display you will need to use some JavaScript.
http://www.csscreator.com/menu/multimenu.php

In Netscape and Opera a horizontal sub-list is displayed. Cool

blakems
blakems's picture
Offline
Enthusiast
UTah, USA
Last seen: 16 years 33 weeks ago
UTah, USA
Timezone: GMT-7
Joined: 2003-04-07
Posts: 60
Points: 0

Horizontal CSS sublist

have you tried the following

.menu li ul, .menu li ul li {
   display: inline !important;
} 

-bMs-
http//www.blakems.com !important;

atticweb
Offline
newbie
Helensburgh, Scotland
Last seen: 15 years 49 weeks ago
Helensburgh, Scotland
Joined: 2003-12-16
Posts: 1
Points: 0

re the list question