El enfoque de este artículo es mostrar y ocultar el menú desplegable al pasar el mouse usando CSS. La tarea se puede realizar utilizando la propiedad de visualización y el selector de desplazamiento .
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to Show Hide Dropdown Using CSS
</title>
<style>
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
width: 500px;
}
ul li {
display: block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
min-width: 100%;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown {
display: block;
/* Display the dropdown */
}
</style>
</head>
<body>
<h1>
GeeksForGeeks
</h1>
<h2>
How to show and hide dropdown
menu on mouse hover using CSS?
</h2>
<ul>
<li>
<a href="#">Programming languages</a>
<ul class="dropdown">
<li><a href="#">C++</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
</ul>
</body>
</html>
Producción:
Los navegadores compatibles se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA