Horizontal Navigation Menus with Drop-Down Menus

Posted on 2011-10-26
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
    LVL 38

    Accepted Solution

    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" "">

    Author Comment

    You are right, Tommy.  Great.  Thank you.
    LVL 38

    Expert Comment

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

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Join & Write a Comment

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    755 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

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now