Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Create Drop-Down Menu Using CSS Only

DZone's Guide to

Create Drop-Down Menu Using CSS Only

· Java Zone
Free Resource

The single app analytics solutions to take your web and mobile apps to the next level.  Try today!  Brought to you in partnership with CA Technologies

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


CA App Experience Analytics, a whole new level of visibility. Learn more. Brought to you in partnership with CA Technologies.

Topics:

Published at DZone with permission of Nikos Printezis, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}