selectores - Borde de CSS y la: pseudoclase dinámica de desplazamiento

selectores css

Question

Construí un menú desplegable persistente con dos niveles usando solo CSS. Es bastante estándar.

Es un conjunto anidado de UL y UL: el estado de desplazamiento es lo que muestra y oculta los niveles del submenú.

Algo como esto:

| *Pets* | Colors | Cars |
| Cats | Dogs | Birds| Goats | Sheep | 


| Pets | *Colors* | Cars |
| Red | Orange | Green | Blue| Yellow |

Luego agregué un borde de 1px en la parte inferior del elemento UL de primer nivel. Me gusta esto:

| *Pets* | Colors | Cars |
--------------------------------------
| Cats | Dogs | Birds| Goats | Sheep | 

Cuando sobrevivo un elemento de primer nivel (Mascotas), y luego muevo el mouse hacia abajo al segundo nivel (Gatos), desaparece todo el segundo nivel.

Finalmente descubrí que el borde de 1px de UL no está incluido en el área de desplazamiento para UL.

¿Puedo agregar un borde al final de un menú de menú desplegable sin estropear el menú que se desplaza?

¡Gracias!

Answer 1

Puede usar un fondo y darle una línea negra de 1px en la parte inferior, o puede agregar un elemento y colocarlo absolutamente con una altura de 1px y fondo negro. Me gustaría ir con la opción de fondo, porque es mucho más fácil.

Answer 2

Dado que en realidad está agregando el :hover estado de :hover al <li> dentro de <ul> , el borde del elemento primario <ul> no está incluido en el área de :hover . Resolvería tu problema para agregar el borde a cada <li> lugar de al padre <ul> . Asegúrese de agregar márgenes izquierdos y derechos de 0 a los <li> e incluso si lo hace, es posible que necesite agregar un margen izquierdo negativo o posición izquierda para eliminar los espacios en el borde, así como agregar estilos de anulación a el submenú <li> s si terminan con un borde inferior también.

EDITAR: Ok, tengo una solución que con suerte funcionará para ti, usando el siguiente HTML:

<ul>
    <li>Main1
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main2
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main3
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main4
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
</ul>

y este CSS:

ul { background:#ccc; border-bottom:5px solid #0c0; height:25px; }
ul li { cursor:pointer; display:inline-block; position:relative; height:30px; 
        zoom:1; _display:inline; }
ul li:hover ul { display:block; }
ul li ul { border:0 none; display:none; position:absolute; top:30px; }
ul li ul li { display:inline; padding:5px; }

Las partes clave aquí son:

• Establecer la altura de ul para que sea más pequeña que la altura de la ul li principal en una cantidad igual al border-width del border-width
• Establecer display:inline-block en display:inline-block en li para que el atributo de altura entre en vigor
  • (Nota: zoom:1; _display:inline; para IE6)
• position:relative establecida position:relative en la ul li principal y position:absolute en el sub ''ul li ul'' con el valor ''superior'' de la altura principal ''ul li''

Probado y funcionando: http://jsfiddle.net/TKrSM/1/ (puede que tenga que ajustar la altura y los valores superiores para el relleno en su versión)