Hi,
I’m building a CSS Menu. The problem is that sub-menu.
Firefox does not seem to get the CSS. IE looks fine.
Here is my code:
CSS:
[code=html]
#menuitems, #menuitems ul {
margin-left: 0px;
padding-left: 0px;
/* list-style-position: outside; */
list-style-image: none;
list-style-type: none;
}
#menuitems li {
margin: 0px;
background-image: url(img/bg-menu-item.gif);
height: 18px;
width: 188px;
background-repeat: no-repeat;
background-position: left top;
padding-top: 12px;
padding-left: 16px;
padding-right: 0px;
padding-bottom: 0px;
}
#menuitems li a{
width: 188px;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
}
#menuitems li a:hover{
color: #FFFC98;
}
#menuitems li ul li {
margin: 0px;
/*
height: 18px;
width: 188px;
*/
padding-top: 1px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-image: none;
/* background-color: #000000; */
/* border: 1px solid #00FF00; */
}
#menuitems li li a{
/* width: 188px; */
margin: 0px;
padding-top: 6px;
padding-left: 0 px;
padding-right: 0px;
padding-bottom: 0px;
color: #FFFFFF;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
}
.menuSlide{ /* Para a abertura de Menus */
margin: 0px;
padding: 0px;
}
HTML:
[code=html]
<div id=”menu”>
<p style=”height:58px;”> </p>
<ul id=”menuitems”>
<li ><a href=”#”>Home</a></li>
<li class=”menuSlide”><a href=”#”>Institucional</a></li>
<div class=”menuSlide”>
<ul class=”ff-sub-menu”>
<li><a href=”#” class=”ff-sub-menu”>- Mensagem do Aministrador</a></li>
<li><a href=”#” class=”ff-sub-menu”>- Organigramas</a></li>
<li><a href=”#” class=”ff-sub-menu”>- Comparticipações</a></li>
<li><a href=”#” class=”ff-sub-menu”>- Equipamento</a></li>
<li><a href=”#” class=”ff-sub-menu”>- Recursos Humanos</a></li>
</ul>
</div>
<li class=”menuSlide”><a href=”#”>Serviços</a></li>
<div class=”menuSlide”>
<p>
Sub-Menu 3
</p>
</div>
<li class=”menuSlide”><a href=”#”>Notícias</a></li>
<div class=”menuSlide”>
<p>
Sub-Menu 4
</p>
</div>
<li class=”menuSlide”><a href=”#”>Contactos</a></li>
<div class=”menuSlide”>
<p>
Sub-Menu 5
</p>
</div>
<li class=”menuSlide”><a href=”#”>Links</a></li>
<div class=”menuSlide”>
<p>
Sub-Menu 6
</p>
</div>
</ul>
</div>
Could you please help me make it look nice in Firefox?
Thanks in advance,
f.