<nav class="nav">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Bakery Menu</a>
</li>
<li>
<a href="#">Restaurant Menu<span class="">▾</span></a>
<ul>
<li><a href="#">Apetizers</a></li>
<li><a href="#">Entres</a></li>
<li><a href="#">Deserts</a></li>
</ul>
</li>
<li>
<a href="#">Contact Us</a>
</li>
<li>
<a href="#">More<span class="">▾</span></a>
<ul>
<li><a href="#">Reservations</a></li>
<li><a href="#">Customer Loyalty Program</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">FBLA Credits</a></li>
</ul>
</ul>
</nav>
<body>
<div><h1>
Best Bakery in Colorado!
</h1><h5>
November 21, 2015
</h5><p>
Great Prices and Great Staff! The meals were prepared so elegantly and it made me feel like royalty. I have nothing except good words to say about this place. I recommend this for vistiors visiting Colorado and people who have never visited.
</p></div>
</body>
<body>
<div><h1>
Engaging Atmosphere
</h1><h5>
December 17, 2015
</h5><p>
The restaurant obtained great service, affordable prices, and great interior design. Everything was clean and the food was wonderful. This is definitely one of my go to places from now on.
</p></div>
</body>
<body>
<div><h1>
Simply Amazing!
</h1><h5>
January 9, 2016
</h5><p>
Great Prices and Great Staff! The meals were prepared so elegantly and it made me feel like royalty. I have nothing except good words to say about this place. I recommend this for vistiors visiting Colorado and people who have never visited.
</p></div>
</body>
<body>
<div><h1>
Colorado Critics
</h1><h5>
January 23, 2016
</h5><p>
The parking is limited and the line to order is...
CSS
.nav ul {
*zoom:1;
list-style:none;
margin:0;
padding:0;
background:#F5ECCE;
}
.nav ul:before,.nav ul:after {
content:"";
display:table;
}
.nav ul:after {
clear:both;
}
.nav ul > li {
float:left;
position:relative;
}
.nav a {
display:block;
padding:10px 20px;
line-height:1.2em;
color:#595959;
border-left:1px solid #595959;
text-decoration:none;
}
.nav a:hover {
text-decoration:none;
background:#F5ECCE;
}
.nav li ul {
background: #FFF9DE;
}
.nav li ul li {
width:200px;
}
.nav li ul a {
border:none;
}
.nav li ul a:hover {
background:rgba(0,0,0,0.2);
}
.nav li ul {
position:absolute;
left:0;
top:36px;
z-index:1;
max-height:0;
overflow:hidden;
-webkit-transform:perspective(400) rotate3d(1,0,0,-90deg);
-webkit-transform-origin:50% 0;
-webkit-transition:350ms;
-moz-transition:350ms;
-o-transition:350ms;
transition:350ms;
}
.nav ul > li:hover ul {
max-height:1000px;
-webkit-transform:perspective(400) rotate3d(0,0,0,0);
}
#triangle-down {
width: 0;
height: 0;
border-left: 69px solid transparent;
border-right: 69px solid transparent;
border-top: 69px solid black;
}
div {
background-color: #FF8800;
width: 700px;
height:170px;
padding: 25px;
border: 5px solid #FFD8AB;
margin: 25px;
}
Please Whitelist JSFiddle in your content blocker.
Help keep JSFiddle free for always by one of two ways:
Whitelist JSFiddle in your content blocker (two clicks)
Go PRO and get access to additional PRO features →
Join the 4+ million users, and keep the JSFiddle dream alive.
Ad-free
All ads in the editor and listing pages are turned completely off.
Use pre-released features
You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections
Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles
You can make as many Private Fiddles, and Private Collections as you wish!
Console
Debug your Fiddle with a minimal built-in JavaScript console.