Index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Menu Despegable</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div id="header">
<ul class="menu">
<li class="menu1"><a href="">Entradas</a>
<ul>
<li class="menu2"><a href="">papas</a>
<ul>
<li class="menu2"><a href="">$50</a></li>
</ul>
<li class="menu2"><a href="">guacamole</a>
<ul>
<li class="menu2"><a href="">$80</a>
</ul>
</ul>
</li>
<li class="menu1"><a href="">Comidas</a>
<ul>
<li class="menu2"><a href="">Hamburguesas </a>
<ul>
<li class="menu2"><a href="">$130</a></li>
</ul>
<li class="menu2"><a href="">hotdog</a>
<ul>
<li class="menu2"><a href="">$85</a>
</ul>
</ul>
</li>
<li class="menu1"><a href="">Bebidas</a>
<ul>
<li class="menu2"><a href="">Limonada</a>
<ul>
<li class="menu2"><a href="">$45</a></li>
</ul>
<li class="menu2"><a href="">jugo</a>
<ul> <li class="menu2"><a href="">$25</a>
</ul>
</ul>
</li>
<li class="menu1"><a href="">Postres</a>
<ul>
<li class="menu2"><a href="">carlota</a>
<ul>
<li class="menu2"><a href="">$35</a></li>
</ul>
<li class="menu2"><a href="">ensalada de frutas</a>
<ul>
<li class="menu2"><a href="">$55</a></li>
</ul>
</ul>
</li>
</div>
<h2>caleb kosterlitzky</h2>
</body>
Estilo.css
body{
background-image: url(descarga.jpg);
background-size: cover;
}
* {
padding: 0px;
margin: 0px;
}
.menu {
margin:auto;
width: 500px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-
serif;
ul, ol {
list-style: none;
}
.menu li a {
background-color: rgb(#db0808);
color: rgb(8, 8, 8);
text-decoration: none;
padding: 10px 15px;
display: block;
}
.menu > li {
float: left;
}
.menu li a:hover {
background-color: rgba(31, 30, 30, 0.52);
border-color: (31, 30, 39, 0.52);
border-radius: 200px;
}
.menu li ul {
display: none;
position: absolute;
min-width: 140px;
}
.menu li:hover > ul {
display: block;
}
.menu li ul li {
position: relative;
}
.menu li ul li ul {
right: -140px;
top: 0px;
}
.menu1 {
background-color: #2ec4eada;
border-radius: 200px;
}
.menu2 {
background-color: #d16590;
border-radius: 200px;
}
