Code HTML Submenu
Code html<style type="text/css">/* #F00 *//* #00C */#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu ul{background:#00F;height:50px;list-style:none;margin:0;padding:0;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1)}#cssmenu li{float:left;padding:0 0 0 15px}#cssmenu li a{color:#000;display:block;font-weight:normal;line-height:50px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenu li a:hover{background:#00C;color:#FFF;text-decoration:none;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)}#cssmenu ul li:hover a{background:#00C;color:#FFF;text-decoration:none}#cssmenu li ul{display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:200px;z-index:200}#cssmenu li:hover ul{display:block}#cssmenu li li{display:block;float:none;margin:0;padding:0;width:200px;background:#06F;/*this is where the rounded corners for the dropdown disappears*/}#cssmenu li:hover li a{background:none}#cssmenu li ul a{display:block;height:50px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul li:hover a{border:0;color:#FFF;text-decoration:none;background:#00C;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->
<!-- customize your menus Links -->
<div id="cssmenu">
<ul>
<li class="active"><a href="#link 1"><span>DESCRIPTION PAGE1</span></a></li>
<li class="has-sub"><a href="#"><span>DESCRIPTION PAGE 2</span></a>
<ul>
<li><a href="#link 2/"><span>#EDITAR 2</span></a></li>
<li><a href="#link 3"><span>#EDITAR 3</span></a></li>
<li><a href="#link 4"><span>#EDITAR 4</span></a></li>
<li><a href="#link 5"><span>#EDITAR 5</span></a></li>
<li><a href="#link 6"><span>#EDITAR 6</span></a></li>
<li><a href="#link 7"><span>#EDITAR 7</span></a></li>
<li><a href="#link 8"><span>#EDITAR 8</span></a></li>
<li class="last"><a href="#link 9"><span>#EDITAR 9</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>DESCRIPTION PAGE 3</span></a>
<ul>
<li><a href="#LINK"><span>#EDITAR 1</span></a></li>
<li><a href="#LINK"><span>#EDITAR 2</span></a></li>
<li class="last"><a href="#LINK"><span>#EDITAR 3</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>DESCRIPTION PAGE 4</span></a></li>
</ul>
</div>
RESULT
Post a Comment