Se trata de un mil ejercicios educación Feng, compartirá sus propias ideas.
Soy un pequeño pueblo en forma de T-Pay, un practicantes de Internet se adhieren a la formación permanente. Al igual que mi blog Celebro el enfoque en CSDN, si hay una cuota por favor problema en la sección de comentarios de abajo, gracias.
Directorio artículo
Los resultados finales
Como se muestra, Pase el ratón sobre una etiqueta, la etiqueta correspondiente a la siguiente sub-menú aparecerá
pensamiento
La idea central es el uso display:none;de elementos de visualización y oculta. Los principales mentiras de dificultad en el uso de selectores CSS correspondientes a cada uno de los menú principal para seleccionar el submenú éxito.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<span id="btn1">menu1</span>
<span id="btn2">menu2</span>
<span id="btn3">menu3</span>
<div id="menu1">
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div id="menu2">
<ul>
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div id="menu3">
<ul>
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
div{
display: none;
width: 138px;
}
span,div{
background-color: aquamarine;
}
#btn1:hover~#menu1{
display: block;
}
#btn2:hover~#menu2{
display: block;
}
#btn3:hover~#menu3{
display: block;
}
Donde #btn1:hover~#menu1la línea ondulada indica #btn1:hoverdetrás de toda la Identificación del menu1elemento. Hay similar y la línea ondulada además +, un signo más indica detrás del elemento delanteroal lado deDespués de un elemento.
