CSS - Drop-down Menus Not Lined Up Right

Hi all,

Anyone know of any problems with CSS drop down menus a la suckerfish (www.alistapart.com) and Konqueror?

Here's my CSS for this http://www.nzwebz.com/wikindx2 :

Code:

body {
	background	:	url("paper.jpg");
	font-family	:	sans-serif;
}
ul {
	padding		:	0;
	margin		:	0;
	list-style	:	none;
}
li {
	float		:	left;
	position	:	relative;
}
li ul {
	display		:	none;
	position	:	absolute; 
	top		:	1.1em;
	left		:	0;
	border		:	4px #CCCC99 groove;
	background	:	#ffcc99;
	width		:	7em;
}
li > ul {
	top		:	auto;
	left		:	auto;
	}
li:hover ul, li.over ul{
	display		:	block;
	}

A:visited, A:link, A:active {
	text-decoration	:	none;
	color		:	#666666;
	background	:	transparent;
	display		:	block;
	width		:	7em;
}
A:hover {
	text-decoration	:	none;
	background	:	#ff9900;
	color		:	white;
	display 	:	block;
	width		:	7em;
}
.clear {
	clear		:	both;
}
.titleTable {
	width		:	90%;
}
.menuTable {
	margin		:	0 0 0 5%;
}
.menuli {
	color		:	#ff9900;
}
.mainTable {
	border		:	#ff9900 3px groove;
	width		:	90%;
}
h1, h2, h3, h4	{
	color		:	#ff9900;
}

With the javascript (which needs work I know), it works with IE (with javascript fix), Netscape, Firefox and Mozilla but the drop downs won't work with Konqueror. Javascript is turned on in Konqueror in case it's anything to do with that.

I notice that even the suckerfish pretty example doesn't work in Konqueror (v3.1-12)

Thanks.

Hi guys,

I recently learned about pure css drop down menus.

Now if you look at my site in FF, and IE, you see in IE, it just doesn't display correctly.

Why is this? Tips on fixing this?

www.projectfinalfantasy.com

Regards,
Joseph Man.

Hi all,

I'm adding drop down menus to my company's site and have it working as I'd like in Firefox and Safari but the drop downs do not appear at all on IE7/Win. I've tried a lot of different things to fix it but I think I am missing some fundamental understanding here so it's all been shots in the dark. Any tips would be greatly appreciated! Thanks in advance.

P.S. I realize the CSS might be a bit confusing at first glance - what it achieves is essentially just changing the positioning of the background image when hovered over to reveal the "hover state" of a particular menu choice.

The menu in question is the horizontal bar near the top (MBA Programs, Faculty & Research, etc.)

URL: http://rady.ucsd.edu/index-dev.html

Relevant HTML:

Code:

<ul id="nav-main" class="home">
			<li id="mba"><a href="/mba/">MBA Programs</a>
				<ul>
					<li class="first-item"><a href="/mba/fulltime/">Full-Time MBA</a></li>
					<li><a href="/mba/flex/">FlexMBA</a></li>
					<li><a href="/mba/admissions/">Admissions</a></li>
					<li><a href="/mba/careers/">MBA Career Connections</a></li>
					<li><a href="/mba/profiles/">Student & Alumni Profiles</a></li>
					<li><a href="/mba/organizations/">Student Organizations</a></li>
					<li><a href="/mba/seminars/">Professional Seminars</a></li>
					<li><a href="/mba/mentors/">Executive Mentors</a></li>
					<li class="last-item"><a href="/mba/speakers/">Executive Speakers</a></li>
				</ul>
			</li>
			<li id="faculty"><a href="/faculty/">Faculty & Research</a>
				<ul>
					<li class="first-item"><a href="/faculty/directory/">Faculty Directory</a></li>
					<li><a href="/faculty/research/">Research Areas</a></li>
					<li><a href="/faculty/seminars/">Research Seminars</a></li>
					<li><a href="/faculty/recruiting/">Faculty Recruiting</a></li>
					<li class="last-item"><a href="faculty/postdoctoral/">Postdoctoral Research</a></li>
				</ul>
			</li>
			<li id="exec"><a href="/exec/">Executive Development</a>
				<ul>
					<li class="first-item"><a href="/exec/custom/">Custom Programs</a></li>
					<li><a href="/exec/open/">Open Enrollment Programs</a></li>
					<li><a href="/exec/learn/">Learning Consortium</a></li>
					<li><a href="/exec/leadership/">Leadership Assessment</a></li>
					<li><a href="/exec/align/">Align Executive Series</a></li>
					<li class="last-item"><a href="/exec/faq/">Frequently Asked Questions</a></li>
				</ul>
			</li>
			<li id="corporate"><a href="/corporate/">Corporate Connections</a></li>
			<li id="news"><a href="/news/">News & Events</a>
				<ul>
					<li class="first-item"><a href="/news/releases/">News Releases</a></li>
					<li><a href="/news/media-coverage/">Media Coverage</a></li>
					<li><a href="/news/faculty-experts/">Faculty Experts</a></li>
					<li class="last-item"><a href="/news/newsletter/">Newsletter</a></li>
				</ul>
			</li>
			<li id="invest"><a href="/invest/">Invest in Rady</a>
				<ul>
					<li class="first-item"><a href="/invest/edge/">Corporate EDGE</a></li>
					<li><a href="/invest/venture-fund/">Dean's Venture Fund</a></li>
					<li><a href="/invest/fellowships/">Endowed Fellowships</a></li>
					<li class="last-item"><a href="/invest/chairs/">Endowed Chairs</a></li>
				</ul>
			</li>
			<li id="alumni"><a href="http://alumni.rady.ucsd.edu">Alumni Relations</a></li>
			<li id="undergrad"><a href="/undergrad/">Undergraduate</a>
				<ul>
					<li class="first-item"><a href="/undergrad/courses/">Courses</a></li>
					<li class="last-item"><a href="/undergrad/course-readers/">Course Readers</a></li>
				</ul>
			</li>
			<li id="about"><a href="/about/">About</a>
				<ul>
					<li class="first-item"><a href="/about/welcome/">Welcome</a></li>
					<li><a href="/about/staff/">Our Staff</a></li>
					<li><a href="/about/campus/">Our Campus</a></li>
					<li><a href="/about/sandiego/">Life in San Diego</a></li>
					<li><a href="/about/dean/">About the Dean</a></li>
					<li><a href="/about/athena/">Athena</a></li>
					<li class="last-item"><a href="/about/beyster/">Beyster Institute</a></li>
				</ul>
			</li>
		</ul>

Relevant CSS:

Code:

	#nav-main { width: 903px; clear: both; list-style: none; padding: 0 0 2em 0; float: left; position: relative; }
	#nav-main.home { padding-bottom: 0; }
	
		#nav-main li { float: left; padding: 0; margin: 0; text-indent: -9000px;}
		
		#nav-main li ul { position: absolute; list-style: none; }
		
		#nav-main li ul li { display: none; text-indent: 0px; }
		
		#nav-main li ul li a { font-size: 11px; line-height: 1.1; height: 20px; padding-left: 9px; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; }

		#nav-main li:hover ul li { display: block; }
		
		#nav-main ul li a { padding-left: 0px; padding-right: 12px; }
		
		#nav-main li ul li.first-item a { padding-top: 10px; }
		#nav-main li ul li.last-item a { padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; }
		
		#nav-main li ul a, #nav-main li ul a:hover { width: 150px; background: #fafafa; }
	
		#mba ul li a, #mba ul li a:hover { width: 155px; }
		#faculty ul li a, #faculty ul li a:hover { position: relative; left: 2px; width: 137px; }
		#exec ul li a, #exec ul li a:hover { position: relative; left: 4px; width: 172px; }
		#corporate ul li a, #corporate ul li a:hover { position: relative; left: 2px; width: 200px; }
		#news ul li a, #news ul li a:hover { position: relative; left: 3px; width: 117px; }
		#invest ul li a, #invest ul li a:hover { position: relative; left: 2px; width: 139px; }
		#undergrad ul li a, #undergrad ul li a:hover { position: relative; left: -1px; width: 117px; }
		#about ul li a, #about ul li a:hover { position: relative; left: -73px; width: 107px; text-align: right; }
	
		#mba a, #faculty a, #exec a, #corporate a, #news a, #invest a, #alumni a, #undergrad a, #about a { display: block; height: 34px; background: url(../images/nav.gif) no-repeat 0 0; }

		#mba a { width: 105px; }
		#mba a:hover, #mba.current a { background-position: 0px -34px; }
		#faculty a { width: 127px; background-position: -105px 0; }
		#faculty a:hover, #faculty.current a { background-position: -105px -34px; }
		#exec a { width: 152px; background-position: -232px 0; }
		#exec a:hover, #exec.current a { background-position: -232px -34px; }
		#corporate a { width: 150px; background-position: -384px 0; }
		#corporate a:hover, #corporate.current a { background-position: -384px -34px; }
		#news a { width: 107px; background-position: -534px 0; }
		#news a:hover, #news.current a { background-position: -534px -34px; }
		#invest a { width: 59px; background-position: -641px 0; }
		#invest a:hover, #invest.current a { background-position: -641px -34px; }
		#alumni a { width: 64px; background-position: -700px 0; }
		#alumni a:hover, #alumni.current a { background-position: -700px -34px; }
		#undergrad a { width: 82px; background-position: -764px 0; }
		#undergrad a:hover, #undergrad.current a { background-position: -764px -34px; }
		#about a { width: 57px; background-position: -846px 0; }
		#about a:hover, #about.current a {background-position: -846px -34px; }

Hi All,

When viewed in Firefox on a Mac, the drop down menu works perfectly. I am having a problem with my navigation when viewed in Safari on a Mac. I am not sure about how things function on a PC.

When viewed in Safari, the drop down menu appears unaligned with the buttons it corresponds too. For example, on the following page http://www.oharenoise.org/new/mission.htm when you mouseover "About Us" the corresponding menu shows up under "Home."

The other problem (only in Safari, as far as I know) I am having occurs on the homepage, viewed here . When you mouseover "About Us", "Newsroom", "Residential", "School" or "Technical" the drop-down menu appears in front of the Flash slideshow perfectly, until the slide changes pictures and then the menu falls behind the slide.

Any idea why these issues are occurring?

Thanks.

Hello All,

I'm having a ton of difficulty on the drop down navigation bar for my site. I used webmonkey's "Add CSS Drop-Down Menus" tutorial

As I wanted a really simple, quick and easy drop down menu especially since the lists that create the menu are populated through php.

Now I found that I had to use z-index so the menu div layed on top of the text div (as other wise the menu div or the text div would overlap and obscure the other)

This all worked fine. Sadly, when I tried to put a form into one page, I realized all the input fields could not be used because of the z-indexes and the menu bar overlaying it. So again I had to find a solution and here's where I'm stuck.

Does anyone know a way I can keep it as is and have the form functional? If not, can anyone help me change the menu bar so that the second level of the list is shown on one line (therefore it won't lay on top of the form causing it to be obstructed). So I'd rollover "Telecommunications" and all the sub-categories are listed on one line

Here's the html code:
Code:

<div id="content">
<ul id=nav>
<li><a href='index.php?id=12'>About ACC</a></li>
<li><a href='index.php?id=13'>Telecommunications</a>
<ul>
<li><a href='index.php?id=6'>Telephone Systems</a>
<li><a href='index.php?id=7'>Voice Over IP Solutions</a>
<li><a href='index.php?id=5'>Local & Long Distance</a>
<li><a href='index.php?id=4'>Conferencing</a>
<li><a href='index.php?id=11'>Internet Access and Bandwidth</a><li><a href='index.php?id=10'>WAN/LAN Networking</a>
<li><a href='index.php?id=9'>Fiber Optics</a></ul></li>
<li><a href='index.php?id=14'>Our Services</a>
<ul>
<li><a href='index.php?id=8'>Cost Consulting & Analysis</a></ul></li>
<li><a href='index.php?id=19'>Contact Us</a></li>
</li>
</ul>

<div id="newscontent">

<table width="100%" border="0">
    <tbody>
        <tr>
            <td>
            <form method="post" action="mailto:spicelmf@gmail.com">
                <b>Test:<b> <br />
                <input type="text" size="71" name="title" /><br />

                <br />
                <input type="submit" value="Submit" /> <input type="reset" value="Try again" /></b> </b>
            </form>
            </td>
        </tr>
    </tbody>
</table></div>
</div>

and here's the css:
Code:

#nav {

        position: relative;

        margin: 0 auto 0 auto;

        top: 67px;

        width: 720px;
        
        left: 50px;

        padding: 0;
        
        height: 400px;
        
        /*list-style-type: none;*/

}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul li {
	position: relative;
	float: left;
        min-width: 150px;

}
li ul {
	position: absolute;
	top: 35px;
	display: none;
}
ul li a {
	display: block;
        text-align: center;
	text-decoration: none;
	line-height: 24px;
        font-size: 14px;
        color: #21448c;
	padding: 5px;
	background: #e6e3b8;
	margin: 0 2px;
        border-style: solid;
        border-width: 0 1px 1px 1px;
        border-color: #21448c;
}

ul li a:hover { background: #8da6bc; }
li:hover ul, li.over ul { display: block; }



#content {

  position: relative;
  height: 500px;
  margin: 0 auto 0 auto;
  width: 720px;
  top: 56px;
  padding: 0;      
  font-family: Arial,Helvetica,sans-serif;


}



#newscontent {

  position: absolute;
  margin: 0 auto 0 auto;
  min-height: 380px;
  top: 135px;
  padding: 0px 54px 20px 50px;
  width: 620px; 
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10pt !important;
  z-index: -1;
  background: transparent url(maincontent_bg.png) repeat-y left top;
 
}

Thanks and apologies if this was already covered, I searched for ages and couldn't find what i was looking for.

I have a problem and I need some help on centering the UL,LI menus instead of having it stick to the left...

Code:

#dmenu 
{
  /* font-family: Arial, Helvetica, Sans-Serif; */
  /* font-size: 12px; */
}
#dmenu li ul 
{ 
  /* top: auto; */
  /* left: auto; */
}
#dmenu li:hover ul
{
  /* lists nested under hovered list items */
  display: block;
}
#dmenu li.over ul
{
  display: block;
}
.xMenuUl
{
  text-align: center;  /* for IE stupidity */
  background-color: #FFFFFF;
  list-style-type: none;  /* hide the bullet icon */
  margin: 0;
  padding: 0;
}
.xMenuLi
{
  list-style-type: none;  /* hide the bullet icon */
  float: left;
}
.xMenuTitle
{
  display: block;
  width: 100px;
  text-indent: 0px;
  text-decoration: none;
  border: 1px solid #000000;
  padding: 4px;
  line-height: 14px;
}
.xSubmenuUl
{
  list-style-type: none;
  position: absolute;
  margin: 0;
  padding: 0;
  display: none;
  margin-top: -1px;
  background-color: #E7F7FF;
  background-position: top left;
  background-repeat: repeat-x;
  border-top: 1px solid #000000;
  border-bottom: 2px solid #000000;
  border-right: 2px solid #000000;
  border-left: 7px solid #FF0000;
}
.xSubmenuLi a
{
  padding: 3px;
  text-decoration: none;
  color: #000000;
  display: block;
  width: 250px;
}
.xSubmenuLi a:hover
{
  text-decoration: none;
  background: #336699;
  color: #FFFFFF;
}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
 <head>
 </head>
<body>

This is a test...<br>sdfsdf<br>
<ul class="xMenuUl" id="dmenu">
 <li class="xMenuLi"><a href="" class="xMenuTitle">Home</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Frequently asked questions</a></li>
   <li class="xSubmenuLi"><a href="">Impressum - Required by Law</a></li>
   <li class="xSubmenuLi"><a href="">Links and whos better than me</a></li>
   <li class="xSubmenuLi"><a href="">Sitemap - quick list of all links</a></li>
  </ul>
 </li>
 <li class="xMenuLi"><a href="" class="xMenuTitle">Perl</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Trees, Twigs and XML</a></li>
   <li class="xSubmenuLi"><a href="">Perl Data Types and using Hashes</a></li>
   <li class="xSubmenuLi"><a href="">XML Data and how to write it</a></li>
   <li class="xSubmenuLi"><a href="">XML Data and why I love it</a></li>
  </ul>
 </li>
 <li class="xMenuLi"><a href="" class="xMenuTitle">SVG</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Interactive with the mouse</a></li>
   <li class="xSubmenuLi"><a href="">Basic objects and which software</a></li>
   <li class="xSubmenuLi"><a href="">Interactive does not mean it is Flash</a></li>
   <li class="xSubmenuLi"><a href="">Animated ECMA and generating objects on the fly</a></li>
   <li class="xSubmenuLi"><a href="">Clipart and Popart</a></li>
  </ul>
 </li>
</ul>
this is a test....<br>
asdf<br>

</body>
</html>

We've recently redesigned our company's website and went live with it. Unfortunately we've just noticed on the pages with Flash on them, the CSS drop-downs go behind the text, flash objects, etc.

Does anyone know how to fix this? You can see what is happening on these pages.

http://www.callan.co.uk/locate_school.php
http://www.callan.co.uk/callanschool_student_pgs/callan_english_lessons_video.php

You'll notice in the second link the far right drop-down menu doesn't go behind the right side navigation div. I think this is because it's the flash causing it and there is no Flash under that last drop-down menu.

--------This Part Solved!---------

Hi Guys!

I have a CSS dropdown menu going on, and it's working semi-properly in Firefox, but is stuck behind the content div in IE6/7. I've tried using Z-index but either I'm altering the wrong tag or I'm way off in the wrong direction, as it ain't workin.
Here is the page:
http://www.whitecapgraphics.com/bates/front.php
If you look at it in IE, there's actually no indication that it is dropping down at all, but I know it is as I moved the drop downs up a few pixels and I could see them dropping behind the div.
PS - The Home button does not have a drop down menu.

My CSS:
Code:

#d1 {
	background-color: #003366;
	float: left;
	width: 200px;
	background-image: url(images/header_bg.gif);
	background-repeat: repeat-x;
	height: 107px;
}
#d2 {
	background-color: #1F2935;
	float: right;
	width: 477px;
	background-image: url(images/header_bg.gif);
}
#head_container {
	background-color: #000066;
	float: left;
	background-image: url(images/header_bg.gif);
	height: 107px;
}
#nav_container {
	background-color: #1F2935;
	float: left;
	width: 100%;
	background-image: url(images/nav_bar_bg.gif);
	height: 30px;
}
#page_container {
	margin: auto;
	width: 99.99%;
	height: 100%;
}
#content_container {
	background-color: #e4e4e4;
	float: left;
	width: 100%;
	background-image: url(images/content_blue_column_bg.gif);
	background-repeat: repeat-y;
	background-position: right;

}
#content {
	background-color: #e4e4e4;
	position: relative;
	margin-right:253px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #000000;
	padding-left: 10px;
	padding-right: 10px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: medium;
}
#right_column {
	background-color: #CC9900;
	float: right;
	width: 253px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}












/*____________________________________________________________*/


* {margin:0; padding:0;} /*Need to lookup this line - prevents the dropdown from sitting off kilt from the nav bar options */

/* the horizontal menu starts here */
div#nav {
	width:600px; /* sizes the nav div at a fixed width */
	float:left;
	background-color:#CCF; /* colors the div */
	background-image: url(images/nav_bar_bg.gif);
	z-index:10;
	}
div#nav li {
	float:left;	/* causes the list to align horizontally instead of stack */
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	border:1px solid black; /* creates dividing lines between the li elements */
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: medium;
	font-weight: bold;
	min-width: 126px;
	text-align:center;
	height:26px;
	}
div#nav li:first-child {
	border-left:1px solid; /*the first vertial line on the menu */
	}

div#nav li:hover { 
	background-color:#D1C9B9; /*sets the background of the menu items */
	}
div#nav a {
	display:block;
	padding:1px 6px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color:#D1C9B9;	/* sets the type color */
	}
div#nav a:hover {
	color:black;
	}
/* the menu ends here */
/* the drop-down starts here */
div#nav ul li ul {
	margin:0; 
	z-index:20; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
	left:-1px; /*aligns the drop exactly under the menu */
	top:28px;
	}
#pyt ul li {
	background-color:#B3916B;
}
#h ul li {
	background-color:#1F2935;
}
#ri ul li{
	background-color: #827977;
}
#bn ul li{
	background-color: #455D67;
}


div#nav ul li ul li {padding:0;
	width:100%; /* makes the list items fill the list container (ul) */
	border-left:1px solid; /*  three sides of each drop-down item */
	border-bottom:1px solid;
	border-right:1px solid;
}
div#nav ul li ul li a {
	padding:1px .5em;
	font-size:small;
	text-align:left;
	vertical-align:middle;}
div#nav ul li ul li:first-child {
	border-top:1px solid; /*the top edge of the dropdown */
	}
/* make the drop-down display as the menu is rolled over */
div#nav ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#nav ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
div#nav ul li:hover a {color:black;}


/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#nav ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
	}

/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#nav ul li ul {
	border-top:1px solid #069;
	border-left:0px; /* stops the drop inheriting the ul border */
	}

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
	@media all and (min-width: 0px){
   body div#nav ul li ul {padding-bottom:22px;}
   }
/*end Opera hack */
/* END OF HACK ZONE */
/* the drop-down ends here */
/* END OF LIST-BASED MENU */




#h {
	background-color: #1F2935;
}
#ri {
	background-color: #827977;
	letter-spacing: -.06em;
}

body {
	background-color: #1F2935;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#pyt {
	background-color: #B3916B;
}
#bn {
	background-color: #455D67;
	}

#content #flash_map {
	text-align: center;
	border: 2px solid black;
	width: 660px;
	margin: auto;
}

--------****Still Need Help Here!-----------

Unrelatedly, I'm also experiencing the following quirks that I'm not knowledgeable enough to work out quickly, so tips are aprpeciated:

****1) That menu bar is 26 pixels. Is there a way to vertically center the <a> inside the <li>?

2) The word-wrapped drop down options are extending outside of the menu - which of my styles is causing this? How can I solve it? *SOLVED*

I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it.

This is an example of the problem.

Any suggestions?

Is there any way to use multi level drop down menus that work on all browswers(IE 6 and 7, firefox, safari) without using .htc file or javascript included?

This is nice, but the css in too messy.

http://www.bluescopesteel.com

If you have any betterones please tell me.

Cheers

Hi there.

I've become fond of the idea of non-javascript menus. I've been experimenting a little.

So with help from various sources I managed to get a simple set working.

I have this...
Code:

#menu ul li > ul { 
  display: 	none; 		
  position: 	absolute; 
  top: 		18px; 		
  left:          0;		
  width:       170px;		
}

which correctly 'hides' the sub-menu.
Then I have this
Code:

#menu ul li:hover > ul {
  display: 	block;
}

which should 'unhide' the sub-menu.

Now, because I'd had success with the menu, I thought I should now look at validating my html and css. So far, I've just looked at the html part.

My question is, why does it work with this code (which doesn't validate under Strict doctype)?
Code:

  <div id="menu">
  <ul>
    <li class="small"><a href="blah.php">About</a>
    <li>Details On...
      <ul>
        <li class="small"><a href="blah.php">Registering</a>
      </ul>
  </ul>
  </div>

and not this (which does validate)?
Code:

  <div id="menu">
  <ul>
    <li class="small"><a href="blah.php">About</a></li>
    <li>Details On...</li>
    <li>
      <ul>
        <li class="small"><a href="blah.php">Registering</a></li>
      </ul>
    </li>
  </ul>
  </div>

I'll listen to any thoughts on this, even the use (or not) of doctype strict.

Thanks for listening!
Stay JOLLY
H

Hi,

I wanted to do a horizontal popout menu. I have the code and it works but I am trying to undertsand it better.
It uses a csshover.htc file which i didn't download but the thing still works fine with a ie sniffer code in it. It doesn't use any javascript which I thought it needed.

There seems a few ways to do expanding menus in css (with/without javascript)?

Menus are more complicated than they look but I would some explanation on the above points before i continue.

Please help me. This is driving me crazy.

I am getting a problem in IE and I can't seem to figure out how to fix it. Of course, it works just fine in Firefox, but not IE.

In IE, go to to this page. On the horizontal drop-down menu, go to "Guides." Then scroll through the three drop-down options and back up. Notice how the 3rd level menu suddenly dissapears behind the 2nd level menu?

Here's the portion of my CSS file controling the menu:
Code:

/********** LAYOUT - HEADER **********/
#header {background: #ffffff;
         margin-top:    10px;
         margin-bottom: 25px;
         padding: 0 0 8px;}

img.headerimg {margin-left: 25px;}
	
  /** NAV - top horizontal nav **/
  #nav,
  #nav ul
    {padding: 0;
     margin: 0;
     list-style: none}

  #nav {height:1.5em;
        font: 80% arial;
        margin-top: 1em;
        margin-left: 75px;}

  #nav li {position:relative;
           float: left;
           width: auto;
           display:block;
           margin: 0;
           padding:0}

  #nav a
    {display: block;
     padding: 3px 10px 2px;
     border-bottom: 1px solid rgb(98,61,15);
     border-top: 1px solid rgb(98,61,15);}

  /************* 2nd tier *************/
  #nav li ul {width: 15em;
              position: absolute;
              left: -999em;
              background: #ffffff}

  #nav li:hover ul,
  #nav li.sfhover ul
    {left: 10px;
     z-index:55555}

  #nav li li {background:#9BCD9B;
              float:none;
              border: 1px solid rgb(98,61,15);
              border-top: none;
              padding-left: 0}

  #nav li li a,
  #nav li li a:link,
  #nav li li a:visited,
  #nav li li a:hover
    {color:#000;
     padding: 3px 10px;
     border-bottom: none;
     border-top: none;}

  #nav li li a:hover {color: #000;
                      background: #FFDAB9;}

  #nav li.active {background: #FFDAB9;}
  #nav li.active a {color: #000000}

  /************* 3rd tier *************/
  #nav li ul ul {width: 30em;
                 font-size: 100%;
                 margin-left: 7em;
                 margin-top: -.7em}

  #nav li:hover ul ul,
  #nav li.sfhover ul ul
     {left: -999em;}

  #nav li li:hover ul,
  #nav li li.sfhover ul
     {left: auto;}

  #nav li li li
             {background: #f6f6f6;
              border-top: 1px solid #fff;}

  #nav li li li a,
  #nav li li li a:link,
  #nav li li li a:visited,
  #nav li li li a:hover
    {color: #006400}

  /************* 4th tier *************/
  #nav li ul ul ul{width: 30em;}

  #nav li:hover ul ul ul,
  #nav li.sfhover ul ul ul
     {left: -999em;}

  #nav li li li:hover ul,
  #nav li li li.sfhover ul
     {left: auto;}

  #nav li li li li {background: #FFDAB9;}

  #nav li li li li a:hover {color: #000;
                            background: #9BCD9B;}

Please help me!

Thanks!

Manny

Hello does anyone have any links to good tabs tutorials I been looking at some other and most of the CSS code would not work well but I would just like some links thanks for ur time

I've been grappling with this for a long while now. I pretty much have it working, except for the life of me I cannot get the drop down menus to appear under the corresponding link. position: absolute makes the menus always appear off to the left. Does anyone know what the secret is to this?

Code:

<div id="nav_wrapper">
<div id="nav_bar">
<div id="nav_content">
	<ul id="nav_ul">
	<li><a href="/">Home</a></li>
		<li><a href="/forum/">Forum</a>
			<div class="nav_subcontent">
			<ul>
			<li><a href="/forum/search.php">Search</a></li>
			<li><a href="/forum/memberlist.php">Members</a></li>
			</ul>
			</div>
		</li>
	<li><a href="#">A link without a menu</a></li>
	</ul>
</div>
</div>
</div>

Code:

/* Wrapper */
#nav_wrapper {
	clear: both;
	}
/* Bar */
#nav_bar {
	background: url('images/nav_swish_fade.jpg');
	background-repeat: repeat-x;
	height: 36px;
	}
/* All the buttons within the bar, the middle portion */
#nav_content {
	display: inline;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	height: 36px;
	}
	
/* Entire unordered list */
#nav_ul {
	list-style: none;
	position: relative;
	}
/* Top level unordered list */
#nav_content ul>li {
	display: block;
	}
/* Top level unordered list links */
#nav_content ul>li a {
	display: block;
	float: left;
	
	padding: 9px;
	margin-left: 2px;
	margin-right: 2px;
	
	}
/* Menus */
.nav_subcontent {
	display: none;
	position: absolute;
	background: #222;
	
	margin-top: 8px;
	}
/* Menu link */
#nav_content .nav_subcontent a {
	display: block;
	padding: 9px 20px 9px 0;
	margin-left: -5px;
	text-align: left;
	
	min-width: 100px;
	}
	
/* Show menus */
#nav_content ul>li:hover .nav_subcontent {
	display: block;
	}