Jump to content

[Resolvido] Submenu


PF2G
 Share

Recommended Posts

Bom dia,

eu estou a fazer um menu em css, e agora queria criar um submenu.

Já tentei ver várias hipóteses mas não consegui, por isso voltei à estaca zero:

<div id="nav">
		    <ul>
			    <li><a href="index.php">Home</a></li>
 <li><a href="#">Quem Somos</a></li>
			    <li><a href="bands.php">Bandas</a>
  <ul>
   <li>Estilos</li>
   <li>Lista de Bandas</li>
   <li>Tours</li>
   <li>Álbuns</li>
   <li>Adicionar Banda</li>
  </ul>
 </li>
			    <li><a href="admin/index.php" target="_blank">Administração</a></li>
			    <li><a href="register.php">Registar/Login</a></li>
 <li><a href="profile.php">Perfil</a>
  <ul>
   <li>Resumo Perfil</li>
   <li>Editar Perfil</li>
   <li>Mensagens (0)</li>
  </ul>
 </li>
 <li><a href="#">Novidades</a>
  <ul>
   <li>Notícias</li>
   <li>Novos Álbuns</li>
   <li>Entrevistas</li>
   <li>Tracklist da Semana</li>
  </ul>
 </li>
			    <li><a href="#">Fórum</a></li>
 <li><a href="partners.php">Parceiros</a></li>
			    <li><a href="contact.php">Contacte-nos</a></li>
		    </ul>
	    </div>

/* new_menu */
#nav
{
float: left;
   padding:1px;
height: 50px;
background: url('images/menu.gif') no-repeat center top;
}
#nav ul{
padding:0px;
   margin:0px;
   float: left;
   width: 100%;
height:50px;
   background-color:#000000;
   list-style:none;
}
#nav ul li
{
   display: block;
float: left;
height: 50px;
margin-left: 0;
border-bottom: 1px solid #5E5E5E;
background: #3E3E3E url('images/menu.gif') no-repeat center top;
}
#nav ul li a
{
  display: block;
  font-size:1.1 em;
  text-decoration: none;
  float:left;
  padding: 20px 13px 10px 10px;
  background: #262626 url('images/menu2.gif') repeat-x;
  border-bottom:1px;
  border-bottom-color:#000000;
  border-bottom-style:solid;
  line-height: 50px;
  text-shadow: -1px 1px 0 #000000;
  color: #FFFFFF;
}
#nav ul li a:hover
{
  color: #CCCCCC;
  background: #3E3E3E url('images/menu.gif') repeat-x;
  padding-bottom:10px;
  border-bottom:3px;
  border-bottom-color:#000000;
  border-bottom-style:solid;
  text-decoration: none;
}

Se alguem me puder ajudar agradeço.

Cumprimentos,

PF2G

Link to comment
Share on other sites

Ja resolvi o problema 😛

Mas o submenu nao me aparece em bloco mas sim em linha :S Alguem me pode ajudar?

/* menu */
#menu
{
font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
float: right;   
height: 73px;
width:100%;
background: url('images/menu.gif') no-repeat right top;
}
#menu ul
{
list-style: none;
}
#menu ul li
{
display: block;
float: left;
height: 72px;
margin-left: 1px;
padding-left: 1px;
background: #3E3E3E url('images/menu.gif') no-repeat left top;
border-bottom: 1px solid #5E5E5E;
}
#menu ul li a
{
display: block;
float: left;
margin: 0;
padding: 20px 32px 0 32px;
font-size: 1.1em;
font-weight: bold;
line-height: 50px;
text-shadow: -1px 1px 0 #000000;
color: #999999;
background: #262626 url('images/menu2.gif') repeat-x;
}
#menu ul li a:hover
{
color: #CCCCCC;
text-decoration: none;
background: #3E3E3E url('images/menu.gif') repeat-x;
}
/* submenu */
#menu li ul
{
display: none;
}
#menu li:hover ul, #menu li.hover ul
{
position: absolute;
display: block;
}
#menu li:hover li a, #menu li.hover li a
{
color: #FFFFFF;
}
Link to comment
Share on other sites

Mas o submenu nao me aparece em bloco mas sim em linha :S Alguem me pode ajudar?

Não percebi.

Edited by brunoais

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

#nav ul li
{
display: block;
float: left;

Isto vai ser herdado para os níveis seguintes.

Ou reinicias no nível seguinte através de "li li", ou alteras esse para "ul>li" de forma a só aplicar aos filhos.

Edited by Battousai
Link to comment
Share on other sites

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
 Share

×
×
  • 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.