<style> / * O menu é uma lista * / # Nav ( background: # 678 url (URL_gradient.png) repeat-x 0-110px; line-height: 100%; margin: 0; padding: 7px 6px 0; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 1px 3px RGBA (0,0,0, .4); -moz-box-shadow: 0 1px 3px RGBA (0,0,0, .4); } # Nav li (/ * cada item na lista * / float: left; list-style: none; margin: 0 5px; padding: 0 0 8px; position: relative; } / * Principais definições de nível * / # Nav a ( color: # DDD; display: block; font-weight: bold; margin: 0; padding: 8px 20px; text-decoration: none; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px RGBA (0,0,0, .3); } # Nav a: hover ( background: # 000; color: # FFF; } / * Hover efeito sobre o nível principal * / # Nav. Actual a, # nav li: hover> a ( background: # 468 url (URL_gradient.png) repeat-x 0-40px; color: # 444; border-top: 1px solid # F8F8F8; -webkit-box-shadow: 0 1px 1px RGBA (0,0,0, .2); -moz-box-shadow: 0 1px 1px RGBA (0,0,0, .2); box-shadow: 0 1px 1px RGBA (0,0,0, .2); text-shadow: 0 1px 0 RGBA (255.255.255, 1); } / * O sub-níveis * / # Nav ul li: hover a, # nav li: hover li a ( background: none; border: none; color: # 333; -webkit-box-shadow: none; -moz-box-shadow: none; } # Nav ul a: hover ( background: # 456 url (URL_gradient.png) repeat-x 0-100px! importante; color: # fff! importante; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0 1px 1px RGBA (0,0,0, .1); } / * O efeito da exposição * / # Nav li: hover> ul ( display: block; } / * Definições de submenus * / Ul # nav ( background: # DDD url (URL_gradient.png) repeat-x 0 0; border: 1px solid # # B4B4B4; display: none; left: 0; margin: 0; padding: 0; position: absolute; top: 35px; width: 185px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px RGBA (0,0,0, .3); -moz-box-shadow: 0 1px 3px RGBA (0,0,0, .3); box-shadow: 0 1px 3px RGBA (0,0,0, .3); } # Nav ul li ( float: none; margin: 0; padding: 0; } Ul # nav a ( font-weight: normal; text-shadow: 0 1px 0 # FFF; } / * As definições de submenus interno * / Ul # nav ul ( left: 181px; top:-3px; } / * Bordas arredondadas do item primeiro e último * / # Nav ul li: first-child> A ( -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; } # Nav ul li: filho última> A ( -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; } / * General Definitions * / # Nav: depois ( clear: both; content: "." display: block; height: 0; line-height: 0; visibility: hidden; } # Nav (display: inline-block;) html [xmlns] # nav (display: block;) * Html # nav (height: 1%;) <style>
<ul id="nav">
<li class="current"> <a href="javascript:void(0);"> Home </ a> </ li>
<li>
<a href="javascript:void(0);"> Menu 1 </ a>
<ul>
<li>
<a href="javascript:void(0);"> Sub Menu 1.1 </ a>
<ul>
<li> <a href="javascript:void(0);"> Sub Menu 1.1.1 </ a> </ li>
<li> <a href="javascript:void(0);"> Sub Menu 1.1.2 </ a> </ li>
<li> <a href="javascript:void(0);"> Sub Menu 1.1.3 </ a> </ li>
<li> <a href="javascript:void(0);"> Sub Menu 1.1.4 </ a> </ li>
</ Ul>
</ Li>
<li>
<a href="javascript:void(0);"> Sub Menu 1.2 </ a>
<ul>
<li> <a href="javascript:void(0);"> Sub Menu 1.2.1 </ a> </ li>
</ Ul>
</ Li>
<li> <a href="javascript:void(0);"> Sub Menu 1.3 </ a> </ li>
<li> <a href="javascript:void(0);"> Sub Menu 1.4 </ a> </ li>
</ Ul>
</ Li>
<li>
<a href="javascript:void(0);"> Menu 2 </ a>
<ul>
<li>
<a href="javascript:void(0);"> Sub Menu 2.1 </ a>
<ul>
<li> <a href="javascript:void(0);"> Sub Menu 2.1.1 </ a> </ li>
<li> <a href="javascript:void(0);"> Sub Menu 2.1.2 </ a> </ li>
<li> <a href="javascript:void(0);"> Sub Menu 2.1.3 </ a> </ li>
</ Ul>
</ Li>
<li> <a href="javascript:void(0);"> Sub Menu 2.2 </ a> </ li>
<li> <a href="javascript:void(0);"> Sub Menu 2.3 </ a> </ li>
<li>
<a href="javascript:void(0);"> Sub Menu 2.4 </ a>
<ul>
<li> <a href="javascript:void(0);"> Sub Menu 2.4.1 </ a> </ li>
<li> <a href="javascript:void(0);"> Sub Menu 2.4.2 </ a> </ li>
<li> <a href="javascript:void(0);"> Sub Menu 2.4.3 </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
<li> <a href="javascript:void(0);"> Menu 3 </ a> </ li>
<li> <a href="javascript:void(0);"> Menu 4 </ a> </ li>
</ Ul>
Postagens
Comentários
