CSS - Drop Down Menu Tutorial That Has A Good Description Of How It Works

Amazon has an amazing menu, the one that says 'see all 41 product categories'. All the options pop out and there is no need to continously click to find out what you are looking for. Genius!

Is this basic? Can anybody point me in the right direction for a tutorial?

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;
}

Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html
is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like:


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e.


Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e.


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting.

Here is the source for the above:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>

<style type="text/css">

ul li ul {display:none;list-style-type: none;}

#myNav li a:hover {
color: blue;
}

#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}

#myNav { list-style-image: url(page.GIF); }
</style>

<script type="text/javascript">
<!--
function initNav() {
	var navObj = document.getElementById('myNav');
	var ulCollection = navObj.getElementsByTagName('li');
	for (var loop = 0; loop < ulCollection.length; loop++) {
		if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
			/* we have an LI that contains a UL */
			if (ulCollection[loop].getElementsByTagName('span').length > 0) {
				/* there is at least one SPAN tag present */
				ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
			}
		}
	}
}
window.onload = initNav;
//-->
</script>

</head>
<body>
<ul id="myNav">
	<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
	<li><span></span><a href="http://www.google.com">Google.com</a>
		<ul>
			<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
			<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
			<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
			<ul>
			   <li>*3*</li>
			   <li>*4*</li>
			</ul>
</li>
		</ul>
	</li>

	<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
		<ul>
			<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
			<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Any help is really appreciated thanks.

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; } 
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; } 
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; } 
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; } 
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; } 





PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul> 





<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page

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!

I am trying to make a menu on my website and it works well on internet explorer 7. I went onto firefox to check it and it is not working so great. The link is:-alrwritingservices.co.uk.

The css:-

Code:

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(backygnav.gif) center center repeat-x;
list-style
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: #FFFFFF; font-weight: bold;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(backgnavhover.gif) center center repeat-x; text-decoration: none; font-weight: bold; float: left;
}

The html:-

Code:

<ul class="solidblockmenu">
<li><a href="index.php" class="current">Home</a></li>
<li><a href="about.php">About Me</a></li>
<li><a href="samples.php">Samples</a></li>
<li><a href="manual.php">Manual</a></li>
<li><a href="testimonials.php">Testimonials</a></li>
<li><a href="quote.php">Get A Quote</a></li>
<li><a href="faq.php">FAQ Section</a></li>
</ul>
<br style="clear: left" />

How would i make it look better in firefox and would would be the hack for internet explorer. Is theer any help available on the internet about this?

Many thanks in advance, Stevo

I got my css menu to work in Firefox and have it to show the way I want it to, but now in IE it just shows up as a list of course, the experienced people will no that by looking at the code which I hope you can help me out by fixing it, so here it is dont laugh.

Code:

ul#menu{
	margin:0;
	padding:0;
	list-style-type:none;
	width:790px;
	display:block;
	height:40px;
	text-transform:uppercase;
	font-size:13px;
	background:transparent url("images/black.jpg") repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
}
ul#menu li{
	display:block;
	float:left;
	margin:0;
	pading:0;
	border-right:1px solid #ffffff;
	}
ul#menu li a{
	display:block;
	float:left;
	color:#ffffff;
	text-decoration:none;
	padding:12px 20px 0 20px;
	height:28px;
	}
ul#menu li a:hover{
	background:transparent url("images/blue.jpg") repeat-x top left;	
	}

Thank You

the menu at the site I am building myself at:
http://sphinxgaming.ath.cx/

Works perfectly in firefox, all links are missing on the menu in IE

And the validator gives me some very strange errors (document type does not allow element "BODY", for example)
http://validator.w3.org/check?uri=h...lidator%2F1.654

Any ideas?

By the way, I have tried 3 different DOCTYPES, with no better results

I working on a CSS to display a round-shouldered-tab menu. My result is acceptable:
http://rickduley.webs.com/roundShoulderTabMenu.jpg
except for the fact that the tabs are set below the menuBar on which the are supposed to display.

I have run out of ideas. Would someone please set me on the right path?
Thanks.

P.S.: the code is at
http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb -
you have to delete the 'dot key gee bee' suffix.

I'm starting to get a headache trying to figure out what the problem is with Firefox on this issue... A highlighted menu should drop down over the div beneath it. It works fine in Opera & IE, but Firefox gets moody about it.

geekville.net

Any ideas?

Thanks!

EDIT: Nevermind, I made it work. 2am is a good time to stop writing css.

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 have made a menu which I love because it is the layout that I want.
However, I am having problems with the menu when I try to add a "Drop Down" feature to it.

The menu I currently have and use is:
http://www.gc40.com/menu2.html



I would like to turn some of the tabs like services into a drop down menu. I found a script that was a drop down menu and I tried to customize it to match my original menu but failed.
The script that I found is: http://www.gc40.com/menu1.html

Is there anyone that can customize http://www.gc40.com/menu2.html for me using http://www.gc40.com/menu1.html so that I can have drop down capabilities?

I would really appreciate the help. Thanks guys.

I had made a site with a pure CSS drop down menu (using hover). The problem is that it works fine in the various browsers... IE6, FF1.x, NS, Opera... But it doesn't work in IE7. Anyone know a work around for using the hover as a drop down with IE7? I can paste the code later (when I get back to where my site is) if needed.

Thanks for any input.

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