Jump to content

Menu + Submenu


Drone

Recommended Posts

Boas, estou a estudar CSS agora mais aprofundado e preciso aqui d1 helpzito,

Tou a fazer um menu que tem um Sub menu, no FireFox funciona às mil maravilhas e com o iexplorer ta uma borrada total... ja andei aqui as voltas e nao consigo ate porque este codigo vi num tutorial que estive a ler, nao percebo se alguem me puder dar uma ajudinha agradecia 😕

HTML:

<ul id="nav">
<li><a href="?pagina=horario" title="Horario">Horário</a></li>
<li><a href="?pagina=pagamentos" title="Historico de Pagamentos">Histórico de Pagamentos</a></li>
<li><a href="#" title="Envio de Mensagens">Envio de Mensagens</a>
	<ul>
		<li><a href="?pagina=cxentrada" title="Mensagens > Caixa de Entrada">Caixa de Entrada</a></li>
		<li><a href="?pagina=cxsaida" title="Mensagens > Caixa de Saida">Caixa de Saída</a></li>
	</ul>					</li>
<li><a href="#" title="Plano Curricular">Plano Curricular</a></li>
<li><a href="#" title="Procedimentos de Formacao">Procedimentos de Formação</a></li>
<li><a href="?pagina=perfil" title="Meu Perfil">Meu perfil</a></li>
<li><a href="?pagina=sair" title="Sair">Sair</a></li>
</ul>

CSS:

ul {
width: 200px;
padding: 0;
margin: 0;
font: 10px Verdana;
list-style: none;
width: 200px;
}

ul li { position:relative; }

ul li ul {
position: absolute;
left: 200px;
top: 0;
display: none;
}

ul li a {
border-left: 10px solid #006599;
border-right: 5px solid #fff5ee;
border-bottom: 1px solid #006599;
background-color: #E4F2F9;
color: #006599;
text-align: left;
text-decoration: none;
padding: 5px 5px 5px 10px;
display: block;
margin: 0px;
}

ul li ul {
border: 1px solid #006599;
}

ul li ul li a {
border-left: 10px solid #006599;
border-right: 5px solid #fff5ee;
border-bottom: 1px solid #006599;
background-color: #E4F2F9;
color: #006599;
text-align: left;
text-decoration: none;
padding: 5px 5px 5px 10px;
display: block;
margin: 0px;
}

ul li a:hover {
border-left: 10px solid #4497C2;
border-right: 5px solid #fff;
background-color: #F7FAFC;
color: #006599;
font-weight: bold;
}

li:hover ul, li.over ul { display: block; }

http://img227.imageshack.us/img227/3204/internetexplorermd5.jpg

http://img213.imageshack.us/img213/1536/firefoxgb7.jpg

Link to comment
Share on other sites

  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.