Call (401) 484-8379 or contact us for your next website project → mobileget a free quotefaqabout uscontact us

Simplist css-only dropdown menu in html

original writing & posted by: Ray@zoriamedia
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)

powered by php - powered by sqlite - powered by RiteCMS