Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jeovan_toledo

menu horizontal com sub menus

Por , em Desenvolvimento frontend

Recommended Posts

jeovan_toledo    0

jeovan_toledo
Postado

Galera estou fazendo um menu em css na horizontal Dropdown, que até a parte de faze-lo na horizonta fiz sem problemas, agora pra criar os submenus não estou conseguindo...abaixo mando o código do html e o css...se alguém tiver alguma dica agradeço...

 

HTML======================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css"/>

<title>Eagle Team - 2011</title>
</head>

<body topmargin="0">
 <!--Aqui vai div tudo--> 
 <div id="tudo">

             <div id="topo"> <!--aqui termina o topo-->

              <div id="menu"><!--inicio menu-->
                   <ul class="nav">
      <li><a href="#">HOME</a></li>
      <li><a href="#">BLOGS</a></li>
      <li><a href="#">DOWNLOADS</a></li>
      <li><a href="#">FOTOS</a></li>
         <ul class="nav2"> 

                       <li><a href="#about1">About link 1</a></li> 
                       <li><a href="#about2">About link 2</a></li>           
                       <li><a href="#about3">About link 3</a></li>             
                       <li><a href="#about4">About link 4</a></li> 
                       <li><a class="endlist" href="#about5">About link 5</a></li> 

</ul> 

</li> 

</ul> 

      <li><a href="#">RELÁTÓRIOS</a></li>
      <li><a href="#">PRESIDENTE</a></li>
      <li><a href="#">VÍDEOS</a></li>
      <li><a href="#">CONTATO</a></li>
  </ul>
              </div> <!--menu final-->

</div> <!--aqui termina o topo-->

   <div id="topo2"></div>
   <div id="conteudo"><!--inicio div conteudo-->
   </div> <!--final div conteudo-->

   <div id="rodape"></div>

 </div><!--final div tudo-->

</body>
</html>

 

CSS======================

/*menu horizontal*/		

 ul.nav{
	margin-left:0px;
	padding-left:0px;
	list-style:none;
	border-bottom:0px;
	overflow:hodden;
	zoom:1;
	 }
 ul.nav li{
	float:left;
	}

 ul.nav a{
width:8em;
display: block;
border-style: 3px dashed solid;
border-bottom:none;
padding:6px;
margin-right:4px;
text-decoration:none;
color:#FFF;
text-align:center;
		}


/*submenu*/


ul.nav2 sub{
	width:8em;
	float:left;  
       padding:25px 0px 0px 0px; 
       margin:0; 
       list-style:none; 
       background-image:url(images/tophover1.png);
       background-repeat:no-repeat; 
       background-position:left top; 
       margin:-25px 0px 0px 0px; 
	}

	ul.nav2 li a {    
       float:left;   
       width:120px;    
       background:#369;    
       clear:left;    
       color:#fff;} 

	ul.nav2 li a.endlist 
	{background:url(images/bottom1.png); }
       ul.nav2 li a.endlist:hover, 
       ul.nav2 li a.endlist:focus, 
       ul.nav2 li a.endlist:active 

	{background:url(images/bottomhover1.png); }
       ul.nav2 a:hover, 
       ul.nav2 a:focus, 
       ul.nav2 a:active {     
       background:#900; 
       margin-right:1px;    
       color:#fff; 
	}


  a{
	text-decoration:none;	
	}

  a:hover {
			text-decoration: underline;

		}

/*menu horizontal*/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Testa ae..

 

<ul class="nav2">

 

<li><a href="#about1">About link 1</a></li>

<li><a href="#about2">About link 2</a></li>

<li><a href="#about3">About link 3</a></li>

<li><a href="#about4">About link 4</a>

<ul>

<li><a href="#about4">Sub menu1</a></li>

<li><a href="#about4">Sub menu2</a></li>

<li><a href="#about4">Sub menu3</a></li>

</ul>

</li>

<li><a class="endlist" href="#about5">About link 5</a></li>

 

</ul>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito