Over a million developers have joined DZone.

Create Drop-Down Menu Using CSS Only

· Java Zone

Learn more about Kotlin, a new programming language designed to solve problems that software developers face every day brought to you in partnership with JetBrains.

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


The Java Zone is brought to you in partnership with JetBrains.  Discover how powerful static code analysis and ergonomic design make development not only productive but also an enjoyable experience.

Topics:

Published at DZone with permission of Nikos Printezis , DZone MVB .

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}