Horizontal Navigation Menus with Drop-Down Menus

Posted on 2011-10-26
Medium Priority
Last Modified: 2012-06-27

I bought the book CSS Cookbook, it has the code to build horizontal navigation menus with drop-down menus.  It works well without drop-down code,  It can list horizontal navigation menu, however, it doesn't drop down when I added the code for drop-down menu.   I don't know what the problem is.  Please help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="menustyle.css" rel="stylesheet" type="text/css" />


<div id="navsite">
 <p>Site navigation:</p>
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/archives/">Archives</a></li>
  <li><a href="/writing/">Writing</a>
    <!-- below code is for drop down menu --->
        <li><a href="/writing/releasing-css">Releasing CSS</a></li>
        <li><a href="/writing/css-cookbook">CSS Cookbook</a></li>
     <!-- above code for drop down menu -->       
  <li><a href="/speaking/">Speaking</a></li>
  <li><a href="/contact/">Contact</a></li>


CSS Code:  
#navsite p {
 display: none;
#navsite ul {
    width: 100%;
    float: left;
 padding: 0;
 margin-left: 0;
 border-bottom: 1px solid #778;
 font: bold 12px Verdana, sans-serif;
#navsite ul li {
 list-style: none;
 margin: 0;
 float: left;
#navsite ul li a {                                        /* To create the look of the folder tab, use the border property */
 padding: 12px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background-color: #666;
 text-decoration: none;
 background-image: url(title-glass.png);
 background-position: 50%;
 background-repeat: repeat-x;
 display: block;
 width: 7em;
#navsite ul li a:link {                                /* Set the color of the text links and rollover states */
 color: white;
#navsite ul li a:visited {
 /*color: #667;*/
 color: black;
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
 color: #000;
 background-color: #aae;
 border-color: #227;
#navsite ul li a#current {                               /* Define how current link appears. */
 background-color: white;
 border-bottom: 1px solid white;
color: #448;
margin-bottom: -1px;
#navsite ul li a#current:hover {
 background-image: url(title-glass.png);
 background-position: 50%;
 background-repeat: repeat-x;

/********* this code is for drop down menu, but it doesn't work**********************/
#navsite ul li ul {
 position: absolute;
 width: 7em;
 left: -999em;
 float: none;
 border-bottom: none;
#navsite ul li:hover ul {left: auto;}
#navsite ul li ul li a {
 background: #999;
 border: 1px solid black;
 margin-top: 4px;

*/ /************* the end of drop down menu code */

.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
/* for IE6 */
* html .clearfix {
 height: 1%;
/* for IE7 */
*:first-child+html .clearfix {
 min-height: 1px;

Question by:5281
  • 2
LVL 38

Accepted Solution

Tom Beck earned 2000 total points
ID: 37033905
It seems to work fine in Firefox, Chrome, Safari and Opera. In IE the sub menu doesn't drop down and I think it's because your docktype is incomplete. Try replacing with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Author Comment

ID: 37034091
You are right, Tommy.  Great.  Thank you.
LVL 38

Expert Comment

by:Tom Beck
ID: 37034227
You're welcome. Thanks for the points.

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question