Adding drop down functionality to existing css menu

**mikeconner** · Jan 28, 2008 15:03

I have using a horizontal css menu that i really like. What I would like to do is add drop down functionality to it. I have tried coding this from scratch but have had a hard time since I am not an expert at drop downs. Can someone help me?

Here is the link the development page: http://20communications.com/menu.html

here is the added code for the drop down list: http://20communications.com/3col.html

CSS

Code:

  
/* Navigation */

.glossymenu{
	position: relative;
	padding: 0 0 0 34px;
	margin: 0 auto 0 auto;
	background: url(../images/menub_bg.gif) repeat-x; /*tab background image path*/
	height: 46px;
	list-style: none;
}

.glossymenu li{
	float:left;
}

.glossymenu li a{
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;	
}

.glossymenu li a b{
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
	color: #fff;
	background: url(../images/menub_hover_left.gif) no-repeat; /*left tab image path*/
	background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
	color: #fff;
	background: url(../images/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

/* Nav for sub menus */

.glossymenu ul
{position:absolute;
top: 0;
border: 1px solid black; /*THEME CHANGE HERE*/
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}

.glossymenu ul li ul li:hover {
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #678b3f;
border-bottom: 1px solid #678b3f; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: black;
visibility: visible;
}

HTML

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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>menu  dev</title>



<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

<link rel="stylesheet" type="text/css" href="styles/nav.css">

</head>
<body>

<div id="maincontainer">

<div id="topsection"><div class="innertube">
  <h1>Header</h1>
</div></div>

<ul class="glossymenu">
	<li class="current"><a href="#"><b>Who We Are</b></a></li>
     <ul> 
        <li><a href="#"><b>About 2|0</b></a></li> 
        <li><a href="#">The Team</a></li> 
        <li><a href="#">Consultative Approach</a></li> 
        <li><a href="#">PR in a Web 2.0 World</a></li> 
      </ul> 
	<li><a href="#"><b>What We Do</b></a></li>
         <ul> 
        <li><a href="#">Media Relations</a></li> 
        <li><a href="#">Analyst Relations</a></li> 
        <li><a href="#">SEO/SEM</a></li> 
        <li><a href="#">Event Management</a></li> 
        <li><a href="#">Business Development</a></li> 
        <li><a href="#">Fundraising</a></li> 
      </ul> 
	<li><a href="#"><b>Our Clients</b></a></li>	
    	<ul>
            <li><a href="#">Case Studies</a></li> 
      </ul> 
	<li><a href="#"><b>News</b></a></li>	
	<li><a href="#"><b>Contact</b></a></li>	
             <ul> 
        <li><a href="#">Employment</a></li> 
        <li><a href="#">Internships</a></li> 
      </ul> 
</ul>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> </div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>180px</em></b> </div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b> </div>
</div>

<div id="footer"></div>

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

**Erik J** · Jan 29, 2008 05:50

Welcome to SitePoint mikeconner

The menu looks nice!

Haven't got the time, but to start you off:

First, in the html, The li containing the sub-ul must have it's closing tag after the sub-list.

Then a couple of css declaration is missing like this for showing the sub-lists:

Code CSS:

.glossymenu li:hover ul {
    display: block;
}

For the hiding of the sub-lists you have choosed the rule "visibility: hidden;".
That should rather be "display:none" to work as expected.

At least you should see the sub-menu now. Hope it is to some help.

**mikeconner** · Jan 29, 2008 18:34

That got me off on the right foot. I will continue to explore this. If anyone has anymore advise I would appreciate it. Noticed that in IE6 the drop down lists are way off.

Thanks again!

**mikeconner** · Feb 5, 2008 15:21

So I was able to get the menu to work in all browsers except IE6 and 7. Does anyone know what code I should use to offset the drop down problem to correctly display in IE?

Also not as important but how could i make the top level navigation keep the background image on when you hover down the drop down?

Dev Site: http://20communications.com/dev/menu/

Current Code:

CSS - topnav.css

Code:

@charset "UTF-8";
/* CSS Document */

/*Navigation*/

#topnav {
	text-align: center;
	width: 830px;
	height: 46px;
	clear: both;
	margin: 0 auto;
	
}

#nav {
	padding: 0 0 0 155px;
	margin: 0 auto 0 auto;
	background: url(../images/menub_bg.gif) repeat-x; /*tab background image path*/
	height: 46px;
	list-style: none;
}

#nav a {
	display: block;
}

#nav li {
	text-align: left;
	float: left;
}

#nav li a {
	float: left;
	display: block;
	color: #006699;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 46px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;	
}

#nav li a b{
float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/}

#nav li a.current {
	color: #fff;
	font-size: 12px;
	background-color: #afbc21;
	background-image: url(../images/current_nav_arrow.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
	margin: 0;
}

#nav li a.current, #nav li a:hover{
	color: #fff;
	background: url(../images/menub_hover_left.gif) no-repeat; /*left tab image path*/
	background-position: left;
}


#nav li a.current b, #nav li a:hover b{
	color: #fff;
	background: url(../images/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}



#nav li a:hover {
	color: #fff;
	margin: 0;
}

#nav li ul {
	background-color: #006699;
	position: absolute;
	left: -999em;
	width: 135px;
	margin-top: 46px;
	list-style: none;
	margin: 46px 0 0 0;
	padding: 0;
	line-height: normal;
	border: solid #006699;
	
	}


#nav li ul a {
	color: #006699;
	background-color: #fff;
	background-image: none;
	width: 120px;
	padding: 0 0 0 15px;
	border-top: 1px solid #006699;
	text-align: left;
}

#nav li ul a:hover {
	color: #fff;
	background-color: #ccc;
	background-image: none;
	width: 120px;
	margin: 0;
}

#nav li ul a.first {
	border-top: 2px solid #006699;
}

#nav li ul a.last {
	border-bottom: 2px solid #006699;
}

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

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

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

HTML

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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>20 communications</title>

<link rel="stylesheet" type="text/css" href="styles/topnav.css">
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="http://www.klf.org/css/ie6.css" /><![endif]-->

<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;


}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>


<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

</head>
<body>

<div id="maincontainer">

<div id="topsection"><div class="innertube">
  <h1>Header</h1>
</div></div>

<div id="topnav">
<ul id="nav">
	<li><a class="current" href="#"><b>Who We Are</b></a>
     <ul> 
        <li><a class="first" href="#">About 2|0</a></li> 
        <li><a href="#">The Team</a></li> 
        <li><a href="#">Consultative Approach</a></li> 
        <li><a class="last" href="#">PR in a Web 2.0 World</a></li> 
      </ul> 
	</li>
	<li><a href="#"><b>What We Do</b></a>
         <ul> 
        <li><a class="first" href="#">Media Relations</a></li> 
        <li><a href="#">Analyst Relations</a></li> 
        <li><a href="#">SEO/SEM</a></li> 
        <li><a href="#">Event Management</a></li> 
        <li><a href="#">Business Development</a></li> 
        <li><a class="last" href="#">Fundraising</a></li> 
      </ul> 
    </li>
	<li><a href="#"><b>Our Clients</b></a>
    	<ul>
            <li><a class="first" href="#">Case Studies</a></li> 
      </ul> 
	</li>	
	<li><a class="first" href="#"><b>News</b></a></li>	
	<li><a class="last" href="#"><b>Contact</b></a>	
             <ul> 
        <li><a href="#">Employment</a></li> 
        <li><a href="#">Internships</a></li> 
      </ul> 
	</li>
</ul>
<!--Nav UL end tag-->
</div>
<div id="contentwrapper">

<div id="contentcolumn">
<div class="innertube">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut eros vestibulum eros aliquam faucibus. Suspendisse potenti. Vivamus massa neque, consectetuer vel, vulputate et, sagittis et, nisl. Sed condimentum, orci nec varius posuere, mauris lorem pulvinar magna, a pharetra mi mi vel urna. Pellentesque dictum dolor in lacus. Pellentesque viverra mi at dolor. Phasellus tortor. Proin arcu sapien, tempor nec, tincidunt ac, sodales gravida, mi. Proin nulla urna, porta id, bibendum id, vestibulum et, enim. Donec purus erat, placerat id, feugiat ut, faucibus nec, ante. Donec scelerisque tincidunt arcu.</p>
  <p>Aliquam erat volutpat. Donec lacinia, velit non viverra hendrerit, erat tortor pharetra diam, vel pretium neque risus vel tellus. Praesent interdum sagittis diam. Vivamus posuere odio et dolor. Quisque risus. Aliquam nulla. Nam lacus dui, hendrerit ac, vulputate sit amet, faucibus id, felis. Curabitur sit amet libero lobortis dolor porttitor vulputate. </p>
</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube">Left Column: <em>180px</em> </div>

</div>

<div id="rightcolumn">
<div class="innertube">Right Column: <em>190px</em> </div>
</div>

<div id="footer"></div>

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

**Paul O'B** · Feb 5, 2008 15:36

Hi,

You need to set position relative on the top level list and then set teh drop down to left:0 instead of left:auto.

Code:

#nav li {position:relative;}

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

**Paul O'B** · Feb 5, 2008 15:45

To keep the top level highlighted you will need to add this code at the end.

Code:

#nav li:hover a,
#nav li.sfhover a {
    background: url(http://20communications.com/dev/menu/images/menub_hover_left.gif) no-repeat left top; /*left tab image path*/
}

#nav li:hover a b,
#nav li.sfhover a b{
    color: #fff;
    background: url(http://20communications.com/dev/menu/images/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

#nav li:hover li a,
#nav li.sfhover li a{
        background: #fff;
}
#nav li:hover li a:hover,
#nav li.sfhover li a:hover {background:#ccc}

**mikeconner** · Feb 5, 2008 16:05

Originally Posted by Paul O'B

Hi,

You need to set position relative on the top level list and then set teh drop down to left:0 instead of left:auto.

Code:

#nav li {position:relative;}

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

That did it! I really appreciate the help!

Now my final question, how do I make the top level navigation keep the background image on when you hover down the drop down?

Thanks again!

**Paul O'B** · Feb 6, 2008 03:58

Now my final question, how do I make the top level navigation keep the background image on when you hover down the drop down?

See post #6 lol

User Tag List

Thread: Adding drop down functionality to existing css menu

Thread Tools

Display

Adding drop down functionality to existing css menu

Thanks Erik

Able to get drop down to work in Firefox and Safari, no luck in IE 6 & 7

great! that worked! Last question:

Bookmarks

Bookmarks

Posting Permissions