CSS Horizontal drop down menu

Hi friends,

I’m just beginning to learn html/css using some of site-point books and online tutorials. Please forgive me if my request is not comply with any guideline of this forum.

I’ve been trying to design horizontal drop-down menu using images in css/html for last one week. I hate to say that, I couldn’t achieve what really I want to.

I don’t know how to hide the drop-down items and make it visible when hover.

I read lots of tutorials but I couldn’t understand anything.

Here I’ve posted my html and css mark-up. Please help me friends.


Html 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" xml:lang="en" lang="en">
<head>
   <title>Sample navigation</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 <body>
  <div id="navigation">
    <ul>
      <li><a href="home.html" class="button1"></a></li>
      <li><a href="about.html" class="button2"></a></li>
        <ul>
          <li><a href="overview.html" class="button2a"></a></li>
        </ul>
      <li><a href="product.html" class="button3"></a></li>
        <ul>
          <li><a href="product1.html" class="button3a"></a></li>
          <li><a href="product2.html" class="button3b"></a></li>
          <li><a href="product3.html" class="button3c"></a></li>
          <li><a href="product4.html" class="button3d"></a></li>
        </ul>
      <li><a href="service.html" class="button4"></a></li> 
      <li><a href="contact.html" class="button5"></a></li>
    </ul>
  </div> 
 </body>
</html>

css :

body {
      font-family:Verdana, Helvetica, Arial, sans-serif;
      font-size:13px;
      min-width:1000px;
      line-height:125%;
      background-color:#FFFFFF;
      padding:0;
      margin:0;
       }
       

#navigation {
              position:absolute;
              top:135px;
              left:20px;
              width:960px;
              height:45px;
              margin:0;
              padding:0;
                 }

#navigation li {
                 display:inline;
                   }

#navigation a.button1 {
                 float:left;
                 width:192px;
                 height:45px;
                 background:url(images/home.gif) no-repeat center;
                 margin:-13px 0 0 -40px;
                 padding-left:0;
                 }

#navigation a.button2 {
                 float:left;
                 width:192px;
                 height:45px;
                 background:url(images/about.gif) no-repeat center;
                 margin-top:-13px;
                 padding-left:0;
                  }

a.button2a {
              display:block;
                }

a.button2a {
                        position:absolute;
                        top:45px;
                        left:192px;
                        width:192px;
                        height:45px;
                        background:url(images/overview.gif) no-repeat;
                           }

a.button3a {
              display:block;
                }


a.button3a {
                        position:absolute;
                        top:45px;
                        left:384px;
                        width:192px;
                        height:45px;
                        background:url(images/product1.gif) no-repeat;
                           }

a.button3b {
                        position:absolute;
                        top:90px;
                        left:384px;
                        width:192px;
                        height:45px;
                        background:url(images/product2.gif) no-repeat;
                           }

a.button3c {
                        position:absolute;
                        top:135px;
                        left:384px;
                        width:192px;
                        height:45px;
                        background:url(images/product3.gif) no-repeat;
                           }

a.button3d {
                        position:absolute;
                        top:180px;
                        left:384px;
                        width:192px;
                        height:45px;
                        background:url(images/product4.gif) no-repeat;
                           }

#navigation a.button3 {
                 float:left;
                 width:192px;
                 height:45px;
                 background:url(images/product.gif) no-repeat center;
                 margin-top:-13px;
                 padding-left:0;
                    }

#navigation a.button4 {
                 float:left;
                 width:192px;
                 height:45px;
                 background:url(images/service.gif) no-repeat center;
                 margin-top:-13px;
                 padding-left:0;
                    }

#navigation a.button5 {
                 float:left;
                 width:192px;
                 height:45px;
                 background:url(images/contact.gif) no-repeat center;
                 margin-top:-13px;
                 padding-left:0;
                    }

#navigation a.button1:hover {
                 background:url(images/home_hover.gif) no-repeat center;
                                  }

#navigation a.button2:hover {
                 background:url(images/about_hover.gif) no-repeat center;
                                  }

#navigation a.button3:hover {
                 background:url(images/product_hover.gif) no-repeat center;
                                  }

#navigation a.button4:hover {
                 background:url(images/service_hover.gif) no-repeat center;
                                  }

#navigation a.button5:hover {
                 background:url(images/contact_hover.gif) no-repeat center;
                    }

#navigation a.button2a:hover{
                   background:url(images/overview_hover.gif) no-repeat;
                    }

#navigation a.button3a:hover{
                   background:url(images/product1_hover.gif) no-repeat;
                    }

#navigation a.button3b:hover{
                   background:url(images/product2_hover.gif) no-repeat;
                    }

#navigation a.button3c:hover{
                   background:url(images/product3_hover.gif) no-repeat;
                    }

#navigation a.button3d:hover{
                   background:url(images/product4_hover.gif) no-repeat;
                    }

Please help me how to achieve the effect.

Thanks in advance.

Sam

Well the only way to hide the sub-navigation items when the page loads is using JavaScript and then hiding them while the user is hovering over a certain element.

I would strongly recomend using the jQuery functions of hover, [URL=“http://api.jquery.com/hide/”]hide, and [URL=“http://api.jquery.com/show/”]show

Here is something quick and simple that I put together.

<!Doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title> navigation with subnavigation </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
   $('.subNavigation').hide();
 });
$('#products').hover( function () {
    $('.subNavigation').show();
  });
</script>
</head> 
<body>
<header>
<nav>
        <ul>
             <li id="home"><a href="home.html">Home</a></li>
             <li id="about"><a href="about.html">About</a></li>
             <li id="overview"><a href="overview.html">Overview</a></li>
             <li id="products"><a href="products.html">Products</a></li>
             <li id="service"><a href="service.html">Service</a></li>
             <li id="contact"><a href="contact.html">Contact</a></li>
        </ul>
        <ul class="subNavigation">
          <li><a href="product1.html" class="button3a"></a></li>
          <li><a href="product2.html" class="button3b"></a></li>
          <li><a href="product3.html" class="button3c"></a></li>
          <li><a href="product4.html" class="button3d"></a></li>
        </ul>
</nav>
</body>
</html>

That should work for you. Add your own styling and you should be good to go.

-Team 1504

Hi Sam,

The most frequently recommended dropdown method is the SuckerFish that uses pure CSS (but a tiny javascript solely for IE6 that only supports hover on links). It hides the sub-menus by moving them left out of page.

It is let free to use as you please.

The method has evolved since it was invented, it now uses a negative left margin to hide the sub-menus, and the best basic version I think there is is Paul O’Brien’s example.

Try it out (you can skip the style for the menu items to make it simple) and tell us how it goes. :slight_smile:

Hi Erik J,

Thank you so much for the reply and the link. Its always nice to have someone guide you to the right source. I’m reading too many tutorial for this, that making me confused. Actually few days before I’ve read the suckerfish tutorial from hotdog :slight_smile:

The thing is I can able to find how to hide the drop-down using this technique,

I used this css as for as my html is concern,

a.button2a {
                        position:absolute;
                        top:45px;
                        left:192px;
                        width:192px;
                        height:45px;
                        background:url(images/overview.gif) no-repeat;
                        [B]margin-left:-999px;[/B]
                               }

I’m clueless how to make it show when hover. I used the following codes, but I couldn’t get it right.

First I tried this,

a:hover button2a,a:over button2a {margin-left:auto;}

Then this one,

 a.button2a:hover ,a.button2a:hover {margin-left:auto;}

Nothing working for my code. Please help me how to fix this.

Thanks again.


Hi team1504,

Thank you so much for the quick reply and the codes. But I’m looking to make this navigation menu using only css. Thanks again for your help.

Sam

Yes you do hide them, but you have hidden the links themselves.

And then you can’t hover them as they are hidden far away. :slight_smile:

I have adjusted your code to hide and show the links’ ul-parent instead. Try it out:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample navigation</title>
   <style type="text/css" >
body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 13px;
	min-width: 1000px;
	line-height: 125%;
	background-color: #FFFFFF;
	padding: 0;
	margin: 0;
}
/***************************************** your old code ***
#navigation {
	position: absolute;
	top: 135px;
	left: 20px;
	width: 960px;
	height: 45px;
	margin: 0;
	padding: 0;
}
#navigation li {
	display: inline;
}
#navigation a.button1 {
	float: left;
	width: 192px;
	height: 45px;
	background: url(images/home.gif) no-repeat center;
	margin: -13px 0 0 -40px;
	padding-left: 0;
}
#navigation a.button2 {
	float: left;
	width: 192px;
	height: 45px;
	background: url(images/about.gif) no-repeat center;
	margin-top: -13px;
	padding-left: 0;
}
a.button2a {
	display: block;
}
a.button2a {
	position: absolute;
	top: 45px;
	left: 192px;
	width: 192px;
	height: 45px;
	background: url(images/overview.gif) no-repeat;
}
a.button3a {
	display: block;
}
a.button3a {
	position: absolute;
	top: 45px;
	left: 384px;
	width: 192px;
	height: 45px;
	background: url(images/product1.gif) no-repeat;
}
a.button3b {
	position: absolute;
	top: 90px;
	left: 384px;
	width: 192px;
	height: 45px;
	background: url(images/product2.gif) no-repeat;
}
a.button3c {
	position: absolute;
	top: 135px;
	left: 384px;
	width: 192px;
	height: 45px;
	background: url(images/product3.gif) no-repeat;
}
a.button3d {
	position: absolute;
	top: 180px;
	left: 384px;
	width: 192px;
	height: 45px;
	background: url(images/product4.gif) no-repeat;
}
#navigation a.button3 {
	float: left;
	width: 192px;
	height: 45px;
	background: url(images/product.gif) no-repeat center;
	margin-top: -13px;
	padding-left: 0;
}
#navigation a.button4 {
	float: left;
	width: 192px;
	height: 45px;
	background: url(images/service.gif) no-repeat center;
	margin-top: -13px;
	padding-left: 0;
}
#navigation a.button5 {
	float: left;
	width: 192px;
	height: 45px;
	background: url(images/contact.gif) no-repeat center;
	margin-top: -13px;
	padding-left: 0;
}
#navigation a.button1:hover {
	background: url(images/home_hover.gif) no-repeat center;
}
#navigation a.button2:hover {
	background: url(images/about_hover.gif) no-repeat center;
}
#navigation a.button3:hover {
	background: url(images/product_hover.gif) no-repeat center;
}
#navigation a.button4:hover {
	background: url(images/service_hover.gif) no-repeat center;
}
#navigation a.button5:hover {
	background: url(images/contact_hover.gif) no-repeat center;
}
#navigation a.button2a:hover {
	background: url(images/overview_hover.gif) no-repeat;
}
#navigation a.button3a:hover {
	background: url(images/product1_hover.gif) no-repeat;
}
#navigation a.button3b:hover {
	background: url(images/product2_hover.gif) no-repeat;
}
#navigation a.button3c:hover {
	background: url(images/product3_hover.gif) no-repeat;
}
#navigation a.button3d:hover {
	background: url(images/product4_hover.gif) no-repeat;
}
a.button2a {
	position: absolute;
	top: 45px;
	left: 192px;
	width: 192px;
	height: 45px;
	background: url(images/overview.gif) no-repeat;
	margin-left: -999px;
}
a:hover button2a, a:over button2a {
	margin-left: auto;
}
*/

/***************************************** suggested code ***/

#navigation ul { /* I chosed to style the ul instead of (in this case) the not necessary div container */
	margin-top: 135px; /* place in position by margins is generally better than by positioning absolute */
	margin-left: 20px;
	width: 960px;
	height: 45px;
	margin: 0; /* resets also the nested ul's margin and padding */
	padding: 0;
}
/* general rules for the horizontal dropdown */
#navigation li {
	position: relative; /* to set a reference for the position of the child uls */
	float: left;
	width: 192px;
	height: 45px;
	list-style: none;
}
#navigation li ul {
	position: absolute;
	top: 45px;
	left: 0; /* now referring to its parent li as nearest positioned ancestor */
	margin-left: -9999px;
	width: auto; /* or it would inherit width and height from its parent ul */
	height: auto;
	background-color:;
}
#navigation li:hover ul {
	margin-left: 0;
}
#navigation li ul li {
	position: relative;
	float: none;
}
/* to save code, first the general styling of the links */
#navigation li a {
	display: block; /* spreads the link wide to click on */
	height: 45px;
	background: #fc0 none no-repeat center;
	text-align: center;
	line-height: 45px; /* just to vertically center the text */
	text-decoration: none;
	color: #000;
}
/* for the individual links (when possible I choose to have the classes on the lis just for the possibility to individually style them too) */
#navigation li.button1 a { background-image:url(images/home.gif);}
#navigation li.button1 a:hover { background-image:url(images/home_hover.gif);}
#navigation li.button2 a { background-image:url(images/about.gif);}
#navigation li.button2 a:hover { background-image:url(images/about_hover.gif);}
#navigation li.button2a a { background-image:url(images/overview.gif);}
#navigation li.button2a a:hover { background-image:url(images/overview_hover.gif);}
#navigation li.button3 a { background-image:url(images/product.gif);}
#navigation li.button3 a:hover { background-image:url(images/product_hover.gif);}
#navigation li.button3a a { background-image:url(images/product1.gif);}
#navigation li.button3a a:hover { background-image:url(images/product1_hover.gif);}
#navigation li.button3b a { background-image:url(images/product2.gif);}
#navigation li.button3b a:hover { background-image:url(images/produc2t_hover.gif);}
#navigation li.button3c a { background-image:url(images/product3.gif);}
#navigation li.button3c a:hover { background-image:url(images/product3_hover.gif);}
#navigation li.button3d a { background-image:url(images/product4.gif);}
#navigation li.button3d a:hover { background-image:url(images/produc4t_hover.gif);}
#navigation li.button4 a { background-image:url(images/home.gif);}
#navigation li.button4 a:hover { background-image:url(images/home_hover.gif);}
#navigation li.button5 a { background-image:url(images/home.gif);}
#navigation li.button5 a:hover { background-image:url(images/home_hover.gif);}
</style>
</head>
 <body>
  <div id="navigation">
    <ul>
      <li class="button1"><a href="home.html">Home</a></li>
      <li class="button2"><a href="about.html">About</a>
        <ul>
          <li class="button2a"><a href="overview.html">Overview</a></li>
        </ul>
			</li>
      <li class="button3"><a href="product.html">Product</a>
        <ul>
          <li class="button3a"><a href="product1.html">Product1</a></li>
          <li class="button3b"><a href="product2.html">Product2</a></li>
          <li class="button3c"><a href="product3.html">Product3</a></li>
          <li class="button3d"><a href="product4.html">Product4</a></li>
        </ul>
			</li>
      <li class="button4"><a href="service.html">Service</a></li>
      <li class="button5"><a href="contact.html">Contact</a></li>
    </ul>
  </div>
 </body>
</html>

Hi Erik J

Thanks Thanks Thanks Thank you so much :slight_smile:

I was really breaking my head for last one week for this. You not only helped me to fix this, but also made me to learn about the basics with your notes. Thanks a ton my friend. I never forget this timely help.

Finally, I want this navigation 135px down from the browser viewpoint, (My logo will occupy the 135px height)

So instead of

#navigation ul { /* I chosed to style the ul instead of (in this case) the not necessary div container */
    margin-top: 135px; /* place in position by margins is generally better than by positioning absolute */
    margin-left: 20px;
    width: 960px;
    height: 45px;
    margin: 0; /* resets also the nested ul's margin and padding */
    padding: 0;
}

********

I've used this 

#navigation ul{ 
        float:left;/* I chosed to style the ul instead of (in this case) the not necessary div container */
        width: 960px;
        height: 45px;
        margin-left: 20px; /* resets also the nested ul's margin and padding */
        padding: 0;
}

Its looking perfect in the firefox3.6, IE7 and Chrome8. Is it right way to achieve the results(the way i altered the style sheet)?

Also Should I add IE6 fix you mentioned in your first message?

Thanks again for your GREAT help.

Sam

Is it right way to achieve the results(the way i altered the style sheet)?

Also Should I add IE6 fix you mentioned in your first message?

  • Yes.

  • I would. :slight_smile: (Don’t forget adding the SuckerFish .sfhover class to the parent lis used to show the submenu.)

You are welcome!

Hi Erik J,

I’ll follow that. Thanks a lot for all your help :slight_smile:

Sam

Sorry if I seemed confusing or misleading Saki_designer
Pardon me please

Also I didn’t know about this menu Erik J. it’s quite sweet if I do say so myself

/EDIT/

I apologise for not understanding that you wanted a completely css menu.

Hi team1504,

Thanks a lot for your efforts to help me. In this case, I got what I wanted from Mr.Eric :slight_smile:

But I’ll learn your technique too :slight_smile:

Thanks again.

Sam

Hi Team,

I too not always understand precisely what is wanted, more times than I bother to remember. But you had a solution. Thank you for sharing it, (that one was new to me too). :slight_smile:

Hi Sam,

Next thing to do to improve your menu is to implement one Sprite Image instead of 10 different images to load with the page and then wait the load of one of the other 10 images on every first item hover.

We would all be happy to help you achieve that too. :slight_smile:

Hi Erik,

You don’t believe me when I say this, Actually I already tried sprite images technique :slight_smile:

But I couldn’t get it right. I’ll try again once I finish this current home page :slight_smile:

I have one more issue with the layout, I posted the thread. Is it possible for you to help me? Sorry, I know I’m troubling you too much.

Sam