Cambio un poco lo requerido.
Tengo el menú desplegable como lo necesito, pero ahora falta hacerlo responsive.
Código html
Código CSS
El trabajo, consiste en hacer este menú responsive.
Pago por paypal.
Tengo el menú desplegable como lo necesito, pero ahora falta hacerlo responsive.
Código html
PHP:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Seccion 1</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Seccion 2</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Seccion 3</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Otros</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</body>
</html>Código CSS
PHP:
ul {
width:800px;
list-style-type: none;
margin: 0 auto 0;
padding: 0;
overflow: hidden;
background-color: #3a72bf;
font-size:13px !important;
font-family:arial, verdana;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 10px 16px;
text-decoration: none;
text-transform:uppercase;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}El trabajo, consiste en hacer este menú responsive.
Pago por paypal.
Última edición:
( Procedo a enviar MP ).