Tutorial-Menu Horizontal em CSS
Autor: SATORI | Publicado: 2012-04-07T07:32:00-07:00

Tutorial-Menu Horizontal em CSS.
Vai em Editar HTML e procure pela Tag abaixo:
]]&gt;&lt;/b:skin&gt;
Acima da Tag cole o Codigo Abaixo:
nav  {&lt;br /&gt;         display: block;&lt;br /&gt;         width: 100%;&lt;br /&gt;         overflow: hidden;&lt;br /&gt; }&lt;br /&gt; nav ul {&lt;br /&gt;         margin: 80px 0 20px 0;&lt;br /&gt;         padding: .7em;&lt;br /&gt;         float: left;&lt;br /&gt;         list-style: none;&lt;br /&gt;         background: #444;&lt;br /&gt;         background: rgba(0,0,0,.2);&lt;br /&gt;         -moz-border-radius: .5em;&lt;br /&gt;         -webkit-border-radius: .5em;&lt;br /&gt;         border-radius: .5em;&lt;br /&gt;         -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;&lt;br /&gt;         -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;&lt;br /&gt;         box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;&lt;br /&gt; }&lt;br /&gt; nav li {&lt;br /&gt;         float:left;&lt;br /&gt; }&lt;br /&gt; nav a {&lt;br /&gt;         float:left;&lt;br /&gt;         padding: .8em 1.5em;&lt;br /&gt;         text-decoration: none;&lt;br /&gt;         color: #555;&lt;br /&gt;         text-shadow: 0 1px 0 rgba(255,255,255,.5);&lt;br /&gt;         font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;&lt;br /&gt;         letter-spacing: 1px;&lt;br /&gt;         text-transform: uppercase;&lt;br /&gt;         border-width: 1px;&lt;br /&gt;         border-style: solid;&lt;br /&gt;         border-color: #fff #ccc #999 #eee;&lt;br /&gt;         background: #c1c1c1;&lt;br /&gt;         background: -moz-linear-gradient(#f5f5f5, #c1c1c1);&lt;br /&gt;         background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));&lt;br /&gt;         background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);&lt;br /&gt;         background: -o-linear-gradient(#f5f5f5, #c1c1c1);&lt;br /&gt;         background: -ms-linear-gradient(#f5f5f5, #c1c1c1);&lt;br /&gt;         background: linear-gradient(#f5f5f5, #c1c1c1);&lt;br /&gt; }&lt;br /&gt; nav a:hover, nav a:focus {&lt;br /&gt;         outline: 0;&lt;br /&gt;         color: #fff;&lt;br /&gt;         text-shadow: 0 1px 0 rgba(0,0,0,.2);&lt;br /&gt;         background: #fac754;&lt;br /&gt;         background: -moz-linear-gradient(#fac754, #f8ac00);&lt;br /&gt;         background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));&lt;br /&gt;         background: -webkit-linear-gradient(#fac754, #f8ac00);&lt;br /&gt;         background: -o-linear-gradient(#fac754, #f8ac00);&lt;br /&gt;         background: -ms-linear-gradient(#fac754, #f8ac00);&lt;br /&gt;         background: linear-gradient(#fac754, #f8ac00);&lt;br /&gt; }&lt;br /&gt; nav a:active {&lt;br /&gt;         -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;&lt;br /&gt;         -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;&lt;br /&gt;         box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;&lt;br /&gt; }&lt;br /&gt; nav li:first-child a {&lt;br /&gt;         border-left: 0;&lt;br /&gt;         -moz-border-radius: 4px 0 0 4px;&lt;br /&gt;         -webkit-border-radius: 4px 0 0 4px;&lt;br /&gt;         border-radius: 4px 0 0 4px;&lt;br /&gt; }&lt;br /&gt; nav li:last-child a {&lt;br /&gt;         border-right: 0;&lt;br /&gt;         -moz-border-radius: 0 4px 4px 0;&lt;br /&gt;         -webkit-border-radius: 0 4px 4px 0;&lt;br /&gt;         border-radius: 0 4px 4px 0;&lt;br /&gt; }
Depois salve o Modelo.
Depois abra uma Gadjet e cole o codigo abaixo nele:
&lt;nav&gt;&lt;br /&gt;     &lt;ul&gt;&lt;li&gt;&lt;a href="LINK"&gt;ITEM&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href="LINK"&gt;ITEM&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href="LINK"&gt;ITEM&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href="LINK"&gt;ITEM&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href="LINK"&gt;ITEM&lt;/a&gt;&lt;/li&gt;      &lt;/ul&gt;&lt;/nav&gt;
Fazendo as Mudanças Aonde está 'LINK' 'ITEM'