CSS - Sub menu CSS

   
Vista:

Sub menu CSS

Publicado por Cristian (3 intervenciones) el 19/07/2013 16:57:32
hola a todos.... no se como hacer el submenu en este codigo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<link href="estilos/menu.css" rel="stylesheet" type="text/css" >
 
<div id="menu" >
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Lista 1</a></li>
		<li><a href="#">Lista 2</a></li>
		<ul>
			<li><a href="#">Lista 2 2</a></li>
			<li><a href="#">Lista 2 3</a></li>
 
		</ul>
		<li><a href="#">Lista 3</a></li>
		<li><a href="#">Contacto</a></li>
	</ul>
</div>
 
 
#menu  {
	 margin: 0px 0px 0px 0px;
	 height: 27px;
 
	  background-color:#FFE1BC; 
	 /*background-color:black;*/
	 text-align:left;
 
}
 
#menu ul{
	 margin:0px 0px 0px -40px;
	 height: 27px;
}
#menu li{
 
	 list-style:none;
	 float:left;
	 padding: 4px 8px ;
	 /* background-color:#004C98; */
 
	 font-family:Tahoma;
	 width:100px;
	 text-align:center;
     /*background: -webkit-linear-gradient(#09176E, #78A7D7);
 	 background: -moz-linear-gradient(#09176E, #78A7D7);
 	 background: -o-linear-gradient(#09176E, #78A7D7);
 	 background: linear-gradient(#09176E, #78A7D7); */
	 margin-right:3px;
 
}
 
#menu li:hover{
	 /*background: -webkit-linear-gradient(#78A7D7,#09176E);
 	 background: -moz-linear-gradient(#78A7D7,#09176E);
 	 background: -o-linear-gradient(#78A7D7,#09176E);
 	 background: linear-gradient(#78A7D7,#09176E);*/
 
 	 background: -webkit-linear-gradient(#FFFFFF,#FFE1BC);
 	 background: -moz-linear-gradient(#FFFFFF,#FFE1BC);
 	 background: -o-linear-gradient(#FFFFFF,#FFE1BC);
 	 background: linear-gradient(#FFFFFF,#FFE1BC);
 
}
 
a
{
	/*color:#FFFFFF; */
	 color:#CA2800;
	text-decoration:none;
 
}

MUCHAS GRACIAS !!!!!!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Sub menu CSS

Publicado por aldemar (5 intervenciones) el 22/10/2013 15:53:00
hola, mira este ejemplo talvez te sirva, proprociona submenu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// desde php 
  echo "<ul class=mi-menu>";
                 echo " <li><a href=URL_enlace_1> texto_enlace_1 </a></li>";
                echo "  <li>";
                echo "   <a href='#'> texto_enlace_2 </a>";
                echo "    <ul>";
                 echo "     <li><a href=URL_enlace_2.1> texto_submenú_2.1 </a></li>";
                 echo "     <li><a href=URL_enlace_2.2> texto_submenú_2.2 </a></li>";
                 echo "     <li><a href=URL_enlace_2.3> texto_submenú_2.3 </a></li>";
                 echo "   </ul>";
                echo "  </li>";
              echo "    <li><a href=URL_enlace_3> texto_enlace_3 </a></li>";
              echo "  </ul>";
 
//desde css
 .mi-menu li:hover > ul { opacity: 2;}
   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 36px; /* los mostramos  afecta la lista desplegable*/
    width:206px;
    overflow: visible;
    background:plate;
    border:4px;
    padding:0;
  }
  .mi-menu ul li a {
    border:3px;
    margin: 3px;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 100px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar