CSS - Css Dropdown Menu

My second level menu items are not showing in IE, but show fine in firefox.

Code:

#menucontainer {
	width: 100%;
	clear: both;
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding-left:0px;
	padding-top:35px;
	padding-bottom:15px; }

#menu {
text-align: center;
display:table;
padding:5;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
background: #eee;
}

#menu ul {
font: small-caps bold 12px/15px "lucida grande", tahoma, arial, verdana, sans-serif;
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}

#menu a {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb
margin: 0;
padding: 2px 3px;
}

#menu a {
color: #C7C7C7;
background: #000;
text-transform: small-caps;
}

#menu a:hover {
color: #fff;
background: #000000;
}

/* ********* secondary links ************** */

#menu li li a {
color: #C7C7C7;
background: #292A2C;
text-decoration: none;
}

#menu li li a:hover {
color: #FFF;
background: #292A2C;
}

#menu li:hover { z-index:1;}

#menu li {position: relative}

#menu ul ul {
position: absolute;
z-index:100;
left:0;
top:auto;
display:none;
}

div#menu ul ul,
div#menu ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(behavior.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
} 

}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
} 
</style>
<![endif]-->

Hi yall, i'm a quite newbie on css and i'm having an issue with my drop menu on the site i'm trying to do , with wordpress, multi level menu...i started from the code generated by the css generator and tried to fit it to my meeds.
but, i can't control the li li menu (categories), i want it to appear exactly at the end of the li categories.
2) the second issue is that i'm trying to add a margin to the main ul because it's to near from the top.
can someone help me plz?

here my code
Code:

#suckerfishnav,
#suckerfishnav ul {
  float: left;
  height: 2.98em;
  width: 960px;
  list-style: none;
  line-height: 1;
  background: white;
  font-weight: bold;
  margin: 0.1em 0.1em 0.1em 0.1em;
  padding: 0;
}

#suckerfishnav a {
  display: block;
  color: #7c6240;
  text-decoration: none;
  padding-top: 0.25em;
  padding-right: 0.7em;
  padding-bottom: 0.1em;
  padding-left: 0.2em;
}

#suckerfishnav li {
  float: left;
  padding: 0;
  width: 13em;
  height: 2.8em;
}

#suckerfishnav ul {
  position: absolute;
  left: -999em;
  height: auto;
  margin-left: 2em;
  line-height: 1;
  z-index: 500;
}

#suckerfishnav li li {
  width: 9.6em;
  border: solid #eda;
  border-width: 1px;
  padding-top;
  10px;
}

#suckerfishnav li ul a {
  width: 9.8em;
}

#suckerfishnav li ul ul {
  margin: -0.20em 0 0 9.8em;
}

#suckerfishnav li ul {
  position: absolute;
  left: -999em;
  height: auto;
  width: 9.9em;
  w\idth: 9.8em;
  font-weight: normal;
  border-width: 0.20em;
  margin: 0;
  z-index: 500;
}

#suckerfishnav li ul a {
  width: 9.9em;
  w\idth: 9.8em;
}

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

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

#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
  background: #eda;
  width: 9.5em;
  w\idth: 9.4em;
}

First I am using Dreamweaver MX2004.

I am still new to CSS, have not used it much. Still using tables (yeah i know) for the layout. Mainly because when I've tried positioning in the past, IE doesn't display it right. Layers don't seem to work for me!

What I'd like to know is: can I use CSS (the son of suckerfish dropdowns) for my drop down menu in a separate HTML file that would be saved as a library item? I'd like the nav separate so I can update it easily. Should I also use a separate CSS file that would only be associated with the nav? Is necessary to have an external css sheet, if it only applys to this nav? The nav would get dropped into a table row under the top banner. My issue is: will it get positioned right ? And will it view ok in IE??? Hope I explained this right. I fear that what I have already coded, would get messed up if I do this! But due to search engine optimization, I'd like to avoid a fully functioning javascript dropdown.

If you have a better suggestion/usage for a dropdown horizontal nav, I'd appreciate your ideas!

Thanks for the advice!

Valerie

Need some help with some dropdown menus.

I have been reading many of the tutorials on other sites.

I have come up with this code for my drop down menus:

Code:

.dropmenu {
   position: absolute;
   left: -1500px;
   visibility: visible;
   z-index: 101;
   float: left;
   width: 122px;

   border-width: 1px;
   border-style: solid;
   border-color: #BFBFBF;	
   background-color: #FFFFFF;
}
.dropmenu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
.dropmenu li {
   display: inline;
}
.dropmenu a, .dropmenu a:visited, .dropmenu a:active {
   display: block;
   width: 120px;

   padding: 2px;
   margin: 1px;
   font-family: Arial;
   font-size: 10px;
   font-weight: normal;
   text-align: center;
   text-decoration: none;

   color: #000000;
   background-color: #D4D4D4;
}
.dropmenu a:hover {
   padding: 2px;
   margin: 1px;
   font-family: Arial;
   font-size: 10px;
   font-weight: normal;
   text-align: center;
   text-decoration: none;

   color: #000000;
   background-color: #BFBFBF;
}

but no matter how much I adjust settings that I know, I cannot get the dropdowns to show up below my original buttons, they always show up to the right hand side.

Can someone here please point me in the right direction...

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!

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

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.

Hi

I am trying to create a drop down menu on my existing design.

Code:

http://dfinnema.com/help

How would I add a drop down to Page 3 menu that looks like this:

Code:

http://dfinnema.com/help/images/dropdown_active.png

Without the menu:

Code:

http://dfinnema.com/help/images/dropdown.png

Any Ideas / Suggestions? :|

Hiyas, I am a bit of a CSS noob, and I am having some problems so I thought I would post here and see if anyone could help me.

I was given some code by a friend the other day to make a drop-down menu that comes down from a jpg-based button. Everything seemed to work, until I tried to make more than 1 menu.

Here is my friend's website that uses the code - she can have 3 menus without anything glitching: www.hollyhostile.com

The menu is controlled by a javascript file, I have been told this is CSS based but it may indeed be java, so sorry if this is in the wrong place. Her js menu file looks kind of like this:
Code:

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.hollyhostile.com/about.html">About Me</a>'
menu1[1]='<a href="http://www.hollyhostile.com/faq.html">FAQ</a>'
menu1[2]='<a href="http://www.hollyhostile.com/references.html">References</a>'
menu1[3]='<a href="http://www.hollyhostile.com/pricing.html">Pricing</a>'

//Contents for menu 2,
var menu2=new Array()
menu2[0]='<a href="http://www.hollyhostile.com/forum">Forum</a>'
menu2[1]='<a href="http://www.hollyhostile.com/guestbook/">Guestbook</a>'
menu2[2]='<a href="http://www.hollyhostile.com/blog/">Blog</a>'
menu2[3]='<a href="http://www.youtube.com/hollyhostile">Tutorials</a>'

Then she has this in her index.html file:
Code:

<a href="http://hollyhostile.com/default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu1, '100px')" onMouseOut="delayhidemenu()">
<img src="holly_files/purple_05.jpg" alt="" width="65" height="23"></a></td>
		
		<td>
<a href="http://www.hollyhostile.com/portfolio.html"><img src="holly_files/purple_06.jpg" alt="" width="65" height="23"></a></td>

		<td>
<a href="http://hollyhostile.com/default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu2, '100px')" onMouseOut="delayhidemenu()">
<img src="holly_files/purple_07.jpg" alt="" width="88" height="23"></a></td>

However, when I try to use this on my own design, it will only show menu1, and this displays over random buttons, not in a succession. It's very very strange. Here is an example of the kind of thing I want to do:

www.gothique-noir.com/asylum

Each button apart from "Home" should drop down into a menu, but for some reason it won't let me do different menus.

If anyone can help me that would be hugely appreciated

Everything works perfect expect one thing. When a mouse hovered on a link, dropdown links appear. Problem here is when I move my mouse towards the new links, they disappear before I reach them.

Did I explain the problem well? No.
Try the link. Menu at the top here.
http://www.refinethetaste.com/html/


Code:

<style type="text/css">
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/elegant1.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#navigation { float:left; height:26px; width:776px; background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_off.gif);
}

#navigation .menu {padding:0; margin:0; list-style:none; font-size:16px;}
#navigation .menu table {border-collapse:collapse; height:0; width:0; margin:0 -4px -1px 0;}
#navigation .menu li {float:left; margin:0 5px;}
#navigation .menu li a {display:block; float:left; color:#FFFFFF; height:26px; text-decoration:none;}
#navigation .menu li a.current {font-weight:bold; border-bottom:3px solid #9d0808; cursor:text;}

#navigation .menu li:hover {position:relative; z-index:100;}
#navigation .menu li a:hover {position:relative; z-index:100; border-bottom:3px solid #aaa;}
#navigation .menu ul {position:absolute; left:-9999px; top:38px; width:140px; padding:0; margin:0; list-style:none;}
#navigation .menu ul li {margin:0;}
#navigation .menu ul li a {width:140px; height:20px; color: #000000; font-size:14px; border:0; text-align:right;}
#navigation .menu ul li a:hover { border:0;}

#navigation .menu ul ul {position:absolute; margin-left:100%; top:0; padding:0; margin:0; list-style:none;}

#navigation .menu :hover ul {right:0; left:auto;}
#navigation .menu :hover ul ul {left:-9999px; width:130px; padding-left:10px; }

#navigation .menu li ul :hover ul {left: 140px; height:20px; right:auto;}
#navigation .menu li ul li ul li a { color:#000000; font-size:12px; text-align:left; }

</style>

I'm having trouble writing CSS for a nav menu that drops down to four levels. I'm able to drop down to three but I'm having a tough time with the fourth level. Please help.




My CSS:


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover {
color:#3d4058;
background:#ffffff;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#3d4058;
background:#ffffff;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul {
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {
visibility:visible;
}
/* make the 4th level hidden */
.menu ul :hover ul :hover ul ul {
visibility:hidden;
}
/* make the 4th level visible */
.menu ul ul li:hover ul ul ul, .menu ul a:hover ul ul ul {
visibility:visible;
}

I am trying to create a website for my business and I cannot seem to center the navigation at the top of the screen and have the areas to the left and right of the screen be filled with the same bg color as the UL. I know usually you would set the margins to 0 auto to center that element on the page but for some reason its not working and the UL is just sticking to the left part of the screen. If anybody knows how to get this centered or how to fix my html/css i would sincerely appreciate it. Here is my code (html then css):

<body>
<div class="wrap">
<div class="menu">
<ul>
<li><a href="products.html" target="_self" >Products</a>
<ul>
<li><a href="seaisland.html" target="_self">Sea Island Collection</a></li>
<li><a href="grandoak.html" target="_self">Grand Oak Collection</a></li>
<li><a href="airflow.html" target="_self">Air-Flow </a></li>
<li><a href="pure.html" target="_self">Pure Visor</a></li>
<li><a href="coldweather.html" target="_self">Cold Weather</a></li>
<li><a href="fahrenheit.html" target="_self">Fahrenheit Collection</a></li>
<li><a href="caddietowels.html" target="_self">Caddie Towels</a></li>
<li><a href="woventowels.html" target="_self">Woven Towels</a></li>
<li><a href="sunprotection.html" target="_self">Sun Protection</a></li>
<li><a href="" target=""></a></li>
</ul>
</li>
<li><a href="embelishments.html" target="_self" >Embellishments</a>
<ul>
<li><a href="embroidery.html" target="_self">Embroidery</a></li>
<li><a href="wovenlabels.html" target="_self">Woven Labels</a></li>
<li><a href="medallions.html" target="_self">Medallions</a></li>
<li><a href="laserappliques.html" target="_self">Laser Appliques</a></li>
<li><a href="ballmarkers.html" target="_self">Ball Markers</a></li>
<li><a href="ultrasuede.html" target="_self">Ultra Suede</a></li>
</ul>
</li>
<li><a href="specials.html" target="_self" >Specials</a> </li>
<li><a href="whatsnew.html" target="_self" >Whats New</a> </li>
<li><a href="order.html" target="_self" >Order</a> </li>
<li><a href="contact.html" target="_self" >Contact</a> </li>
</ul>
</div>


body{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
background-color:#b7b7b7;
padding: 0px;
overflow:auto;
border: #0F0 solid 5px;
margin: auto;
}

.wrap{
margin:0 auto;
background-color:b7b7b7;
border:0px;
padding:0px;

}

.menu{
border:0px;
padding:0px;
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
background-color:#F0F;
}
.menu ul{
background:#b7b7b7;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

I've got a dropdown menu that works great in Firefox, Opera, Safari, and Chrome. In fact it ALMOST works in IE7, except for an annoying bug that happens when the person is using the drop down menu.

As the user moves the mouse partway down the menu, the menu will suddenly vanish, making the rest of the menu unusable.

The live website is he
http://www.a-1plumbing.us/100.html

Here's my menu CSS code: Code:

/* menu */
#navcontainer {padding-left:235px; margin:0; height:36px;}
#menu {
	position:relative; display:table;
	list-style-type:none;
	margin:0; padding:0;
	/* width:552px; */ 
	height:24px;
    z-index:5;
}
.menuitem {
	position:relative; display:table-cell; float:left;
	margin:0; padding:0;
	width:128.75px;
	overflow:hidden;
}

.menuitem ul {
	display:none; /* hide it first off */
	margin: 0; padding:0;
	list-style-type:none;
}
.menuitem li { margin:0; padding:0; overflow:visible;}
.submenu li { position:relative; z-index:10;}
	/* 2-class selector to have higher weight than ".menuitem ul" */
.submenu .subsubmenu {
	position:absolute; 
    top:0; 
	display:none;
}
.menuitem:hover {
	overflow:hidden;
	z-index:10;
    position:relative;
}
.menuitem:hover ul{
	display:block; 
}
.meunuitem:hover, .menuitem:hover ul{
    position:static; }

.submenu li:hover > .subsubmenu {
	display:block;
}
#menu a {
	display:block;
	margin:0; padding: 0.2em 0.5em;
	text-align:center;
	text-decoration:none;
	font: normal small-caps 1em Verdana, Arial, Helvetica, sans-serif;
	color:black ! important;
}
#menu a:hover { text-decoration: underline; color:black }
.menuitem a { background-color:transparent;}
#menu .menuitem ul a { background-color:#D71921; color:white ! important; font-size:0.8em ! important;}
#menu .menuitem ul ul a { background-color:darkblue; color:white ! important; font-size:0.8em ! important }
#pindex #mindex, #p100 #m100, #pcontact #mcontact, #ptips #mtips {color: #005D8B ! important;}
#menu .menuitem ul a#sm { background:#D71921 url('../images/seal_small.gif') no-repeat center left ! important; padding-left: 1.5em ! important; }
#phoneNum {display:none}
.submenu {border:1px solid white;}

Here is my HTML code: Code:

     <div id="navcontainer">
       <ul id="menu">
       	   <li class="menuitem"><a href="home.html" id="mindex"><strong>Home</strong></a></li>
	       <li class="menuitem"><a href="100.html"  id="m100"><strong>Guarantee</strong></a>
	    	<ul class="submenu">
			  <li><a href="./100.html#s_100">100% Guarantee</a></li>
			  <li><a href="./100.html#s_time">On Time or it's Our Dime</a></li>
			  <li><a href="./100.html#s_seal" id="sm">Technician<br />Seal of Safety</a></li>
			  <li><a href="./100.html#s_clean">Cleanliness</a></li>
		   </ul>
	      </li>
	    <li class="menuitem"><a href="tips.html" id="mtips"><strong>Tips</strong></a>
	    	<ul class="submenu">
			<li><a href="./tips.html#ttt">Toilet Trouble</a></li>
			<li><a href="./tips.html#tfd">Flooded Basement</a></li>
			<li><a href="./tips.html#twl">Water Leak</a></li>
			<li><a href="./tips.html#tbs">Blocked Sewer</a></li>
			<li><a href="./tips.html#tnhw">No Hot Water</a></li>
			<li><a href="./tips.html#tgl">Gas Leak</a></li>
			<li><a href="./tips.html#tcd">Clogged Drain</a></li>
		</ul>
	    </li>
	 <li class="menuitem"><a href="./contactus.html" id="mcontact" ><strong>About Us</strong></a>
	 	<ul class="submenu">
            <li><a href="./testimonials.html">Testimonials</a></li>
			<li><a href="./service_area.html#serve">Service Area</a></li>
			<li><a href="./feedback.html#feedback">Feedback Form</a></li>
			<li><a href="./contactus.html#phone">Phone</a></li>
			<li><a href="./contactus.html#address">Address</a></li>
		</ul>
	   </li>
       </ul>
     </div> <!-- end NAV container -->

I've tried using "position: static" in several divs, but this bug does not seem to be related to the other (and well known) IE7 positioning bugs.

Does anyone have any idea why the menus vanish as you mouse down them? It appears to be triggered if there is a DIV under the menu. For example, on this page ( http://www.a-1plumbing.us/tips.html ) the "Guarantee" drop down menu works quite well, because there is no div under neath it. (due to the improper floating IE7 bug, which I'll fix soon. :P )

Thanks for any input!
-Suthern101

im trying out zope, and im trying to add a THEME section to my site like the themes on PHPNuke.. i have allready designed all the diffrent css sheets.. lets call thes 1.css 2.css 3.css 4.css how would i refrence the sheets in my header, and create a dropdown menu that would change the css layout?