Estou com um problema que ainda não consegui resolver. Fiz o menu da imagem no computador portátil com alguns exemplos que vi. Ficou muito bonito, mas na hora de abrir numa definição diferente fica tudo mal posicionado.
http://imageshack.us/photo/my-images/838/cssw.jpg/
O css referente a esse menu é este:
/* ********************************* Menu principal *********************************** */
.arrowblue {
width: 100%; /*width of menu*/;
border-style: solid solid none solid;
border-color: #94AA74;
border-width: 1px;
}
.arrowblue ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.arrowblue li a {
display: block;
background: url('../imagens/arrowblue1.gif') 100% 0;
height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/;
padding: 4px 0 4px 10px;
line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/;
text-decoration: none;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The magic */
.arrowblue ul li {
position: relative;
}
. arrowblue li ul {
position: absolute;
top: 0;
display: none;
}
.arrowblue ul li a {
display: block;
text-decoration: none;
background: url('../imagens/arrowblue1.gif') 100% 0;
}
.arrowblue li:hover ul, li.over ul {
display: block;
}
.arrowblue li a:link, .arrowblue li a:visited {
color: #3399FF;
}
.arrowblue li a:hover {
color: #0033CC;
background: url('../imagens/arrowblue2.gif') 100% 0;
}
.arrowblue li a:selected {
color: #26370A;
background: url('../imagens/arrowblue3.gif') 100% 0;
}
.arrowblue li a:active {
color: #000066;
background: url('../imagens/arrowblue3.gif') 100% 0;
}
.vazio {
background: url('../imagens/arrowblues.gif') 100% 0;
}
#menubv {
width: 12em;
padding: 0;
margin: 0;
font: 14px Verdana, sans-serif;
}
#menubv ul {
list-style: none;
margin: 0;
padding: 0;
}
#menubv li {
border-bottom: 1px solid #f00;
margin: 0;
}
#menubv li a {
display: block;
padding: 5px 5px 5px 0.5em;
font-weight: bold;
border-left: 10px solid #ffc0cb;
border-right: 10px solid #fff5ee;
background-color: #ffe4e1;
color: #808000;
text-decoration: none;
}
#menubv li a:hover {
border-left: 10px solid #fcc;
border-right: 10px solid #fff;
background-color: #fff0f5;
color: #ccc;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menubv li {
float: left;
height: 1%;
}
* html ul#menubv li a {
height: 1%;
}
/* End */
Na minha página eu defini dessa forma:
<div id="menu" class="menutext" />
<!--DIV MENU-->
<div class="arrowblue">
<ul>
<li class="vazio"></li>
<?php //Construção do menu pela BD - Dinâmico
// menus principais
$resultado=$conect->criarmenualuno();//Cria item de menu
while($campos=mysql_fetch_array($resultado)) {
extract($campos);?>
<li class="selected">
<a href="<? echo $link ?>" target="iConteudo"><? echo $texto ?>
</a>
<ul>
<?
$resultado2=$conect->criarsubmenualuno($id_menu);//Cria item de submenu
while($campos2=mysql_fetch_array($resultado2)) {
extract($campos2);?>
<li class="selected">
<a href="<? echo $link ?>" target="iConteudo"><? echo $texto ?>
</a></li>
<? } ?>
</ul>
<? } ?></li>
</ul>
</div>
Agradeço a ajuda!
