CSS Drop Down Menus

http://www.larreamma.com/kids_programs.html

On the PC the last 'About Us' menu overlaps the body content when it is expanded. Does not occur on Mac (FF, Safari, Chrome). Tried playing with 'z-index' but if that is the issue then I am not putting it in the right place.

Thank you in advance.

Im doing a project Located Here *** not work safe *** 96.0.176.55/login.php


Please look at the css and html

If you hover over with the mouse on the top navigation were you see Gallery you will notice there is a drop down menu with three separate choices or images...

The problem is when you move the mouse down to the second or third image the dropdown disappears.

Can someone please help?

Thanks

i am designing a website which requires drop down menus, the problem is that all the drop down menus are appearing at the same position, i want the top down menus to be located under the tab which was clicked. i have provided screenshots as well as some of the code.

html code:
Code:

<ol id="navMenu">		
		<li class="first"><a href="welcome.php">Home</a></li>


<li><a href="#" onmouseover="drop_down('sm1')" onmouseout="close_soon('sm1')">Reserve Resource</a></li>
		<div id="sm1" onmouseover="cancel_timeout()" onmouseout="close_soon('sm1')">
		<a href="#">yghvjhb</a>
		<a href="#"> jkhjb</a>
		</div>
		
<li><a href="#" onmouseover="drop_down('sm2')" onmouseout="close_soon('sm2')">Inventory</a></li>
		<div id="sm2" onmouseover="cancel_timeout('sm2')" onmouseout="close_soon('sm2')">
		<a href="#">Reserve Laptop</a>
		<a href="#">Reserve Tables</a>
		</div></ol>

css :

Code:

#navMenu{
	clear: left;
	background-color: #DA0000;
	padding: 0.5em 3em;
	padding-left: 8.5em; 
	margin: 0em;
}
#navMenu li{
	display: inline;
	margin: 0 0 0 0;
	border-right:medium #FFFFFF ridge;
	list-style: none;
	font-size: large;
	font-weight:bold;
	

}	
#navMenu a{
	text-decoration: none;
	padding: 0.25em 0.75em 0.25em 0.75em;
	color: #FFC1C1;
}
#navMenu li a:hover, #navMenu a:focus{
	background-color: #EE3322;
}
#navMenu li.first{
	margin-left: 0em;
}
#navMenu li.last{
	border-right: 0;
}


#navMenu div{visibility: hidden; display:block; position:absolute; background-color: #EE3322; background-position: inherit; margin-top:0.54em;}

#navMenu div a { position:relative; display:block; width:auto; white-space: nowrap; text-align: left; margin-right:2em; padding: 1em 1em;
}

#navMenu div a:hover{background-color: #EE3322; background: #EE3322;}

The css menu I have here on my site flickers when the mouse is moved from a parent category to the sub page menu. For example, if I hover on 'The Academy' link and move to the drop down menu, the sub menu disappears for a second. Any ideas how I can remedy this?

Can anybody help with a code to change the location of a dropdown menu to appear over the image on hover?? I have the code working perfect but can not get the location...

<a href="(will be page in site)" class="menuanchorclass" rel="anylinkmenu4"> <img src="images/kids-button.gif" width="260" height="263" alt="Kids" style="border-width:0" /></a>

If you look at the main menu(Home-About MCAEC-The Academy-Adult Education-Shining Star-Giving) on this page and hover over one of the parent categories you'll see issues with the positioning of the dropdown. I adjusted the margin and it looks fine in IE but the dropdown floats over the parent tabs in Firefox and Opera. Is there a way to adjust this so it's consistent in all browsers?
Here's the code for the dropdown ul ul li a:
Code:

#dropmenu { z-index:100; position:relative;}
#dropmenu .menu ul ul {z-index:99; margin:0; width:160px; background:url(images/bg_sub.png) top left no-repeat    !important; margin: 10px 0px 0px 0px ;  position: absolute; display:none; padding-bottom:10px !important; clear:both; padding-top:13px;}	
#dropmenu .menu ul ul li { line-height:inherit; height:auto; text-align:left; width:160px; text-align:left; line-height:1.69em;}
#dropmenu .menu ul ul li a{ font-weight: normal; color:#fff; font-size:13px; text-transform:none; }	
#dropmenu .menu ul ul li a:hover {  color:#edc951; font-weight:normal; }

Thanks

I can't get a drop down menu to display and don't know what I'm doing wrong. My guess is that other styles for this menu are interfering, but I've tried experimenting and it never works. Can anyone kindly assist?

Here's the CSS for the part of my navigation menu I'm working on (I know this is not the most streamlined):
Code:

#nav2 {	
	float: right;
	background-image: url(../2010site/graphics/nav2back.jpg);
	background-repeat: no-repeat;
	height: 32px;
	font-size: 14px;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	margin: auto;
	padding: 0px 30px 0px 0px;
}


#nav2 ul li {
	display: inline;
	list-style: none;
	background-image:url(../2010site/graphics/rednavdetail.jpg);
	background-repeat: no-repeat;
	margin: auto;
	padding: 0px 20px 0px 20px;
}

#nav2 a {
	color: #ffffff;
	margin: auto;
	padding: 0px 0px 0px 0px;

}

#nav2 a:hover {
	text-decoration: underline;
	margin: auto;
	padding: 0px 0px 0px 0px;
}

Then I'm trying to add a drop down to a nested list item within that navigation using
Code:

 li ul {display: none;} 
 li:hover > ul {display: block;}

But whenever I add that at the end of the nav2 styles, I can only see my nested menu that is supposed to appear during the hover. The other menu items beyond the nested UL don't appear at all.

Here's the html:
Code:

		<ul>   
    		  <li><a href="http://">Schedule</a>
                     <ul>
                    	<li><a href="http://">item one</a></li>
                	<li><a href="http://">item two</a></li>
                	<li><a href="http://">item three</a></li>
                     </ul>
                  </li>
    		  <li><a href="http://">Programs</a></li>
    		  <li><a href="http://">Events</a></li>
	          <li><a href="http://">Donate</a></li>
  	       </ul>

Hello there, im new to the forums. decided to register because im having a bit of a problem with CSS/HTML.(pretty inexperienced with css).

Heres what i wanna do: I have a social website where users can register and comment on things etc. I want to show a drop down menu as soon as users hover their mouse over a user name. So i took this script:

http://javascript-array.com/scripts...drop_down_menu/

And modified it. But i cant figure out how to make it work if the user name is surrounded with other text, it automatically creates a new line. Heres my code:

Code:

<html>
	<head>
		<style> 
			<!--


				#sddm a
				{	display: block;
				}



				#sddm span
				{	position: absolute;
					visibility: hidden;
					margin: 0;
					padding: 0;
					background: #3D97D6;
					border: 1px solid #5970B2}
					

					#sddm span a
					{	position: relative;
						display: block;
						margin: 0;
						padding: 5px 10px;
						width: auto;
						white-space: nowrap;
						text-align: left;
						text-decoration: none;
						background: #3D97D6;
						color: #FFF;
						font: 11px arial}

					#sddm span a:hover
					{	background: #2875DE;
						color: #FFF}

			-->
		</style>
		<script type="text/javascript">
			// Copyright 2006-2007 javascript-array.com

			var timeout	= 500;
			var closetimer	= 0;
			var ddmenuitem	= 0;

			// open hidden layer
			function mopen(id)
			{	
				// cancel close timer
				mcancelclosetime();

				// close old layer
				if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

				// get new layer and show it
				ddmenuitem = document.getElementById(id);
				ddmenuitem.style.visibility = 'visible';

			}
			// close showed layer
			function mclose()
			{
				if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
			}

			// go close timer
			function mclosetime()
			{
				closetimer = window.setTimeout(mclose, timeout);
			}

			// cancel close timer
			function mcancelclosetime()
			{
				if(closetimer)
				{
					window.clearTimeout(closetimer);
					closetimer = null;
				}
			}

			// close layer when click-out
			document.onclick = mclose; 

		</script>

	</head>



	<body>

		<span id="sddm">
			<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">This is a username</a>
			<span id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
				<img src="linktoav" alt="avatar" /> <font color="#ffffff"><b>Koen</b></font></a>
				<a href="#">Add as Friend</a>
				<a href="#">Send message</a>

				<a href="#">View Profile</a>
				<a href="#">Report</a>
			</span>		
		</span>

		this text comes after the username
	</body>

</html>

So i hope its clear what i wanna do, i always find it hard to explain things

I'm trying to make a simple css dropdown menu for one link in my nav bar.

The website is:
http://www.blanchetrocker.com/

If you hover above "Products", you should see a drop down, but a few of the below layers overlap it, including the flash object, which cuts off submenu items.

It seems to me that the rest of the page is overlapping the dropdown menu when you hover over it, so as soon as you leave the little box that you originally hover over to see the submenu, the rest of the menu disappears.

Also, none of the other links work yet either because I was just trying to get this dropdown to work initially.

Any help is greatly appreciated!

EDIT: I added a z-index to the hidden drop down menu and it seems to have fixed my problem. Was this a good solution or should I be doing something else?
EDIT #2: Scratch that it only seems to work in FF, and in IE the flash object blocks the menu still.

Hello everyone,

I have a drop-down menu that is currently working well.

The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.

I want the menu to "drop" down and to the left, so the right edges are aligned.

I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.

Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.

Thank you!

Here is the page: http://www.littlebuddymedia.com/site05/012.html



The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif



I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG

Here is my code:

Code:

.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}

Hello everyone, I need help with my drop down menu. There is a problem with CSS I think because it conflict with each other. I download both template and drop down menu script from somewhere else.

This is the original html template
http://www.styleshout.com/templates...ce11/index.html

This is my website with drop down menu added but it's not working
http://ghazifly.110mb.com/marketplace11/

I guess the template CSS might clash with the dropdownmenu CSS.

My index.html navigation code, I think theres nothing wrong with this code.
Code:

	<!-- navigation starts-->	
	<div  id="nav">
		<ul><ul id="jsddm">
			<li><a href="index.html">Home</a></li>
            
                         <li><a href="#">Drop Down Menu</a>
		<ul>
			     <li><a href="#">Other page</a></li>
			     <li><a href="#">jQuery Plugin</a></li>
			     <li><a href="#">Ajax Navigation</a></li>
		</ul>
	       </li>
            
			<li><a href="index.html">Archives</a></li>			
			<li><a href="index.html">About</a></li>
            			

</ul> 		
		</ul>
	<!-- navigation ends-->	

My website CSS top navigation code:
PHP Code:
/* Navigation */
#nav {
    clear: both;    
    padding: 0;            
}
#nav ul {
    float: left;
    list-style: none;
    background: #E4E4E4 url(nav.jpg) repeat-x;    
    
    padding: 0;    margin: 0 0 0 30px;
    height: 45px;
    display: inline;
    text-transform: uppercase;
}
#nav ul li {
    display: inline;
    margin: 0; padding: 0;
}
#nav ul li a {
    display: block;

    width: auto;
    margin: 0;
    padding: 0 15px;    
    border-right: 1px solid #dadada;
    border-left: 1px solid #fafafa;    
    border-bottom: none;
    color: #555;
    font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
    text-transform: uppercase;
    text-decoration: none;    
    letter-spacing: 1px;
}
#nav ul li a:hover, 
#nav ul li a:active {
    color: #326ea1;
}
#nav ul li#current a {    
    background: #DBDBDB url(nav-current.jpg) repeat-x;        
} 





My dropdownmenu CSS code:
PHP Code:
/* menu styles */
#jsddm
{    margin: 0;
    padding: 0}

    #jsddm li
    {    float: left;
        list-style: none;
        font: 12px Tahoma, Arial}

    #jsddm li a
    {    display: block;
        background: #324143;
        padding: 5px 12px;
        text-decoration: none;
        border-right: 1px solid white;
        width: 70px;
        color: #EAFFED;
        white-space: nowrap}

    #jsddm li a:hover
    {    background: #24313C}
        
        #jsddm li ul
        {    margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-top: 1px solid white}
        
            #jsddm li ul li
            {    float: none;
                display: inline}
            
            #jsddm li ul li a
            {    width: auto;
                background: #A9C251;
                color: #24313C}
            
            #jsddm li ul li a:hover
            {    background: #8EA344} 





Please help me with CSS. I spend like 10 hours experimenting with CSS but still not working,

So as you can see I only pasted the right code so it should be working but somehow both CSS interfere with each other and messed up my top navigation design. Also the dropdownmenu is showing horizontally. Any help is appreciated.

Thanks in advance

When you make a normal drop down menu in a form tag you get your text field and then that small grey box with the down arrow in it. Is it possible to change that grey colour to some other colour? Thanks.

I am learning to do drop down menus and so far, so good. What I cannot figure out is that in the drop downs the text seems to be indented. For example, if the text said "New information", the "New" part starts what appears to be a few spaces to the right. I did, most recently, set the text to be centered but it still does this. The effect is that if the text wraps to a second line, then the second line is further to the left. Looks odd to me but I can't figure out how to fix it.

Thanks for any help.

Richard

The code is here on an old Proboards test site: http://kayaoti.proboards.com/index.cgi

The menu in the black bar is just one I used from a free code. It works fine except when you hover over the items, the drop-down tabs are out of alignment. I'm not code-savvy enough to know how to make them drop straight down or how to move them so they look nicer, but I'm guessing someone here could help me out in that regard. How can I edit the code (shown below) or whatever else to make the drop-down tabs look better aligned with the menu items?

Code:

<style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 748px; background: #000; float: left; }  #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; }  #menu h2 { color: #000; background: #000; text-transform: uppercase; }   #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #000 #000 #000 #000; margin: 0; padding: 2px 3px; }   #menu a { color: #fff; background: #000000; text-decoration: none; }  #menu a:hover { color: #fff; background: #000; }  #menu li {position: relative;}  #menu ul ul { position: absolute; z-index: 500; }  #menu ul ul ul { position: absolute; top: 0; left: 100%; }  div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;}  div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}  </style> <!--[if IE]> <style type="text/css" media="screen">  #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; }  #menu ul li a {height: 1%;}   #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]-->   <div id="menu" style="position:relative; left:301px; top:483px;"> <ul><li><a href="http://dominionwolves.proboards.com/"><IMG SRC="http://i44.tinypic.com/24zb1vq.png" border="0"></a></li></ul>    <ul><li><IMG SRC="http://i43.tinypic.com/311lyra.png" style="position:relative; left:-40px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus">CSS Hover Navigation</a>         <ul>           <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>            <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>           <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>         </ul>       </li>     </ul>   </li> </ul>    <ul>   <li><IMG SRC="http://i39.tinypic.com/2cne1d5.png" style="position:relative; left:0px; top:2px;">     <ul>       <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>         <ul>           <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>            <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>           <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>         </ul>       </li>     </ul>   </li> </ul>    <ul>   <li><IMG SRC="http://i40.tinypic.com/24ffxu1.png" style="position:relative; left:55px; top:2px;">     <ul>       <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>       <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>         <ul>           <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>	             <ul>                <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>               <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>		               <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>               <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>               <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>			               <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>             </ul>            </li>         </ul>       </li>     </ul>   </li> </ul>       <ul>   <li><IMG SRC="http://i42.tinypic.com/15cerno.png" style="position:relative; left:65px; top:2px;">      <ul>       <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>       <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->         <ul>           <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a>             <ul>               <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>                <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>			               <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>               <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>               <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>			               <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>             </ul>           </li>          </ul>       </li>     </ul>   </li> </ul>							 </div>

i m having problem in displaying menu and sub menu. pls check the code.

HTML

<html>
<head>
<title> List of Hospital values
</title>
<link href="new.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="navbar">
<li><a href="##">IPD Maintenance</a>
<ul>
<li><a href="#">Registration</a></li>
<li><a href="#">Diagnose</a></li>
<li><a href="#">Laboratary Test</a></li>
</ul>
</li>


<li><a href="#">OPD Maintenance</a>
<ul>
<li><a href="#">Registration</a></li>
<li><a href="#">Diagnose</a></li>
<li><a href="#">Laboratary Test</a></li>
<li><a href="#">Admission</a></li>
<li><a href="#">Services </a></li>
</ul>
</li>

<li><a href="#">Donation Management</a>
<ul>
<li><a href="">Donor detail</a></li>
<li><a href="">Lab Test detail</a></li>
<li><a href="#">Donor Medication</a></li>
</ul>
</li>

<li><a href="#">Billing</a>
<ul>
<li><a href="#">IPD billing</a></li>
<li><a href="#">OPD billing</a></li>
</ul>
</li>

<li> <a href="#">Administrative Task</a>
<ul>
<li><a href="#">Manage user</a></li>
<ul>
<li><a href="#">Add User</a></li>
<li><a href="#">Delete User</a></li>
</ul>


<li><a href="#">Manage Doctors</a></li>
<ul>
<li><a href="#">Edit Doctor</a></li>
<li><a href="#">Add Doctor</a></li>
<li><a href="#">Delete Doctor</a></li>
</ul>

<li><a href="#">Manage Staff</a></li>
<ul>
<li><a href="#">Edit Staff</a></li>
<li><a href="#">Add Staff</a></li>
<li><a href="#">Delete Staff</a></li>
</ul>

<li><a href="#">Manage Departments</a></li>
<ul>
<li><a href="##">Add Department</a></li>
<li><a href="#">Delete Department</a></li>
<li><a href="#">Edit Department</a></li>
</ul>

<li><a href="#">Manage Rooms</a></li>
<ul>
<li><a href="#">Add Room</a></li>
<li><a href="#">Delete Room</a></li>
<li><a href="#">Edit Room</a></li>
</ul>
</ul>
</li>

<li><a href="#">Laboratory</a>
<ul>
<li><a href="">Laboratory detail</a></li>
<li><a href="">Lab Test detail</a></li>
</ul>
</li>

<li><a href="#">Organ Management</a>
<ul>
<li><a href="">Laboratory detail</a></li>
<li><a href="">Lab Test detail</a></li>
</ul>
</li>

<li><a href="#">Blood Management</a>
<ul>
<li><a href="">Blood Taken</a></li>
<ul>
<li><a href="">Hospitals</a></li>
<li><a href="">Donors</a></li>
</ul>
<li><a href="">Blood Endorsed</a></li>
<ul>
<li><a href="">Persons</a></li>
<li><a href="">Hospitals</a></li>
<li><a href="">IPD</a></li>
</ul>
</ul>
</li>

<li><a href="#">Emergency Services</a>
<ul>
<li><a href="">Estaff Detail</a></li>
<li><a href="">Add Estaff</a></li>
<li><a href="">Delete Estaff Detail</a></li>
<li><a href="">Edit Estaff Detail</a></li>
<li><a href="">Ambulance Detail</a></li>
<li><a href="">Ambulance Route</a></li>
</ul>
</li>

<li><a href="#">Inventory</a>
<ul>
<li><a href="">Suppliers</a></li>
<li><a href="">Purchase Receipt</a></li>
<li><a href="">Purchase return receipt</a></li>
<li><a href="">Sales Receipt</a></li>
<li><a href="">Sales Return Receipt</a></li>
</ul>
</li>
</ul>
</body>
</html>

AND THE CSS FILE IS AS FOLLOWING

#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }

#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}

#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }


WAITING FOR YOUR HELP

Hi all,

I am trying to style a drop-down menu. I'd like the hover state to have a transparent cut out on the menu... and the bottom of the drop down to be rounded. Probably makes more sense in the picture... which I am apparently not allowed to post. grrr. So think little triangle, but instead of being a different color, it is a transparent cut out. I've been banging my head into the keyboard for a couple of hours and can't seem to find the right way to tackle this. The problem is compounded by some of the menu items not have submenus. I'd like those to hover as if they were the bottom link in the drop down... ie, a notched edge and rounded bottom border. I would really appreciate anyone pointing me in the right direction here. Many thanks,

-helga

Hi there, im trying to make a website for a friend and im having a little diffuculty with my drop down menu

the site is here
bbk.ac.uk/~fsando01/watma/index.html

when you hover over the link entitled services in the global nav bar and proceed to hover down to the first submenu link which is abs repair, youll notice the background image i set as hover state for the services link disapears, i want it to stay there like they have got on marks and spencers website...

Please if anyone could help id be very grateful...

ive tried everthing i can think of

Does anyone know any particular libraries that would allow me to create a menu like:

www.ge.com

or

www.buell.com

I want to have a list of images appear and was hoping there was some free code out there rather than having to reinvent the wheel.

Thanks,
-Nate

Hi,

I have this drop down menu, but the parents are appearing under each other, instead of next to each other. I am trying to create a horizontal menu with sub items appear under the parent items.

this is my code:

PHP Code:
#menu2 {
width: 800px;
float:left
}

#menu2 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu2 a, #menu2 h2 {
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;
}

#menu2 h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu2 a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu2 a:hover {
color: #a00;
background: #fff;
}

#menu2 li {position: relative; float:left; width: 200px;}


a.mainlevel{background-color: #000000!important; display:inline-block}

#menu2 ul ul {
position: absolute;
z-index: 500;
float:left
}

#menu2 ul ul ul {
position: absolute;
top: 0;

}

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

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





Can anyone see anything wrong?

Many thanks

I'm playing around with CSS for the first time and have created a drop down menu that I would like to use for a site I have so any help would be greatly appreciated!!!

I've placed the menu on its own page at h t t p : / / aztechnogeek . somee . com / cssmenu . html for accurate coding (just view source). - sorry as a new user I guess I can't post hyperlinks.

What I would like to know how to do is when the cursor is moved down a menu list why the top hover attribute does not stay active??? Confusing I know but when you see the working menu you'll understand - I hope.

Any help would be great, thank you!!!

First let me start of with this for doing all this work for my drop down menu and then finding out that IE6 (apparently 50% of people browsing) doesn't support :hover except on anchor tags.

Here is my situation. I finally got my drop down menu working. However, there are three issues.

when I hover over the 'companies' menu item

1) the menu expands and pushes the 'blog' and 'contact' menu items further down the menu. I will say that I did not define a width on the li tags because this is actually for a wordpress theme and I wanted to allow for more pages that might be added later. I thought that by defining a width I would be more likely to fill up my menu container.

2) the child/nested li tags aren't under the parent li tag. Basically the sub-menu items show up to the bottom and right of the 'companies' menu item. I want them to show up directly underneath the parent menu item.

3) the longer sub-menu items (nested li tags) are not showing up on the same line. It's like there is a width that is causing them to overlap or go down to the next row. Not sure if that makes sense. I am wanting it to appear on one line no matter how long the menu item is.


I am sure that not defining a width on the li tags have something to do with some of these problems but I wanted others to take a look at it.

Code(validated) and styles below. Tried to keep it simple. there are two img files that I use as well but couldn't figure out how to upload those.

Any and all help from the CSS gurus will be greatly appreciated.

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drop Menu Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="access">
	<div id="menu-container">
		<div id="menu">
        
        
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>	
		<li><a href="#">Services</a></li>
		<li><a href="#">Compare</a></li>
		<li><a href="#">Companies</a>
		     <ul>
    			<li><a href="#">Company number one</a></li>
       			<li><a href="#">Company 2</a></li>
                       <li><a href="#">Company #3</a></li>
                       <li><a href="#">Company number 4</a></li>
       	             </ul>	
    	        </li>			
               <li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
    
    
		</div><!--menu-->
	</div><!--menu-container-->
</div><!--access-->
</body>
</html>

Code:

body{
	background-color: #999;	
	margin: 0;
}

ul,li {
	margin: 0;
}

div#access {
	margin: 0px;
	background-repeat: repeat-x;
	background-image: url(images/navbar-bckgrd.gif);
}

div#menu {
	height:1.5em;
	width:100%;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

div#menu a {
	color: #FFF;
	text-decoration: none;
}

div#menu-container {
	width: 974px;
	margin-right: auto;
	margin-left: auto;
	height: 27px;
	margin-top: 0px;
	margin-bottom: 0px;
}

div#menu li {
	list-style-type: none;
	color: #FFF;
	position: relative;
	float: left;
	height: 27px;
	/*width: 6em;*/
	font-size: 1.2em;
	line-height: 1em;
}

div#menu ul a {
       display:block;
       margin-right:1em;
       padding:0.2em 0.5em;
}

div#menu li a:hover {
	background-image: url(images/hover%20menu.jpg);
	background-repeat: repeat-x;
}

/*second teir*/

div#menu li ul {
	display: none;
	background-repeat: repeat;
	background-color: #CCC;
	margin: 0px;
}

div#menu li:hover ul {
	display: inline;
	float: left;
	width: 10em;
	height: auto;
}

div#menu li ul li {
	font-size: 0.9em;
	width: 7em;
	margin-left: 0px;
}

div#menu li ul li a {
	color: #000;
	margin-left: 0px;
}

div#menu li ul li a:hover {
	color: #FFF;
}

I have a drop down menu that is working fine in FF 3.5 but not in IE 7. Will you please have a look at it and help me find out where the conflict is? I am thinking it is a CSS issue but it may also be a javascript issue. The menu is he

http://bit.ly/42iVkG

and the menu script I used is he

http://bit.ly/4pvcXj

Thank you.

hi,

Am nearly finished my first website but this issue won't go away and it's driving me crazy.

www.leehughes.co.uk

As you can see I have a drop down menu at the top. The problem is a couple of my friends have reported trouble trying to access the sub menus. They can hover over the main choice but when they move the mouse down to select a link the links disappear. it's not like they can not be selected though if you press ctrl and go down then they can be selected.

Am so puzzled and so close to the end it's driving me crazy..

I'm simply trying to center a horizontal menu with a drop down.

The two methods I know of to align the list items in the top menu are 1) Code:

li { float: left; }

and 2) Code:

li { display: inline; }

.

The first method is needed for absolute positioning of the drop down list, but it left aligns the top menu.

The second method centers the menu (desired affect) but throws off the drop down placement because the it lacks the containing block.

Works, but left aligned: http://www.highgatecross.com/develo...ered_menu1.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Centered</title>
	
	<style type="text/css" title="style" media="all">
		#navigation {
			position: relative;
			margin: 0 auto;
			width: 800px;
			height: 30px;
			background: #9E9670 }	
			
		a {  
			font: 11px verdana, sans-serif;
			color: #54503B;
			text-decoration: none }
		
		#menu { 
			position: relative;
			margin: 0 auto;
			padding: 0; 
			width: 600px; 
			border: 1px solid #c00;
			text-align:center }
		
		#menu li { 
			float: left;
			list-style: none }
		
		#menu li a {
			display: block;
			padding: 7px 25px }
		
		#menu li a:hover {
			color: #F4E9AD }
		
		#menu li ul {  
			position: absolute;
			left: -1000em;
			z-index: 10 }
		
		#menu ul {
			float: left;
			width: 100px;
			list-style: none;
			padding: 0 }
		
		#menu ul li a {
			display: block;
			padding: 7px 10px;
			background-color: #C7BE8D;
			width: 100px }
		
		#menu ul li a:hover {
			background: #F4E9AD; 
			color: #54503B }

		#menu li:hover ul {
			left: auto }
	</style>
	
</head>
<body>
	<div id="navigation">
		
		<ul id="menu">
			<li class="top"><a href="Home">Home</a></li>
			<li class="top"><a href="About">About</a></li>
			<li class="top"><a href="Training">Training</a>
				<ul>
					<li><a href="Overview">Overview</a></li>
					<li><a href="Training_Schedule">Schedule</a></li>
					<li><a href="Training_Contact">Contact</a></li>
				</ul>
			</li>
			<li class="top"><a href="Events">Events</a></li>
			<li class="top"><a href="Contact">Contact</a></li>
		</ul>

	</div>	
</body>
</html>

Centers, but drop down is in the wrong place: http://www.highgatecross.com/develo...ered_menu2.html
Code:

#menu li { 
    display: inline; /* float: left */
    list-style: none }
		
#menu li a {
    display: block; /* delete this line */
    padding: 7px 25px }

Note: I normally have my closing } flush left, but trying to keep it clean for the forum. And yes, this is not IE compatible.

Question: How to I center the top menu and have the drop down placed correctly?

Thanks.

Hi guys,

Say I have a verticle menu, down the left hand side of my site.
I want it so when you hover over each link, there are additional links that fly out to the right - of course you got that by the thread name.

However, I'm having a bit of trouble, I don't know where to start really as many of the tutorials found are flawed in one way or another (that i've found).

Some manage to push the rest of the nav links under it down, so basically Im asking how do I manage to create a nav where the fly out menu manages to 'stick' at the top of all content (to the right and the links under), pure CSS.

Any additional tips on how to do this would be brilliant.

Thanks in advance,
Joe.

Hi, I'm very new, so please be gentle.

I don't know much about CSS but have been trying to make a drop down menu for my website. I managed to find the basics of what I wanted on a CSS site and know enough to have been able to tweak it (almost) to my requirements.

My problem is that the dropdown column widths are set and ideally I'd like them to adjust according to the amount of text which is to be displayed (I hope I'm making sense here), but I don't know how. I tried setting the width to automatic, but all that did was give me a huge column the width of my screen!

I've pasted the code and wonder if anyone would be good enough to tell me if it's possible to do what I want and if it is, could you point me in the right direction please?

Many thanks,

Alison

Quote:
.preload1 {background: url(three_1.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:#ffffff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

#nav li.top {display:block; float:left; height:38px;}

#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ffffff; text-decoration:none; font-size:15px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}

#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}

#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#6c3600; background: url(three_1.gif) no-repeat;}

#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}

#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #FE9A2E; padding:5px; border:1px solid #fe9a2e; white-space:nowrap; width:145px; height:auto; z-index:300;}

#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:145px; font-weight:normal;}

#nav li:hover ul.sub li a
{display:block; font-size:12px; height:18px; width:145px; line-height:18px; text-indent:5px; color:#FFFFFF; text-decoration:none;border:1px solid #fe9a2e;}

#nav li ul.sub li a.fly
{background:#FE9A2E url(arrow_over.gif) 135px 6px no-repeat;}

#nav li:hover ul.sub li a:hover
{background:#F5D0A9; color:#6C3600; border-color:#ffffff;}

#nav li:hover ul.sub li a.fly:hover
{background:#F5D0A9 url(arrow_over.gif) 135px 6px no-repeat; color:#6C3600;}

#nav li b {display:block; font-size:15px; height:18px; width:225px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:145px; top:-4px; background: #fe9a2e; padding:3px; border:1px solid #F5D0A9; white-space:nowrap; width:225px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#F5D0A9 url(arrow_over.gif) 130px 6px no-repeat; color:#6c3600; border-color:#fe9a2e;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#fe9a2e url(arrow_over.gif) 130px 6px no-repeat; color:#FFFFFF; border-color:#fe9a2e;}

I've got a drop down menu that has a hover feature. Problem is that as soon as you try to mouse over the options in the menu after they pop up on the hover on the title of the menu, the menu disappears. it does this in FF and Safari but in IE it works. weird, eh? any ideas?

I have the following web page -

www.brooksidetransmission.com/services.asp

If you scroll down you will see how I have presented the service categories.

What I am after is something like the following:

http://www.cssplay.co.uk/menus/drop_lists

Put your mouse over the United States. You will see a nicely formatted submenu with 3 columns.

I would like to duplicate something like this for my service categories.

I tried integrating this into my existing menu but got nowhere. I would like to know how some of you would do this? I thought to put a js function call on the existing <li> for the services link and then show sub menu, BUT I'd rather do this with the css hover.

If anyone has any suggestions they'd be appreciated.

T

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

Hi,

I have a horizontal css menu that looks great in FF but doesn't align correctly in IE. Is anyone able to help me with a fix for IE browsers?

HTML is

Code:

  <!-- Begin Navigation --> 
  <div id="navigation"> 
     <ul class="nav"> 
      <li><a href="default.html">HOME</a></li> 
      <li><a href="rangemaster/about.html">ABOUT RANGEMASTER</a> 
         <ul> 
          <li><a href="http://www.rangemaster.co.uk/index_535.htm" target="_blank">COMPANY HISTORY</a></li> 
          <li><a href="http://www.rangemaster.co.uk/index_65.htm" target="_blank">PRODUCTS</a></li> 
          <li><a href="brochure.html">REQUEST BROCHURE</a></li> 
          <li><a href="http://www.rangemaster.co.uk/ProdLocator.aspx" target="_blank">HOW TO BUY</a></li> 
          <li><a href="rangemaster/recipes.html">GREAT RECIPE IDEAS</a></li> 
        </ul> 
       </li> 
      <li><a href="falcon/about.html">ABOUT FALCON</a> 
         <ul> 
          <li><a href="falcon/history.html" target="_blank">COMPANY HISTORY</a></li> 
          <li><a href="http://www.falconappliances.com/290.htm" target="_blank">PRODUCTS</a></li> 
          <li><a href="brochure.html">REQUEST BROCHURE</a></li> 
          <li><a href="http://www.falconappliances.com/ProdLocator.aspx" target="_blank">HOW TO BUY</a></li> 
          <li><a href="falcon/recipes.html">GREAT RECIPE IDEAS</a></li> 
        </ul> 
       </li> 
      <li><a href="aga/about.html">ABOUT AGA</a> 
         <ul> 
          <li><a href="http://www.aga-web.co.uk/92_243.htm" target="_blank">COMPANY HISTORY</a></li> 
          <li><a href="http://www.aga-web.co.uk/89.htm" target="_blank">PRODUCTS</a></li> 
          <li><a href="brochure.html">REQUEST BROCHURE</a></li> 
          <li><a href="http://www.aga-web.co.uk/90_253.htm" target="_blank">HOW TO BUY</a></li> 
          <li><a href="aga/recipes.html">GREAT RECIPE IDEAS</a></li> 
        </ul> 
       </li> 
      <li><a href="rayburn/about.html">ABOUT RAYBURN</a> 
         <ul> 
          <li><a href="http://www.rayburn-web.co.uk/50.htm" target="_blank">COMPANY HISTORY</a></li> 
          <li><a href="http://www.rayburn-web.co.uk/44.htm" target="_blank">PRODUCTS</a></li> 
          <li><a href="brochure.html">REQUEST BROCHURE</a></li> 
          <li><a href="http://www.rayburn-web.co.uk/48.htm" target="_blank">HOW TO BUY</a></li> 
          <li><a href="rayburn/recipes.html">GREAT RECIPE IDEAS</a></li> 
        </ul> 
       </li> 
      <li><a href="survey.html">FIND YOUR PERFECT COOKER</a> 
       <li><a href="gallery.html">PHOTO GALLERY</a> 
       <li><a href="brochure.html">BROCHURE REQUEST</a> 
     </ul> 
   </div> 
  <!-- End Navigation -->

and CSS is

Code:

ul.nav,
.nav ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	height: 25px;
	width: 835px;
}

ul.nav{
	display: table;
    background: url(../_images/menu.gif);
}
ul.nav>li{
	display: table-cell;
	position: relative;
	padding: 6px 6px;
    color: #FFFFFF;
	text-align:left;
}

ul.nav li>ul{
	display: none;
	position: absolute;
	width: 150px;
	margin-left: -10px;
	margin-top: 6px;
}

ul.nav li:hover>ul{
	display : block;
}


.nav ul li a {
	display: block;
	padding: 2px 10px;
	color: #FFFFFF;
}

.nav a{
	text-decoration: none;
	color: #FFFFFF;
}

.nav ul li a{
	background-color: #000000;
	filter:alpha(opacity=80);
	opacity: 0.8;
	-moz-opacity:0.8;
}

.nav ul li a:hover {
	background-color: #B3191E;
}

.nav ul li a:active {
	background-color: #B3191E;
}

Many thanks...

I am sure this has been answered many times over, but I can't seem to find a solution that works. Sorry if I am re-posting something that has been asked before.
I am trying to add a drop down menu to a website I am working on, the menu works great in all browsers except IE7 (I haven't tried anything earlier).
In IE7, when I hover over the menu items they show the selections like they are supposed to, but when I move the cursor to select an item from the drop down it disappears.
I've tried many different things, but can't seem to get anything to work. Any help would be much appreciated.

Links to files:
simad.ca/wp/test/index.html
simad.ca/wp/test/nav.css

hi im using a CSS drop down menu, when my browser is refreshed it becomes disabled/stopsworking. im using IE browser. i got the css drop down list script from the web.

can someone help me please!

Hi I have the following menu worlks fine in firefox etc but will not work in I.E 7 any ideas why?

I have searched hi and low about i.e 7 problems but can't find the answer.

Code:

<html>
<head>
<title></title>
<style type="text/css">
#mainmenu{
 width: auto;
 height: 30px;
}
#mainmenu{
 margin: 0px;
 padding: 0px;
 z-index: 1;
}
#mainmenu li{
 float:left;
 position:relative;
 width: 140px;
 border: 0px solid #fff;
 list-style: none;
 background: #336699;
 font-family: verdana;
 font-weight: bold;
 font-size: 14px;
 padding: 3px 10px 3px 10px;
}
#mainmenu li a{
 background: #336699;
 text-decoration: none;
 color: #000;
}
#mainmenu li a:hover{
 color: #ff0000;
}
#mainmenu li ul{
 display:none;
 position:absolute;
 margin: 0px;
 width: 140px;
 padding: 0px;
 list-style: none;
 top: 20px;
 left: 0;
 z-index: 2;
}
#mainmenu li:hover ul {
 display: block;
 width: 140px;
}
#mainmenu .drop {
background: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px dashed #000;
}
#mainmenu .drop a{
background: #fff;
}
#mainmenu .dropb {
background: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
#mainmenu .dropb a{
background: #fff;
}
#mainmenu .dropt {
background: #fff;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px dashed #000;
}
#mainmenu .dropt a{
background: #fff;
}


</style>
</head>

<body>
<div id="mainmenu">
	<li>
		<a href="#">MENU 1</a>
		<ul>
			<li class="dropt"><a href="#">DROP DOWN 1</a></li>
			<li class="drop"><a href="#">DROP DOWN 2</a></li>
			<li class="dropb"><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 2</a>
		<ul>
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 3</a>
		<ul>
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
</div>

</body>
</html>

I am looking for help with creating a CSS drop down menu. I found an example online, but I am unable to make it work for my site. I am trying make a horizontal drop down menu, but the menu is being displayed vertically, can someone please help.
Thanks

Below are my codes:

Code:
CSS

/********************** Header ***************************/


#header {
	margin: 0px 0px 0px 0px;
	background-image:url(images/header.jpg);
	width:717px;
	height:288px;
	position:relative;
}
#header-container
	{
	position: absolute;		
	top: 1em;
	left: 1em;
	}

#header ul{
	background-color:#000000;
	width:711px;
	border: 3px solid #FFFFFF;
	display:block;
	top:255px;
	position:absolute;
	margin: 0px 0px 0px 0px;
	height:22px;
	padding:5px 0px 0px 0px;
	text-align:center;
}
#header a
	{
	text-align: center;
	display:block;
	border: 1px solid #555;
	white-space:nowrap;
	margin:0;
	padding: 0.3em;
	}
	
#header a:link, #header a:visited, #header a:active	/* menu at rest */
	{
	color: white;
	background-color: #000000;
	text-decoration:none;
	}
	
#header a:hover						/* menu on mouse-over  */
	{
	color: #000000;
	background-color: #CCCCCC;
	text-decoration:none;
	}	
	
#header a.top_parent, #header a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	background-image: url(navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}
	
#header a.parent, #header a.parent:hover 	/* attaches side-arrow to all parents */
	{
	background-image: url(nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}

#header ul
	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:9em;	/* width of all menu boxes */
	/* NOTE: For adjustable menu boxes you can comment out the above width rule.
	However, you will have to add padding in the "#menh a" rule so that the menu boxes
	will have space on either side of the text -- try it */
	}

#header li
	{
	position:relative;
	min-height: 1px;		/* Sophie Dennis contribution for IE7 */
	vertical-align: bottom;		/* Sophie Dennis contribution for IE7 */
	}

#header ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	}

#header ul ul ul
	{
	top:0;
	left:100%;
	}

div#header li:hover
	{
	cursor:pointer;
	z-index:100;
	}

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

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

Code:
HTML

<div id="container">


	<div id="header">
			<ul>
				
			<li><a href="index.html">Home</a></li>
			
			
			<li><a href="fbstats.html">Football</a></li>
				
			<li><a href="bbstats.html">Baseball</a></li>
			<li><a href="bio.html">Biography</a></li>

			<li><a href="televison.html">Television</a></li>
			<li><a href="cdbuy.html">CD/Book</a></li>
			<li><a href="video.html">Videos</a></li>
		</ul>
	</div>

I am really stuck on this, can someone guide me to a tutorial or a working double row menu bar that works for both IE and Firefox. I have made several attempts on Spry and CSS but to no avail and no-one has been able to rectify it. Theres always something not going right on both browsers with the double row drop down menu bars I have attempted.

The double row drop down menu bar looks like this:
[menu1][menu2][menu3]
[menu4][menu5][menu6]
............................[menu6a]
............................[menu6b]

I am working on a web page, and am all but done, but I am having one final problem with it. The css drop down menu works fine except for one issue... when you scroll down on one of the pages, and then go to the css menu bar a gap appears between the menu bar and the sub menu options that drop down.

How can I get this menu to always drop down DIRECTLY below the main menu bar without the gap?


___________


Here is the SpryMenuBarHorizontal css

_____________

@charset "UTF-8";

/* SpryMenuBarHorizontal css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
padding-left: 0px;
padding-right: 0px;
position: relative;
background-image: xxx;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug:
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
position: relative;
text-align: center;
cursor: pointer;















width: ;
float: left;
background-image: xxx;
padding-left: 0px;
padding-right: 0px;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8em;
position: fixed;
left: -1000em;
background-image: xxx;
padding-left: 0px;
padding-right: 0px;

}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 9.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;

}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 0px solid #000000;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
color: #2C2A2B;
text-decoration: none;
padding-left: 24px;
padding-right: 24px;
padding-top: .5em;
padding-bottom: .5em;
background-repeat: repeat;
background-image: xxx;

}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
color: #FFF;
display: block;

}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
color: #FFF;
display: block;

}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: XXX;
background-repeat: repeat;

}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: XXX;
background-repeat: repeat-x;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{

}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: xxx;
background-repeat: no-repeat;
background-position: 95% 50%;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}


Thank you so much for your help, I have a deadline that is coming up very quick... I'd appreciate any help I could get.

_______________

my css is sloppy , but at this point with the deadline approaching, I really just need to get this to work properly, and I have a feeling its as simple as a few lines of code changed....

I've been working on this issue for nearly 20 hours ... about 10 hours ago I had things working only to realize I hadn't committed my code, and now I have no idea how to get back to where I was (as my process was just hitting and missing).

I'm working on installing a vertical spry dropdown menu at: www.leonianj.gov using the drupal framework.

You can see by visiting the site that the drop-down menus are positioned underneath the remaining content on the page (not flash).

I've manipulated pretty much all z-index values (in as many combinations as I could figure).

Of course the menu is fine in FF 2+ and Safari 2+

If anyone out there could point me in the right direction it would be GREATLY appreciated!

Regards,
Justin

Hi all!

I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to.
The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up

You can check out the site at:
cleopatra.gebodesign.no

The files are at:
gebodesign.no/cleopatra/menu.php
gebodesign.no/cleopatra/stylesheet.css

Thanks for any input

Hello all,

I have a site up with a menu that I need to replace. Before I do this, i need a bit more control over the different lists that make up the drop down menus.

My goal is to have a unique ID for each list, that allows me to change the width and the position relative to its parent, or trigger. I am not sure what the CSS rules would be to call out each particular list after it has been given a unique identifier.

Please see the code below which provides 2 menu lists and what i feel is the related CSS Code. If this code is not all that is needed, please let me know and I can post more of it. Thanks in advance, i know its a simple thing, but after experimenting, i have not been able to get the results I need.

Menu Code

Code:

 <ul id="p7menubar">
            
    <li id="about"><a  class="trigger" href="../about/index.html">About Us</a>
    <ul>
    
        	<li><a href="../about/distinctions.html">Distinctions</a></li>
        	<li><a href="../about/whytmg.html">Why Choose The Monitor Group</a></li>
        	<li><a href="../about/corevalues.html">Mission + Core Values</a></li>
        	<li><a href="../about/qualifications.html">Unique Qualifications</a></li>
        	<li><a href="../about/ourclients.html">Our Clients</a></li>
        	<li><a href="../about/professionals.html">Our Professionals</a></li>
        	<li><a href="../about/faq.html">FAQ's</a></li>
        	<li><a href="../about/careers.html">Careers</a></li>
       		<li><a href="../about/contact.html">Contact</a></li></ul></li>
            
    <li id="services"><a class="trigger" href="../clientservices/index.html">Client Services</a>
    <ul>
      		<li><a href="../clientservices/IWMP.html">Integrative Wealth Management</a></li>
     		<li><a href="../clientservices/invplanning.html">Investment Management</a></li>
      		<li><a href="../clientservices/blueprint.html" >Personal Financial Blueprint</a></li>
       		<li><a href="../clientservices/estateplanning.html">Wealth Transfer + Estate Planning</a></li>
      		<li><a href="../clientservices/taxplanning.html">Wealth Enhancement, Tax Planning and Reporting</a></li>
       		<li><a href="../clientservices/protection.html">Wealth Protection</a></li>
       		<li><a href="../clientservices/philanthropy.html">Philanthropic Giving</a></li>
      		<li><a href="../clientservices/fees.html">Fee Schedule</a></li></ul></li>

CSS Code:

Code:

/*Class assigned to those Root-Level links that have associated Sub-Menus. The top and bottom padding assigned this element must be the same as that assigned to the p7menubar a element. The right padding is increased
to accomodate the display of background image depicting a downward pointing arrow.*/

#p7menubar a.trigger {
	padding: 5px 16px 5px 10px;
	background-image: url(../p7_cssexpress/p7exp/images/p7PM_dark_south.gif);	background-repeat: no-repeat;
	background-position: right center;	
}


/*The Root-Level list items. Floating left allows
them to appear horizontally. Width is for IE5 Mac. The last rule in this style sheet will set the width for this element to auto for all other browsers - hiding it from IE5 Mac. The width is proportional.As you add and edit root menu items, you will need to test this width to ensure it is wide enough to accomodate all text.*/

#p7menubar li {	float: left;
	width: 8em;
}



/*Sets width for Sub-Menu box and the List Items inside - in proportional em units. This allows the sub-menu width to expand if users resize the text in their browsers.
*/

#p7menubar li ul, #p7menubar ul li  {
	width: 16em;
	text-align: left;}

/*
The sub-menu links. We set color and turn off the right border, which would otherwise be inherited from the root link rule. We set top and bottom padding less than the root items and increas the left padding to indent the sub-menu links a small amount in from the root links.*/


#p7menubar ul li a  {
	color: #006600;
	border-left: 1px solid #333;
	padding: 3px 12px 3px 15px;
	border-right: 0px;
	border-bottom: 1px solid #333333;
}


/*
Sub-Menu Unordered Lists describes each dropdown sub-menu grouping. Positioned Absolutely to allow them to appear below their root trigger. Set to display none to hide them until trigger is moused over.Background Color must be set or problems will be encountered in MSIE. Right and bottom borders are set to simulate a raised look. A gradient background image is assigned.*/

#p7menubar li ul {
	position: 

absolute;
	display: none;
	background-color: #ffffff;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	color: #006600;
}

So I'm a student working on my first real project. I've done Suckerfish drop-downs before, but I'm having trouble doing them with graphic text instead of system text. The image replacement works fine on the first level, but the nested li's just repeat the image of the main li.

For example, the main nav item with the drop-down is "Our Coffee". In the drop-down menu instead of having the different images for the corresponding links, "Our Coffee" is repeated.

Here's a selection of my code where I think the problem is happening:

Code:

<div id="nav">
   	<ul id="dd">
       	<li id="hm"><a href="menu.html">Menu</a></li>
        <li id="au"><a href="about_us.html">About Us</a></li>
        <li id="oc"><a href="#">Our Coffee</a>
        	<ul>
            	<li id="oc_dd_ko"><a href="oc_kona.html">Kona</a></li>
            	<li id="oc_dd_ma"><a href="oc_maui.html">Maui</a></li>
            	<li id="oc_dd_ka"><a href="oc_kauai.html">Kauai</a></li>
            </ul>
        </li>
        <li id="os"><a href="os_hy.html">Our Stores</a></li>
        <li id="ols"><a href="online_store.html">Online Store</a></li>
        <li id="oct"><a href="our_culture.html">Our Culture</a></li>
    </ul>
</div>  

Code:

#nav ul li ul li a {
	display: block;
	height: 0px;
	overflow: hidden;
}

#dd li#oc a {
	display: block;
	width: 95px;
}

#dd li#oc {
	float: left;
	width: 95px;
}

#dd li#oc ul {
	position: absolute;
	width: 95px;
	left: -9999px;
}

#dd li#oc:hover ul {
	left: auto;
}


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

li#oc ul li a {
	height: 0px;
	display: block;
	overflow: hidden;
}

#oc_dd_ko a {
	background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
	padding-top: 13px;
	width: 58px;
}

#oc_dd_ko a:hover {
	background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
	padding-top: 13px;
	width: 58px;
}

#oc_dd_ma a {
	background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
	padding-top: 15px;
	width: 58px;
}

#oc_dd_ma a:hover {
	background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
	padding-top: 15px;
	width: 58px;
}

#oc_dd_ka a {
	background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
	padding-top: 16px;
	width: 58px;
}

#oc_dd_ka a:hover {
	background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
	padding-top: 16px;
	width: 58px;
}

#dd, #dd ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

Any suggestions would be appreciated.

I have used suckerfish dropdown menu on this site herel

but in IE7 the 1st level links are to far left on the services menu.
Fine in firefox.

It will be something i missed

here is the css i used on the menu

Code:

/* Start Menu  */
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	
}

#nav a {
	display: block;
	width: 90px;
	text-decoration:none;
	color:#000000;
	font-size:11px;
	font-weight:400;
}

#nav li {
	float: left;
}

#nav li ul {
	position: absolute;
	width: 90px;
	left: -999em;
	background-color:#CCCCCC;
	
}

#nav li:hover ul {
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}
		
#menu1 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu2 {
		float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu3 {
	float: left;
	width: 90px;
	padding-top:10px;
	font-size:11px;
	text-align:center;
	}
	
			#menu4 {
	float: left;
	width: 90px;
	padding-top:10px;
	font-size:11px;
	text-align:center;
	}
	
			#menu5 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
		
				#menu6 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
		#menu7 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu8 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu9 {
		background-image:url(menu6.jpg);
		background-repeat:no-repeat;
	float: left;
	width: 220px;
	height:33px;
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}

/* End Menu */

this is doing my head in i just can't see it.

I'm using the suckerfish drop down method to get ie6 to work.

For some reason, the drop down portion of the the menu pushes out to the right of its parent by about 26px.

I have #menu li ul {width:213px}

I've noticed that if I delete this width, Firefox and IE7 behave the same way as IE6 pushing the menu outside the parent and moving the elements of the page.

I'm having to use position:relative; left:-36px; padding-left:10px to get the sub menu to line up in the first place.

This all tells me that there is something forcing the sub menu to be wider than it should be, the difference being that in the later browsers, I can tell it to behave.

Here's the menu stylesheet:

Code:

#menu {
	width:860px;
	height:80px;
	position:relative; margin:auto;
	border:solid 1px #000; border-bottom:none;
	list-style:none;
	z-index:6000;
	}
#menu ul {
	list-style:none;
	padding: 0;
	margin: 0;
	float:left;
	}
#menu li.help, #menu li.resources, #menu li.about, #menu li.apply {
	margin: 0;
	height:80px;
	float:left;
	list-style:none;
	}
#menu li.help a, #menu li.resources a, #menu li.about a, #menu li.apply a {
	height:38px;
	width:215px;
	display:block;
	padding:12px 0px 0 0px;
	text-align:center;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:18px;
	font-variant:small-caps;
	background:url(../images/navigation.jpg) no-repeat;
	}
#menu li.apply a {
	background:url(../images/navigation.jpg) -645px 0 no-repeat;
	height:0; 
	overflow:hidden;
	padding-top:80px;
	}
#menu li.help a:hover, #menu li.resources a:hover, #menu li.about a:hover, #menu li.apply a:hover {
	text-decoration:none;
	height:38px;
	background:url(../images/navigation-hl.jpg) no-repeat;
	font-variant:small-caps;
	}
#menu li.apply a:hover {
	background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
	height:0; 
	overflow:hidden;
	padding-top:80px;
	}
body.he #menu li.help a, body.re #menu li.resources a, body.ab #menu li.about a, body.ap #menu li.apply a	{
	background:url(../images/navigation-hl.jpg) no-repeat;
	}
body.ap #menu li.apply a {
	background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
	}
	


#menu li ul {
	width:213px;
	display: none;
	z-index:7000;
	border:solid 1px #000; border-top:none;
	background:#bbbcef;
	}
#menu li.help ul li a, #menu li.resources ul li a, #menu li.about ul li a, #menu li.apply ul li a{
	background-image:none;
	color:#333;
	border-bottom:solid 1px #999;
	padding:5px 0 5px 10px;
	font-size:12px;
	height:auto;
	margin:0;
	text-align:left;
	position:relative; left:-36px;
	width:203px;
	}
#menu li.help ul li a:hover, #menu li.resources ul li a:hover, #menu li.about ul li a:hover, #menu li.apply ul li a:hover {
	background:#ffeecd; background-image:none;
	color:#000;
	border-bottom:solid 1px #999;
	padding:5px 0 5px 10px;
	font-size:12px;
	height:auto;
	position:relative; left:-36px;
	width:203px;
	}
#menu li.help:hover ul, #menu li.resources:hover ul, #menu li.about:hover ul, #menu li.over ul { 
	display: block; 
	}