DCSIMG
Create drop-down menu using CSS only - Development Romance - Site Root - StudentGuru

Create drop-down menu using CSS only

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