Tenho um menu feito em CSS, e estou precisando retirar as bordas internas deste menu e dos seus sub-menus, ou seja eu quero que o menu e seus submenus só tenham bordas externas, não quero que apareça aquelas bordas entre um menu e outro.
Só para ilustrar mais no "menu todos os programas" do windows XP, o windows abre os menus e não mostra a borda entre os menus, apenas as bordas laterais, estou precisando fazer o mesmo.
Segue abaixo e em anexo o código do menu.
*************************************
Código HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR...l1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="menu.css" />
</head>
<body>
<div id="menu_container">
<ul id="pmenu">
<li class="drop"><a href="#" class="enclose"><img src="../menu31/img/menu_corporativo.gif" border="0" width="134" height="23"/><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose"><img src="../menu31/img/menu_custos.gif" border="0" width="134" height="23"/></a></li>
<li><a href="#"><img src="../menu31/img/menu_seguranca.gif" border="0" width="134" height="23"/></a></li>
<li class="fly"><a href="#"><img src="../menu31/img/menu_corporativo.gif" border="0" width="134" height="23"/><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Nível A - 1</a></li>
<li class="fly"><a href="#">Nível A - 2<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Nível B - 1</a></li>
<li class="fly"><a href="#">Nível B - 2<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Nível C - 1</a></li>
<li><a href="#">Nível C - 2</a></li>
<li class="fly"><a href="#">Nível C - 3<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Nível D - 1</a></li>
<li><a href="#">Nível D - 2</a></li>
<li><a href="#">Nível D - 3</a></li>
<li><a href="#">Nível D - 4</a></li>
<li><a href="#">Nível D - 5</a></li>
<li><a href="#">Nível D - 6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Nível C - 4</a></li>
<li><a href="#">Nível C - 5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Nível B - 3</a></li>
<li><a href="#">Nível B - 4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Nível A - 3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#"><img src="../menu31/img/menu_custos.gif" border="0" width="134" height="23"/></a></li>
<li><a href="#"><img src="../menu31/img/menu_seguranca.gif" border="0" width="134" height="23"/></a></li>
<li class="fly"><a href="#"><img src="../menu31/img/menu_seguranca.gif" border="0" width="134" height="23"/><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Nível B - 5</a></li>
<li class="fly"><a href="#">Nível B - 6<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Nível C - 6</a></li>
<li><a href="#" class="#">Nível C - 7</a><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" class="enclose">Nível D - 7</a></li>
<li><a href="#" class="#">Nível D - 8</a></li>
<li><a href="#" class="#">Nível D - 9</a></li>
</ul>
</li>
<li><a href="#" class="#">Nível C - 8</a></li>
</ul>
</li>
<li><a href="#">Nível B - 7</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
***********************************************************************
CÓDIGO CSS
/* Adiciona a margem, tamanho, altura, */
#menu_container {margin:5px 0px 100px 15px; position:relative; width:750px; height:25px; z-index:100;}
/* retira os simbolos de lista */
#pmenu, #pmenu ul {padding:0px; margin:1px; list-style-type: none;}
/* configura o tamnho de cada item do menu, tamanho da fonte, cor da fonte, altura do menu, posição da fonte no menu*/
#pmenu a, #pmenu a:visited {display:block;width:150px; font-size:12px; color:#000; height:27px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #000; border-width:1px 0 1px 1px;}
/* borda dos submenus */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}
/* cor do menu #7484ad*/
#pmenu li {float:left; background: #00FFFF;}
/* IE7 */
#pmenu li:hover {position:relative;}
/* muda a cor de fundo quando o mouse estiver sobre o menu */
#pmenu li:hover > a {background:#dfd7ca; color:#c00;}
/* Oculta os sub-menus*/
#pmenu li ul {display:none;}
/* Sub-menus faz com que os sub-menus fiquem um ao lodo do outro*/
#pmenu li:hover > ul {display:block; position:absolute; top:-11px; left:120px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:120px;}
/* Submenus*/
#pmenu > li:hover > ul {left:-30px; top:16px;}
/* tabela */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* Configura IE 5.0 e IE 6.0 */
* html #pmenu li a:hover {position:relative; background:#dfd7ca; color:#c00;}
/* Cor */
#pmenu li a:active, #pmenu li a:focus {background:#dfd7ca; color:#c00;}
/* Muda a cor do menu que possue sub-menus #7484ad*/
#pmenu li.fly {background:#00FFFF;}
#pmenu li.drop {background:#00FFFF;}
/* */
/* */
* html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}
/* */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}
/* */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}
/* m */
#pmenu li a:hover ul a:hover ul{
visibility:visible; top:-11px; left:80px;
}
/* */
#pmenu li a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/**/
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
Attached Files
-
menu.rar 9.56KB
1 downloads
Edição feita por: kandrad, 21/08/2008, 17:36.
