Building websites for businesses & individuals since 2008,
- fast, professional & affordable.

Simplist css-only dropdown menu in html

tip

Tuesday, May 10, 2011, 19:17

Drop-down menus are very common in today's web design. There are many ways to implement a drop-down menu. Here is our way. It is powered by CSS only. No javascript (we recommend avoiding the use of Javascript in web design unless necessary).

Here is how it looks.

This implementation uses the following style.

<style type="text/css">
#menu_sample,ul,li        {border:none;margin:0;padding:0;}
#menu_sample            {font-size:1.5em;margin-left:2em;}
#menu_sample ul        {background:#666;padding:0;}
#menu_sample li        {display:inline-block;padding:0;
                    /* For IE 7 */zoom: 1;*display: inline;}
#menu_sample li a        {color:#ccc;display:block;padding:.5em .6em;text-decoration:none;}
#menu_sample li a:hover,
#menu_sample ul li:hover a    {background: #00ccff;color:#fff;text-decoration:none;}
#menu_sample li ul            {background:#00ccff;display:none;position:absolute;width:200px;z-index:100;}
#menu_sample li:hover ul,
#menu_sample li li         {display:block;}
#menu_sample li:hover li a    {background:transparent;}
#menu_sample li ul a        {display:block;font-size:.75em;padding:.5em .6em;}
#menu_sample li ul a:hover,
#menu_sample li ul li:hover a{background:#669900;color:#fff;text-decoration:none;}   
</style>

Here is the html code that goes into the menu.

<div id="menu_sample">
<ul>
<li><a href="#menu1">menu1</a>
<ul>
<li><a href="#menu11">menu11</a></li>
<li><a href="#menu12">menu12</a></li>
<li><a href="#menu13">menu13</a></li>
</ul>
</li>
<li><a href="#menu2">menu2</a>
<ul>
<li><a href="#menu21">menu21</a></li>
<li><a href="#menu22">menu22</a></li>
<li><a href="#menu23">menu23</a></li>
</ul>
</li>
<li><a href="#menu3">menu3</a>
<ul>
<li><a href="#menu31">menu31</a></li>
<li><a href="#menu32">menu32</a></li>
<li><a href="#menu33">menu33</a></li>
</ul>
</li>
</ul>
</div>

A few comments.

  1. This key here is to use the attributes of display:none, position:absolute and hover so that the submenu (ul) are hidden unless hover over the parent menu (li).
  2. The code is very clean. It requires only a DIV block and UL/LI combination.
  3. No script is needed.
  4. It is compatible with most browsers.
  5. Tested working with Android and iPhone. It will work with most mobile other browsers as well.

Comments

No comments yet.




(optional)

Copyright ©Zoria Media, 2008-2020. All rights reserved.

1006 Charles st, North Providence, RI 02904.

Tel: (401) 484-8379

FAQ | About Us | Contact Us