HTML5 Zone is brought to you in partnership with:

Undergraduate student of Department of Informatics, University of Athens. Microsoft Student Partner. Nikos is a DZone MVB and is not an employee of DZone and has posted 5 posts at DZone. View Full User Profile

Create Drop-Down Menu Using CSS Only

03.20.2014
| 11023 views |
  • submit to reddit

The most common way to create a drop-down menu is by using javascript, but, for those who like to use only CSS for design issues, there is an alternative way. Suppose we have the following HTML and CSS code:

index.html:

   1: <html>

   2: <head>

   3:     <title>menu</title>

   4:     <link rel="stylesheet" type="text/css" href="site.css" />

   5: </head>

   6: <body>

   7:     <div id="menu">

   8:         <ul>

   9:             <li>

  10:                 <h2><a href="#">Page 1</a></h2>

  11:                 <ul>

  12:                     <li>

  13:                         <a href="#">Page 1.1</a>

  14:                     </li>

  15:                     <li>

  16:                         <a href="#">Page 1.2</a>

  17:                     </li>

  18:                 </ul>

  19:             </li>

  20:             <li>

  21:                 <h2><a href="#">Page 2</a></h2>

  22:                 <ul>

  23:                     <li>

  24:                         <a href="#">Page 2.1</a>

  25:                     </li>

  26:                     <li>

  27:                         <a href="#">Page 2.2</a>

  28:                     </li>

  29:                 </ul>

  30:             </li>

  31:             <li>

  32:                 <h2><a href="#">Page 3</a></h2>

  33:                 <ul>

  34:                     <li>

  35:                         <a href="#">Page 3.1</a>

  36:                     </li>

  37:                     <li>

  38:                         <a href="#">Page 3.2</a>

  39:                     </li>

  40:                 </ul>

  41:             </li>

  42:         </ul>

  43:     </div>

  44: </body>

  45: </html>

site.css:

   1: body

   2: {

   3:     margin: 0;

   4:     padding: 0;

   5: }

   6:  

   7: #menu ul

   8: {

   9:     list-style-type: none;

  10:     padding: 0;

  11:     margin: 0;

  12: }

  13:  

  14: #menu li

  15: {

  16:     float: left;

  17:     width: 200px;

  18:     border-right: solid 1px #fff;

  19:     position: relative;

  20: }

  21:  

  22: #menu li h2

  23: {

  24:     margin: 0;

  25:     padding: 0;

  26: }

  27:  

  28: #menu li h2 a, #menu li li a

  29: {

  30:     display: block;

  31:     text-align: center;

  32:     font-size: 17px;

  33:     background-color: #666;

  34:     color: #fff;

  35:     text-decoration: none;

  36:     line-height: 40px;

  37:     vertical-align: middle;

  38: }

  39:  

  40: #menu li h2 a:hover, #menu li li a:hover

  41: {

  42:     background-color: #000;

  43: }

  44:  

  45: #menu li li a

  46: {

  47:     height: 100%;

  48: }

  49:  

  50: #menu li ul

  51: {

  52:     position: absolute;

  53:     top: 100%;

  54:     margin: 0;

  55:     padding: 0;

  56:     display: none;

  57:     background-color: #666;

  58:     z-index: 1000;

  59:     width: 100%;

  60: }

  61:  

  62: #menu li li

  63: {

  64:     float: none;

  65:     border-right: solid 1px #fff;

  66: }

  67:  

  68: #menu li:hover ul

  69: {

  70:     display: block;

  71: }

The key feature is the :hover. In every modern browser, the :hover feature can be used for every element, not only for anchors. However, there is a family of browsers which don’t recognize the :hover feature in elements other than the anchors. Can you guess their name ? Their name begins with Internet and ends with Explorer. Hopefully, there is a way to accomplish this feature in Internet Explorer too by using a special behavior. Internet Explorer lets you to add new behavior to the browser by using behavior files. You can download the whatever:hover behavior file and complete your task for good. Add a link to the behavior file in the CSS file like this:

   1: body

   2: {

   3:     margin: 0;

   4:     padding: 0;

   5: //    behavior: url('csshover3.htc');

   6: }

(I added the // comments so that the behavior file is ignored in browsers other than Internet Explorer)

Now, you must be ready to enjoy your new special, cross-browser compatible, css only, drop-down menu:

image


Published at DZone with permission of Nikos Printezis, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)