Menu horizontal e vertical

<style type="text/css">

.items li {
/* float: center; alinha na vertical */
 float: left; /* alinha na horizontal */
 margin: 0px 7px 7px 0px;
 list-style: none;
}

.items li .outerContainer {
 display: table;
 height: 47px;
 overflow: hidden;
 width: 100px;
 background-color: #3399cc;
 border-radius: 10px 0px 10px 0px;
 box-shadow: 5px 5px 10px #4f4f4f;
 -webkit-box-shadow: 5px 5px 10px #4f4f4f;
 -moz-box-shadow: 5px 5px 10px #4f4f4f;
}

.items li .outerContainer:Hover {
 background-color: #00008B;
}

.items li .outerContainer .innerContainer {
 display: table-cell;
 vertical-align: middle;
 width: 100%;
 margin: 0 auto;
 text-align: center;
}

.texto_botao {
 color: #fff;
 display: block;
 font-size: 12px;
 font-weight: bold;
 text-shadow: 0 1px 1px #003366;
 text-decoration: none;
}
</style>

<div class="items">
<ul>

<li>
<div id="menu_institucional" class="outerContainer">
<div class="innerContainer">
<div class"element"><a class="texto_botao" href="#">Institucional</a></div>
</div>
</div>
</li>

<li>
<div id="menu_unidades_empresariais" class="outerContainer">
<div class="innerContainer">
<div class"element"><a class="texto_botao" href="#">Unidades Empresariais</a></div>
</div>
</div>
</li>

</ul>
</div>

Advertisements