You are on page 1of 2

Creare barra menu a cascata trasparente

css:
body {
background: url('nature.jpg') no-repeat;
background-size: none;
margin-left: 10%;
}

ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}

ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}

ul li a {
text-decoration: none;
color: white;
display: block;
}

ul li a:hover {
background-color: green;
}

ul li ul li{
display: none;
}

ul li:hover ul li {
display: block;
}

html:

<!DOCTYPE html>
<html>
<head>
<title>transarent nav bar</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="">Our Team</a></li>
<li><a href="">Camp Sites</a></li>
<li><a href="">Mission &amp; Vision</a></li>
<li><a href="">Resources</a></li>
</ul>
</li>
<li><a href="#">Things to do</a>
<ul>
<li><a href="">Activities</a></li>
<li><a href="">Parks</a></li>
<li><a href="">Shops</a></li>
<li><a href="">Events</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="">Map</a></li>
<li><a href="">Directions</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
</ul>

</body>
</html>

You might also like