Ir para conteúdo

Arquivado

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

MarcosMattos

submenus

Por , em Desenvolvimento frontend

Recommended Posts

MarcosMattos    0

MarcosMattos
Postado

Pessoal eu ja tenho um submenu mas queria q o submenu abrice um outro na vertical alguem sabe como fazer ?




<nav>
  <ul class="menu">
		<li><a href="?id=inicial">Home</a></li>
		<li><a href="?id=novi">Novidades</a></li>
	  		<li><a href="#">Fifa Stars Cup</a>
	         	<ul>
	                  <li><a href="#">Regulamentos e Cronogramas</a></li>
	                  <li><a href="#">Fifa Stars Cup 2015</a></li>
	                  <li><a href="?id=galeria">Galeria de imagens</a></li>                    
	       		</ul>
			</li>
		<li><a href=""></a></li> 
		<li><a href=""></a></li> 
		<li><a href=""></a></li> 
		<li><a href=""></a></li>  
		<li><a href=""></a></li> 
		<li><a href=""></a></li> 
		<li><a href="?id=parceiros">Parceiros</a></li> 
		<li>
		<a href="#">Ranking</a> 
	         	<ul>
	                  <li><a href="?id=rank">Ranking Geral</a></li>
	                  <li>
			  <a href="#">Temporada 2015</a>
			  </li>                    
	       		</ul>
		</li>  
		<li><a href="?id=sobre">Sobre a FCFDV</a></li>           
</ul>
</nav>

Compartilhar este post

Link para o post
Compartilhar em outros sites

destruidoro    0

destruidoro
Postado 
<nav>
  <ul class="menu">
<li><a href="?id=inicial">Home</a></li>
<li><a href="?id=novi">Novidades</a></li>
  <li><a href="#">Fifa Stars Cup</a>
         <ul>
                 <li><a href="#">Regulamentos e Cronogramas</a></li>
                 <li><a href="#">Fifa Stars Cup 2015</a></li>
 <ul class="sub-menu">
                                <li><a href="#">fifa2015</a></li>
                                <li><a href="#">fifa2014</a></li>
                                <li><a href="#">fifa2013</a></li>
</ul> 
                 <li><a href="?id=galeria">Galeria de imagens</a></li>                    
       </ul>
</li>
<li><a href=""></a></li> 
<li><a href=""></a></li> 
<li><a href=""></a></li> 
<li><a href=""></a></li>  
<li><a href=""></a></li> 
<li><a href=""></a></li> 
<li><a href="?id=parceiros">Parceiros</a></li> 
<li>
<a href="#">Ranking</a> 
         <ul>
                 <li><a href="?id=rank">Ranking Geral</a></li>
                 <li>
 <a href="#">Temporada 2015</a>
 </li>                    
       </ul>
</li>  
<li><a href="?id=sobre">Sobre a FCFDV</a></li>           
</ul>
</nav>
Ficaria assim porem você tem que criar um css do sub menu que ja adicionei em baixo do fifa star Cup 2015
<ul class="sub-menu">
<li><a href="#">fifa2015</a></li>
<li><a href="#">fifa2014</a></li>
<li><a href="#">fifa2013</a></li>
</ul>

 

se tiver mais duvida mande seu css. mais acho que é isso que quer

 

 

 

criei o css do sub menu em baixo do menu exemplo:

 

.menu,
.sub-menu {
list-style: none;
background: #000;
}
.sub-menu {
background: #444;
.sub-menu {
display: none;
position: absolute;
min-width: 150px;
}
.sub-menu li:hover {
background: #555;
}
.sub-menu .sub-menu {
top: 0;
left: 100%;
}
Ou do jeito que quiser... so posicionar o submenu no css, se nao for isso mande o seu css.

Compartilhar este post

Link para o post
Compartilhar em outros sites

MarcosMattos    0

MarcosMattos
Postado

queria q esse sub men so aparecese quando passa mause em cima ed fifa star pode me ajudar

 

meu css ta assim

*{margin: 0; padding: 0;}

body{
	font-family: arial, helvetica, sans-serif;
	font-size: 22px;
	z-index: 1000;
}

.menu{list-style:none; border:0px solid #ffffff; float:left; z-index: 1000;}

.menu li{position:relative; float:left; border-right:4px solid #fffffff; z-index: 1000;}

.menu li a{color:#ffffff; text-decoration:none; padding:15px 20px; display:block; z-index: 1000;}

.menu li a:hover{color:#ffffff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ffffff; text-shadow:0px 0px 5px #000000; z-index: 1000;}

.menu li   ul{position:absolute; top:40px; left:0; background-color:#F7D358; display:none; z-index: 1000;}

.menu li:hover ul, .menu li.over ul{display:block; z-index: 1000;}

.menu li ul li{border:3px solid #ffffff; display:block; width:150px; z-index: 1000;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

destruidoro    0

destruidoro
Postado

Olha esse seu menu ta meio zuado, eu vou te passar um menu mastigado e css so trocar as cores vc tem um minina noção de html e css ne? se não tiver fica dificil ta uma assistida em alguns videos de html e css recomendo http://www.cursoemvideo.com/

 

Ok vamos lá

 

HTML:

<div class="menu-container">
    <ul class="menu clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">Fifa Stars Cup</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">Fifa Stars Cup 2015</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Fifa Sub Sub</a>
                            <!-- Nível 3 -->
                            <!-- submenu do submenu do submenu -->
                            <ul class="sub-menu">
                                <li><a href="#">ex Fifasub sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                            </ul><!-- submenu do submenu do submenu -->
                        </li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
            </ul><!-- submenu -->
        </li>
        <li><a href="#">seumenu</a></li>
        <li><a href="#">seumenu</a></li>
        <li><a href="#">seumenu</a></li>
    </ul>
</div>

CSS:

body, 
.menu,
.sub-menu {
    margin: 0;
    padding: 0;
}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
.menu,
.sub-menu {
    list-style: none;
    background: #000;
}
.sub-menu {
    background: #444;
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
}
.menu > li:hover {
    background: #444;
}
.menu li:hover > .sub-menu {
    display: block;
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 150px;
}
.sub-menu li:hover {
    background: #555;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

Adapta este, ta bem melhor só trocar cores ver tamanho etc....

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