Expandir apenas os submenus

[TeixeiraRamos 4]

Trata-se de um menu drop down horizontal em HTML e CSS.

Estou tendo dificuldade para expandir somente os submenus.

Não desejo que o menu seja expandido só os submenus.

A CSS é essa:

@charset "utf-8";

#nav, #nav ul {
	width: 70em; 
	list-style:none;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	margin:0;
	padding: 0; 
	color: #FFFFFF;
     }

#nav li {
	float:left;
    }
	
#nav a {
	display:block;
	width:10em;    
	height:2em; 
	line-height:2;
	text-align: left;
	text-decoration:none;
	background-color:#69c; /*IE precisa desta declaração */
	color:#fff;
	border: 1px solid #ccc;
	border-width: 0 1px 1px;
	padding-left: 5px; 
    }
	
#nav a:hover {
     text-decoration:none;
	 background: #c7daec;
	 color: #69c;
     }
	 
#nav li ul {
	position:absolute;
	left: -1000em; 
	width: 10em;   
	margin: 0; 
     }

#nav ul ul {
      margin: -2.1em 0 0 10.1em; 
     }
 
#nav li:hover ul ul, #nav li .over ul ul {
     left: -1000em; 
     }

#nav li:hover ul, #nav li li:hover ul, #nav li .over ul, #nav li li .over ul {
      left: auto;
      }  	 
	 
	 	 
	  

 

[TeixeiraRamos 4]

Estou setando o submenu com width erradamente.

Fui testando um a um até onde não devia e não deu certo.

Desejo que fique igual aos submenus do menu desta página como por exemplo.

[William Bruno 1501]

coloque um link online da sua tentativa.

[TeixeiraRamos 4]

OK vou preparar o link. Já retirei mas vou refazer o que tentei.

Por favor, aguarde.

Aqui o link

 

http://www.informacaoteixeira.com.br/meumenuteste.html

 

Por favor, observe em "Radioamador" e o submenu "Alfabeto" o correto seria "Alfabeto Internacional Fonético"

 

Aqui eu inclui o width 20em

 

#nav li:hover ul, #nav li li:hover ul, #nav li .over ul, #nav li li .over ul {
      left: auto;
	  width: 20em; /*originalmente não existia seria aqui?*/ 
	  }  	 

[William Bruno 1501]

o "erro" é q vc está se atrapalhando na cascata.

 

essa regra aqui:

#nav a

quebre em duas:

#nav > li > a {
    width: 10em;
}

#nav a {
    display: block;
    height: 2em;
    line-height: 2;
    text-align: left;
    text-decoration: none;
    background-color: #69c;
    color: #fff;
    border: 1px solid #ccc;
    border-width: 0 1px 1px;
    padding-left: 5px;
}

[TeixeiraRamos 4]

Desculpe Willian, ainda estou errando feio. Coloquei dessa forma a CSS ai altera tudo não só os submenus.

 

#nav a {
	display:block;
	/*width: 10em; /*Posisiona os submenus*/  
	height:2em; /*Posisiona os submenus*/
	line-height:2;
	text-align: left;
	text-decoration:none;
	background-color:#69c; /*IE precisa desta declaração */
	color:#fff;
	border: 1px solid #ccc;
	border-width: 0 1px 1px;
	padding-left: 5px; /* os nomes dentro das li são afastados */
    }
	
/* inclui aqui e coloquei comentário na nav a*/	
#nav li a {
    width: 20em;
    }

[William Bruno 1501]

vc não tá fazendo oq eu falei.. vamos tentar de novo.

Troca isso:

#nav li a {
    width: 20em;
    }

por:

#nav ul li a {
    width: 20em;
}

ali qndo eu coloquei os > foi intencional. Era para vc usar eles tb, e não tirar eles fora.

[TeixeiraRamos 4]

Perdão Willian,

Estou realmente errando. Demorei para responder porque estava tentando resolver o segundo nível agora.

Na realidade não estou sabendo identificar onde fica a #nav do menu do segundo nível. Ele também não envolve ul li a

É o mesmo processo mas onde colocar? Observe como ficou no exemplo "Interface" e "Gráfica".

 

http://www.informacaoteixeira.com.br/meumenuteste.html

[William Bruno 1501]

#nav ul ul {
    margin: -2.1em 0 0 20.5em;
}

pergunta: pq vc está fazendo tudo com em ?

[TeixeiraRamos 4]

William,

Foi resolvido graças aos seus ensinamentos.

Com relação ao uso de tudo com "em" é pq o exemplo do livro está tudo em "em".

Seria melhor usar o que?

[William Bruno 1501]

Depende do seu objetivo. Se vc está usando em sem nenhuma razão, então use px.

[TeixeiraRamos 4]

Willian,

Não, não tem uma razão, ou seja, substituir esse menu que está aqui http://www.informacaoteixeira.com.br/ por um com submenus.

Dai comecei a estudar para mudar.

Achei que daria para aproveitar a css que já tenho e ir acrescendo o que fosse necessário para substituir para um submenu mais estou encontrando dificuldade ainda. Alterei só o HTML começou a desconfigurar a página toda.

Essa é a folha de estilo que está no link acima que desejo mudar:

 

ul#nav {
	position : absolute;
	left : 0;
	top : 100px;
	padding : 0;
	width : 980px;
	height : 25px;
	background : #666666 url(../images/fundo_barra_menu.JPG) repeat;
	font-weight : bold;
	margin: 0px;
} 

ul#nav li {
	margin-right : 0px;
	display : inline;
	list-style-type : none;
	background : #666666 url(../images/fundo_barra_menu.JPG) repeat;
	color: #FF9900;
} 

ul#nav li a {
	float : left;
	color : #fff;
	font-size : 10px;
	font-weight : bold;
	text-decoration : none;
	text-transform : uppercase;
	padding : 3px 10px 7px;
	margin-right : 25px;
	background : #666666 url(../images/fundo_barra_menu.JPG) repeat;
} 

ul#nav li a:hover { 
	background : #cccccc repeat-x 0% 0%; 
} 

Daria para aproveitar toda a esterilização do que já tenho e alterar apenas o HTML?

Gostaria muito de manter o mesmo mas com submenus. Ficaria muito complexo para meu nível?

[William Bruno 1501]

não cara, é bem simples.

[TeixeiraRamos 4]

William,

Por favor, você acredita que é possível aproveitar CSS do menu que já tenho e trabalhar os submenus?

Não tenho ideia por onde iniciar. O que você viu no link foi o primeiro menu que fiz.

Poderia informar o que devo alterar na CSS que tenho para criar os submenus?

ul#nav {
	position : absolute;
	left : 0;
	top : 100px;
	padding : 0;
	width : 980px;
	height : 25px;
	background : #666666 url(../images/fundo_barra_menu.JPG) repeat;
	font-weight : bold;
	margin: 0px;
} 

ul#nav li {
	margin-right : 0px;
	display : inline;
	list-style-type : none;
	background : #666666 url(../images/fundo_barra_menu.JPG) repeat;
	color: #FF9900;
} 

ul#nav li a {
	float : left;
	color : #fff;
	font-size : 10px;
	font-weight : bold;
	text-decoration : none;
	text-transform : uppercase;
	padding : 3px 10px 7px;
	margin-right : 25px;
	background : #666666 url(../images/fundo_barra_menu.JPG) repeat;
} 

ul#nav li a:hover { 
	background : #cccccc repeat-x 0% 0%; 
} 

#rodape {
	height : 20px;
	clear : both;
	background : #666666 url(../images/fundo_barra_menu.JPG) repeat center center;
	font : bold 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #FFFFFF
} 

Muito obrigado pela força.

[William Bruno 1501]

vc acabou de postar um menu com submenu aqui.

 

basta entender oq vc mesmo postou e fazer ai.