CSS - ayuda con drop menu

   
Vista:

ayuda con drop menu

Publicado por Juan Moreno moreno-juanjose@hotmail.com (3 intervenciones) el 25/09/2014 10:07:39
buenas! estoy utilizando para mi página Ghost con un theme llamado "minimalistic"

me gustaria agregar un drop menu para navegar por la pagina y me esta costando que el style no me cambie el resto de los UL y LI que tengo en la pagina

dejo el codigo que estoy utilizando (porque es el diseño que necesito)

lo saque de aca: http://cssdeck.com/labs/another-simple-css3-dropdown-menu


HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul><li>Home</li>
  <li>About</li>
  <li>
    Portfolio
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li>Blog</li>
  <li>Contact</li>
</ul>


css:

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
body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}
 
ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li {
  background: #555; 
  display: block;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}



soy nuevo en css, estuve viendo que con Style o con ID podria hacer que solo le cambie el estilo a la tabla del drop menu, pero luego de un largo rato sin poder vengo a preguntar aca

muchas gracias!
Juan
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
Imágen de perfil de xve

ayuda con drop menu

Publicado por xve (349 intervenciones) el 25/09/2014 18:10:47
Hola Juan, una manera de hacerlo, es poniendo un id en el ul... algo así:

1
<ul id="miID"><li>Home</li>

Luego en los estilos, puedes hacer referencia al ID en vez de al UL

1
miID {...}

No se si me he explicado bien... coméntanos, ok?
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

ayuda con drop menu

Publicado por Juan Moreno moreno-juanjose@hotmail.com (3 intervenciones) el 25/09/2014 19:45:15
gracias por contestar xve!

si, estuve intentando eso, y hasta el ul vamos bien. me marea despues darle estilo al resto

por ej, puedo cambiar por ID's cada una de las que estan en el css, UL LI, UL LI UL, UL LI UL LI, etc, pero luego nose como el html lee esas ids, ya que solo tengo UL y LI

digamos, podria hacer esto en css:

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
#wg10 {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}
 
#wg11 {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
#wg12 {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#wg13 {
  background: #555;
  color: #fff;
}
#wg14 {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#wg15 { 
  background: #555; 
  display: block;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}


etc, o me estoy confundiendo en el uso de IDs? nose luego como hacer que el html lea estas ids

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
Imágen de perfil de xve

ayuda con drop menu

Publicado por xve (349 intervenciones) el 25/09/2014 20:51:32
Hola Juan, si creo que te estas confundiendo.

Unicamente tiene que haber un id...

Un ejemplo:
1
2
3
4
5
6
<ul id="miID">
    <li>Home</li>
    <ul>
        <li>Link</li>
    </ul>
</ul>

El css para que únicamente afecte a ese ul y su contenido tiene que ser algo así:
1
2
3
4
#miID {} /* hace referencia únicamente al ul */
#miID li {} /* hace referencia a todos los li que hay dentro el id miID */
#miID>li {} /* hace referencia solo a los li que hay por debajo de ul, pero que son directos (únicamente el li que contiene home)*/
#miID ul li {} /* hace referencia únicamente a todos los li que hay dentro del id miID y dentro del ul que hay dentro de miID*/

No se si me he explicado... si lo pruebas, veras que funciona.
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

ayuda con drop menu

Publicado por Juan Moreno (3 intervenciones) el 25/09/2014 21:50:57
genial! creo que lo entendi. Luego lo pruebo y comento como me fue, gracias!
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