Menu horizontal com submenu horizontal

[Jl Bahia 0]

Boa tarde a todos.

Em primeiro lugar gostaria de informar que sou completamente LEIGO em HTML, PHP, CSS... (programação em geral), minha área é administrativa. Este é meu primeiro post no fórum. Sou apenas um empreendedor querendo botar os negócios pra frente, mais que por questões financeiras estou confeccionando meu próprio site por HTML e CSS (pelo Dreamweaver CS6) e graças a DEUS estou conseguindo. Mais estou a 3 semanas me batendo, tentando criar um menu horizontal com submenu horizontal. Tive grandes avanços, inclusive muitas dúvidas consegui tirar por meio deste fórum. Mais infelizmente não consigo colocar meu menu pra funcionar (hora desalinha, hora não aparece o efeito, hora foge do tamanho). Sei que pra vcs é moleza, pelo menos aparentemente pra mim parece ser bem simples o menu. Tentei pegar alguns exemplos e adaptar ao meu, mais como falei sou completamente leigo e estou a quase 1 mês aprendendo por meio do youtube e tutoriais que encontro, e no final não consigo colocar pra funcionar como desejado. Deixar eu ser mais claro:

Preciso de um menu (width: 960px e height: 30px) onde ao passar o mouse por cima ele tenha um efeito e em seguida abra o submenu, sendo que o submenu tem sua posição ajustada em tamanho, forma e posição de acordo com a categoria.

Pesquisei muito, mais sempre vejo "menu em dropdow..." e não consegui adaptar ao meu. Estou a 3 semanas parado nisso. Peço humildemente essa grande ajuda de vcs. Desde já agradeço.

 

Alguém poderia me ajudar a enviar o modelo para melhor entendimento?

 

 

[AndersonMamede 88]

Mostra como está seu código...

 

Você também pode utilizar algum menu como modelo:

https://www.google.com.br/search?site=&source=hp&q=html+menu+dropdown+horizontal

[Jl Bahia 0]

HTML

 

 

<div class="geral">
<div class="topo"><!--Inicio topo-->
<h1> Viip Turismo e Eventos</h1> <!--nome da empresa para sites de busca-->
<div id="menu"><!-- menu-->
<ul>
<li onmouseover="mostrar('ul2')" onmouseout="ocultar('ul2')"><a href="#">Home</a></li>
<img src="img/menuprincipal_separador.png" class="menuprincipal_separador" />


<li><a href="#">Institucional</a></li>
<img src="img/menuprincipal_separador.png" class="menuprincipal_separador" />
<li><a href="#">Viagens</a></li>
<img src="img/menuprincipal_separador.png" class="menuprincipal_separador" />
<li><a href="#">Eventos</a></li>
<img src="img/menuprincipal_separador.png" class="menuprincipal_separador" />
<li><a href="#">Monte o seu</a></li>
<img src="img/menuprincipal_separador.png" class="menuprincipal_separador" />
<li><a href="#">Multimídia</a></li>
<img src="img/menuprincipal_separador.png" class="menuprincipal_separador" />
<li><a href="#">Contatos</a></li>
</ul>
</div><!-- fim do menu -->
<div id="submenu_institucional"><!-- submenu institucional-->
<ul>
<li><a href="#">Quem somos</a></li>
<img src="img/menuprincipal_separador.png" class="menuprincipal_separador" />
<li><a href="#">Diferenciais</a></li>
<img src="img/menuprincipal_separador.png" class="menuprincipal_separador" />
<li><a href="#">Nossos serviços</a></li>
</ul>
</div><!-- fim do submenu institucional -->
<div id="submenu_viagens"><!-- submenu viagens-->
<ul>
<li><a href="#">Internacionais</a></li>
<img src="img/menuprincipal_separador.png" class="menuprincipal_separador" />
<li><a href="#">Nacionais</a></li>
</ul>
</div><!-- fim do submenu viagens -->
<div id="submenu_multimidia"><!-- submenu institucional-->
<ul>
<li><a href="#">Arquivos</a></li>
<img src="img/menuprincipal_separador.png" class="menuprincipal_separador" />
<li><a href="#">Fotos</a></li>
<img src="img/menuprincipal_separador.png" class="menuprincipal_separador" />
<li><a href="#">Videos</a></li>
</ul>
</div><!-- fim do submenu institucional -->

 

 

Sei que vai achar vários erros, mais como estou aprendendo, foi o único jeito que consegui fazer de forma que ajustasse tudo.

 

 

 

 

CSS

 

 

*{ margin: 0 auto 0;
padding: 0;
}

.geral{
width: 960px;
}

h1{
background: url(../img/Banner%20topo%20oficial%20960x300.jpg) no-repeat;
width: 960px;
height: 300px;
text-indent: -999px;
}

/*** início menu principal***/
div#menu{
width: 960px;
height: 30px;
float: left;
margin-top: 2px;
background: #676767;
border-radius: 5px;
position: relative;
text-align: center;
}

div#menu li{
float: left;
list-style: none;
}

div#menu li a{
display:block;
float: left;
text-decoration: none;
color: #E5E5E5;
font-family: Arial;
font-size: 15px;
padding: 5px 38px;
}

div#menu li a:hover{
background: url(../img/menuprincipal_efeito.png) repeat-x;
height: 20px;
color: #02817f;
}

div#menu li ul{
display:none;
position: absolute;
}

div#menu li a:hover ul{
display:block;
}

.menuprincipal_separador{
float:left;
}
/*** fim do menu principal***/


/*** início submenu intitucional***/
div#submenu_institucional{
width: 386px;
height: 30px;
float: left;
margin-top: 2px;
background: #676767;
border-radius: 5px;
position: relative;
text-align: center;
display:none;
}

div#submenu_institucional li{
float: left;
list-style: none;
}

div#submenu_institucional li a{
float: left;
text-decoration: none;
color: #E5E5E5;
font-family: Arial;
font-size: 15px;
padding: 5px 18px;
}

div#submenu_institucional li a:hover{
background: url(../img/menuprincipal_efeito.png) repeat-x;
height: 20px;
color: #02817f;
}

div#submenu_institucional li ul{
position: absolute;
}


/*** fim do submenu intitucional***/


/*** início submenu viagens***/
div#submenu_viagens{
width: 227px;
height: 30px;
float: left;
margin-top: 2px;
background: #676767;
border-radius: 5px;
position: relative;
text-align: center;
display:none;
left: 205px;
}

div#submenu_viagens li{
float: left;
list-style: none;
}

div#submenu_viagens li a{
float: left;
text-decoration: none;
color: #E5E5E5;
font-family: Arial;
font-size: 15px;
padding: 5px 18px;
}

div#submenu_viagens li a:hover{
background: url(../img/menuprincipal_efeito.png) repeat-x;
height: 20px;
color: #02817f;
}

/*** fim do submenu viagens***/

/*** início submenu multimidia***/
div#submenu_multimidia{
width: 247px;
height: 30px;
float: left;
margin-top: 2px;
background: #676767;
border-radius: 5px;
position: relative;
text-align: center;
display:none;
left: 625px;
}

div#submenu_multimidia li{
float: left;
list-style: none;
}

div#submenu_multimidia li a{
float: left;
text-decoration: none;
color: #E5E5E5;
font-family: Arial;
font-size: 15px;
padding: 5px 18px;
}

div#submenu_multimidia li a:hover{
background: url(../img/menuprincipal_efeito.png) repeat-x;
height: 20px;
color: #02817f;
}


/*** fim do submenu multimidia***/

#monte_a_sua li a{
float: right;
list-style:none;
text-decoration:none;
margin-top: 45px;
margin-right: 5px;
font-size: 20px;
font-family:arial;
color: #717171;
}

#img_monte_a_sua{
float: right;
margin-top: 5px;

 

 

 

As submenus só aparecem quando eu coloco "display:block".

 

Consegui montar desse jeito, mais não consigo fazer com que ao passar o mouse elas apareçam.

[AndersonMamede 88]

Dá uma olhada aqui e veja se é isso que você precisa (está bem básico e acho que fácil de entender/adaptar):
http://forum.imasters.com.br/topic/549886-metodos-para-fazer-menu-dropdown/?p=2195308

[Jl Bahia 0]

Fala Anderson,

 

Cara valeu mesmo pela ajuda hein. Em um dos links que vc mandou consegui achar algo que adaptei ao meu menu.

Segue o novo menu:

 

 

HTML

 

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Institucional</a>
<ul>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Diferenciais</a></li>
<li><a href="#">Serviços</a></li>
</ul>
</li>
<li><a href="#">Viagens</a>
<ul>
<li><a href="#">Internacionais</a></li>
<li><a href="#">Nacionais</a></li>
</ul>
<li><a href="#">Eventos</a>
<li><a href="#">Monte a sua</a>
<li><a href="#">Multimidia</a>
<ul>
<li><a href="#">Arquivos</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Videos</a></li>
</ul>
</li>
<li><a href="#">Contatos</a></li>
</ul>

 

 

CSS

 

ul {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding:0;
list-style:none;
margin:0;}

ul li {
display:block;
position:relative;
float:left;}

li ul {
display:none;}

ul li a{
display:block;
text-decoration:none;
font-variant:small-caps;
color:#a9a9a9;
border-top:1px solid #FFF;
border-left:1px solid #FFF;
padding: 5px 20px 5px 20px;}

ul li a:hover {
background: url(../../menuprincipal_efeito.png) repeat-x;}


li:hover ul {
display:inline-block;
position:absolute;
float:left;}

li:hover li {
float:none;
font-size:12px;}

li:hover a {
background:;
color: #02817f;}

li:hover li a:hover {
background: url(../../menuprincipal_efeito.png) repeat-x;
color: #02817f;}

 

 

Só estou aprendendo a quase 1 mês, mais precisamente 3 semanas. Já estou ligado em algumas coisas. Mais ainda com dificuldades em outras. Antes desse site nunca tive contato com programação. Então to me virando nos 30 e até me saindo bem, mais me tira umas dúvidas:

 

 

1) Nesse CSS como eu tiraria esse submenu de vertical para horizontal?

2) Como posso fazer com que o submenu não fique posicionado flutuando?

3) Caso deseje que ele fique alinhado a direita, onde eu daria o "float:rifgt;"

 

 

Mais uma vez, obrigado!

[AndersonMamede 88]

Você teria que trabalhar nas propriedades display, position e float... são elas que definem como seu menu vai se posicionar.

[davidfiju 0]

https://www.youtube.com/channel/UCLdFdPf3bbnlAHbCtymp_UQ