CSS - Dropdown Hides Behind Select Box

I've developed a dropdown navigation menu from a tutorial. The basic menu works perfect in IE and FF. But I would like to change a few things that for the life of me I can't get to work. First would be that under each item in the dropdown menu I would like there to be a bottom border. So in my css file I added border-bottom to the li li {} section. Now I am faced with two problems.

First in firefox the border expends maybe 5px. Apon further investigation I found that for some reason FF has the <li> tags only about 5px wide all over the place! In IE it extends atleast below the text but won't will the entire <li> like it should! FF also doesn't give the border to all the links like it should.

The next problem is in the width of the elements. Instead of the dropdown part being a set width, I would like the the part that drops down to stretch so that each link is on one line. But the entire part that drops down would be still remain rectangular like it does now.
Code:

Ex:
[Link1][Link2][Link3]  *with the mouse over the link 1

|Url1      |
|Url2      |
|Much Longer|

instead of

[Link1][Link2][Link3]  *with the mouse over the link 1
|Url1 |
|Url2 |
|Much|
|Longer|

I think this has something to do with the width of the li, so I set the width to auto. No change.

To recap my lengthy post. Getting a bottom border on the li tags in the dropdown Getting FF to behave with the bottom border and widths Each link should be on only one line
I think that getting the <li> width to behave will solve most of my problems. I've attached the original css and html pages.

I made a drop down menu with css and I can't get it to work with IE6. Can anyone help?

You can view an example of what I have at the following url

mentalgameofmoney.co.uk/example.html

Here is the CSS
Code:

#menu {
position:absolute;
background-color:#FF0000;
overflow:hidden;
height:30px; 
width:91px;
top:0px;
left:0px;
}
#menu:hover{
overflow:visible;
}
#menu a:link{
text-decoration:none;
}
#spacer{
height:30px;
}
#link_box{
background-color:#cbbba2;
border-left:#c1ad90 solid 1px;
border-right:#c1ad90 solid 1px;
border-bottom:#c1ad90 solid 1px;
padding-left:5px;
color:#51351a;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
text-decoration:none;
text-align:left;
}
#link_box:hover{
background-color:#51351a;
color:#FFFFFF;
}

Here is the HTML
Code:

<div  id="menu">
  <a href="#">
  <div id="spacer"></div></a>
   <a  href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a> 
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
  </div>

Been trying for a while now to get a crossbrowser horizontal menu working. I am very inexperienced so I guess that is what is causing all the problems. Thanks to some links provided through this forum I have been able to learn some and came across this to suit my needs.

It works well, except in IE6 when in a table (not sure of any other way to have it) the dropdowns dont work. FF, IE7 work fine.

I have read that there are some problems when putting a css dropdown in a table. But I cant find a fix.

Thanks for looking.

Code:

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: auto; /*For KHTML*/
	list-style: none;
	height: 24px;
}

ul#navmenu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}

ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
  border: 1px solid #ffffff;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #585858;
  color: #ffffff;
  font: 11px/22px Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
	background: #F8981D;
	color: #FFF;
	}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
	float: none;
	background: #cccccc;
	color: #585858;
	
  }

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #F8981D;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

I'm editing a CSS drop down navigation that uses <ul> and <li>.

Is there a way to change the background color & rollover in just one of the dropdowns? The code is below in two sections. I've highlighted the list that I'd like to change the background color of.

Thanks for your help!


Code:

<div id="wrap">
		<ul id="navbar">
		<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
			<li><a href="#"><IMG SRC="d_images/navigation_01.gif" border="0"></a>
			</li>
			<li><a href="#"><IMG SRC="d_images/navigation_02.gif" border="0"></a>
				<ul>
				<li><a href="summit_09registration.cfm">Register</a></li><li>
				<a href="summit_09scholarship.cfm">Scholarships</a></li></ul>


			<li><a href="#"><IMG SRC="d_images/navigation_03.gif" border="0"></a>
				<ul>
					<li><a href="summit_09awards.cfm">Leadership Awards</a></li><li>
					<a href="summit_09party.cfm">Anniversary Party</a></li><li>
					<a href="summit_09work.cfm">Work Project</a></li><li>
					<a href="summit_09dine.cfm">Dine Arounds</a></li><li>
					<a href="summit_09jazz.cfm">Jazz Fesitval</a></li><li>
					<a href="summit_09networking.cfm">Networking</a></li></ul>
					</li>
			<li><a href="#"><IMG SRC="d_images/navigation_04.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

			<li><a href="#"><IMG SRC="d_images/navigation_05.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

			<li><a href="#"><IMG SRC="d_images/navigation_06.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

	<li><a href="#"><IMG SRC="d_images/navigation_07.gif" border="0"></a>
				<ul>
					<li><a href="summit_09hotel.cfm">Conference Hotel</a></li><li>
					<a href="summit_09travel.cfm">Travel</a></li><li>
					<a href="summit_09neworleans.cfm">New Orleans</a></li></ul>
			</li>



</ul></div>

Code:

<style type="text/css">

#navbar {
	margin: 0;
	padding: 0;
	height: 0;}
#navbar li {
	list-style: none;
	float: left; }
#navbar li a {
	display: block;
	padding-bottom:0px;
	padding-left: 0px;
	padding-right:0px;
	padding-top:0px;
	border: 0px;
	color: #fff;
	font-family: helvetica;
	font-size: 8pt;
	font-style: bold;
	font-color: #ffffff;
	text-decoration: none;}
#navbar li ul {
	display: none;
	width: 10em; /* Width to help Opera out */
	background-image: url(../images/summit_nav_back.gif);}

#navbar li:hover ul, #navbar li.hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#navbar li:hover li, #navbar li.hover li {
	float: none; }
#navbar li:hover li a, #navbar li.hover li a {
	background-image: url(../images/summit_nav_back.gif);
	border-bottom: 1px solid #fff;
	color: #000; }
#navbar li li a:hover {
	background-image: url(../images/summit_nav_red.gif); }
</style>


<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
	var sfEls = document.getElementById("navbar").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Hi all!


Been a while! A couple of quickies if people wouldn't mind!

1) my nested list menus break in FF3. They display OK in FF2, IE7 and IE8 beta!? Anyone know what might be wrong?

page is he

http://www.wellandpower.net Very strage!

Also, a seperate qustion you can set a div to display: table-cell; This works fine on FF2 and 3, but in IE it doesnt work.

You can see the difference he

http://www.xxl.me.uk

Hey all,

having a bit of trouble getting my drop down menu to display properly. It's modeled after the suckerfish menu, only modded a bit.

Here's the site...hover over 'machines' to see what i'm talking about (have to use FF, i haven't added the JS for IE yet).

The drop down is adopting the rollovers from the mainmenu, and I don't know what to change to make 'em different.

Here's the CSS for the menu:
Code:

#mainmenu {
width:780px;
height:41px;
margin:auto;
position:relative;
}

#mainmenu li.navigation {
width:78px;
height:41px;
float:left;
text-align:center;
background:#B8A488 url(images/mainmenu_roll.gif) no-repeat;
}

#mainmenu li.navigation a{
background:#66563D url(images/mainmenu_off.gif) no-repeat;
display:block;
text-decoration:none;
color:#F4F1E5;
height:31px;
padding-top:10px;
}

#mainmenu li.navigation a:hover {
background:transparent;
color:#66563D;
}

#mainmenu li#home {
background-image:url(images/home_roll.gif);
}

#mainmenu li#home a{
background-image:url(images/home_off.gif);
}

#mainmenu li#home a:hover {
background:transparent;
}


#mainmenu li#contact {
background-image:url(images/contact_roll.gif);
}

#mainmenu li#contact a {
background-image:url(images/mainmenu_off.gif);
}

#mainmenu li#contact a:hover {
background:transparent;
}

	/* BEGIN DROP DOWN MENU */
	
	li ul {
	  display: none;
	  position: absolute; 
	  top: 1px;
	  margin-left:-2px;
	  background-color:#B8A488;
	  border-left:1px solid #66563D;
	  border-bottom:1px solid #66563D;
	  padding:2px;
	  z-index:500;
	}
	
	* html li ul {
	top:26px;
	}
	
	/*
	li ul li {
	padding:0;
	}
	*/

	li > ul {
	top: auto;
	left: auto;
	}

	li:hover ul, li.over ul{ 
		display: block;
	}
	

Thanks!

I have been hunting around for an all CSS drop down menu that when you hover on the heading the menu expands down to show the heading 1 menu and if you hovered over the next menu item this expands to show that menu list instead a bit like the 'be the first to apply' on the right of this page, http://www.fish4.co.uk/iad/jobs
search for say 'admin' just to get to the results page as this is where the menu is.

the look is not important but the function is

BUT....

i wanted to have many links in the drop down not just the one as in this example.

this is the extracted code i have got so far that does what you see on this page.

Code:

<style>

#rightcolumn {
 float: right;
 width: 170px;
 text-align: center;
}

#leftcolumn {
 float: left;
 width: 545px;
 padding: 10px;
}

h3#bftahead {
	text-align:left;
	color:#c1001f;
	font-size:1.5em;
	font-weight:bold;
	margin:23px 0px 10px 0px;
	}

#bfta h4 {
	font-size:1.1em;
	margin:0em;
	padding:0.4em 0.1em 0.6em 0.1em
	}

#bfta {
	width:170px;
   	text-align:left;
   	padding:0px;
   	margin:0px 0px 10px 0px;
   	list-style-type:none;
   	height:47em;
   	overflow:hidden;
   	background:#ffffff url('images/bfta-background.jpg') bottom no-repeat;
	border-bottom:1px solid #cfcfcf;
   }

#bfta li {float:left;width:100%;}

#bfta li a {
   	padding:0.5em 3%;
   	display:block;
   	width:94%;
   	height:1.95em;
	margin-bottom:-0.4em;
   	overflow:hidden;
   	text-decoration:none;
   	background:transparent url('images/bfta-background.png') no-repeat;
   	color:#333333;
   	font-family:arial, sans-serif;
   }

#bfta li a#last, #bfta li a:hover {height:24em;}

#bfta-whitebrand {list-style:none;margin:0em 0em 1em 1em;padding:0px;}
#bfta-whitebrand li {padding:0em 0.4em;}	

</style>

<div id="leftcolumn">
<ul id="bfta">

	<li>
	<h4>a1</h4>
	a1
    </li>

	<li><a href="a2">
	<h4>a2</h4>
	a2</a>
    </li>

	<li><a href="a3">
	<h4>a4</h4>
	a3</a>
    </li>

</ul>
</div>

Hi there,

I'm trying to integrate some SEO friendly dropdown menus into an existing website design.

The trouble I'm experiencing so far is that the body of the design is aligned centre, and most of the examples I've seen thus far use absolute positioning of <div> elements (i.e. the design is left-aligned, so the designer knows to position the dropdown div X pixels).

Is there a good reference I can use for positioning my divs properly?

Thanks

Hi,
on my site http://www.mattmdesign.com, sometimes when you mouseover the portfolio the menu appears in the wrong spot. someone also said that it is appearing on the left side of the page everytime with mozilla 1.0
Does anyone know how I can make it appear right under the porfolio link every time?
Thanks, Matt

I have a bit of an issue with a drop down script I'm working on. It's a CSS menu built from ul/li/a tags with an iframe thrown in for IE6 sake.

My problem is 2 fold. The first problem is in firefox. There is 2-3px of mystery padding/margining on my tags. I didn't put it there, nor does it show up in browsers other than firefox.

My second problem is a safari 2 issue. The dropdowns appear to be hidden behind some kind of container, very weird if you ask me.

I'm using jQuery for my script manipulation (if you don't know about it, learn about it. Its laziness is astounding!)

[Edit: link updated]
http://programmer .whipplehill .com/wes/newDD/list/getPageList.asp

Any help would be great! Thanks
--Wes

In today's Website Development world, which kind of Drop Down menus do the pro's prefer to use, pure CSS without Javascript or CSS with Javascript?

And also, can pure CSS Drop Down menus be used in Dynamic Websites?

Thank you.

I am in need of a code that will show a div (anysize) directly below a link and remain there when the mouse moves of the div but hides when the mouse moves out can someone please guide me to a code

Tim

I'm looking to add a drop down menu for my site but Instead of the menu dropping down i want it to go up and I found a few things about it but nothing really helped me I was wondering how can i get a css drop down to go up? sorry if this is the wrong forum to post on.. but i am clueless on this part i am going to be starting on the script soon just wanted to know how to code the script to make it go up

Thank you
Smackadoo

Link: http://cemtec.quicksites.co.za

CSS:
http://cemtec.quicksites.co.za/wp-c...grass/style.css

Hi

This dropdown menu on Products works in Firefox but when I goto IE7 I dont see anything at all. I have tried changing the div Class to a Div Id also without any change. Anybody have any clues to what I have todo?

L.