<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>8款网站顶部导航栏</title>
<link href="static/css/preview.css" type="text/css" rel="stylesheet">
<link href="static/css/modern-menu.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Theme 1</h1>
<div id="menu1">
<ul class="menu-top">
<li><a href="#" class="menu-button"><span class="menu-label">Home</span></a></li>
<li><a href="#" class="menu-button menu-drop"><span class="menu-label">About</span></a>
<div class="menu-dropdown menu-dropdown1">
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Who We Are</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">What We Do</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Our Goals</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Our Awards</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Our Team</span></a></li>
</ul>
</div>
</li>
<li><a href="#" class="menu-button menu-drop"><span class="menu-label">Services</span></a>
<div class="menu-dropdown menu-dropdown2">
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Web Design</span>
<div class="menu-desc">Lorem ipsum dolor</div>
</a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Programming</span>
<div class="menu-desc">Lorem ipsum dolor</div>
</a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Advertising</span>
<div class="menu-desc">Lorem ipsum dolor</div>
</a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Marketing</span>
<div class="menu-desc">Lorem ipsum dolor</div>
</a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">E-commerce</span>
<div class="menu-desc">Lorem ipsum dolor</div>
</a></li>
</ul>
</div>
</li>
<li><a href="#" class="menu-button menu-drop"><span class="menu-label">Portfolio</span></a>
<div class="menu-dropdown menu-dropdown3">
<div class="menu-row"><h1>HTML</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Pellentesq</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Et rhoncus</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Ligula eget</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Turpis quis</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Vivamus ut</span></a></li>
</ul>
</div>
<div class="menu-row"><h1>Flash</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Commodo</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Pulvinar</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Curabitur</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Aliquam</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Vulputate</span></a></li>
</ul>
</div>
<div class="menu-row"><h1>Mobile</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Lorem ipsum</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Dolor amet</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Consectetur</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Adipiscing</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Duis ut nibh</span></a></li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="menu-button menu-drop"><span class="menu-label">Clients</span></a>
<div class="menu-dropdown menu-dropdown4">
<div class="menu-row">
<div><h1>America</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Lorem ipsum</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Dolor amet</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Consectetur</span></a></li>
</ul>
</div>
<div><h1>Africa</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Pulvinar in</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Consectet</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Aliquam eu</span></a></li>
</ul>
</div>
</div>
<div class="menu-row">
<div><h1>Europe</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Pellentesq</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Et rhoncus</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Ligula eget</span></a></li>
</ul>
</div>
<div><h1>Asia</h1>
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Turpis quis</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Vivamus ut</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Commodo</span></a></li>
</ul>
</div>
</div>
</div>
</li>
<li><a href="#" class="menu-button menu-drop"><span class="menu-label">Contact</span></a>
<div class="menu-dropdown menu-dropdown5">
<ul class="menu-sub">
<li><a href="#" class="menu-subbutton"><span class="menu-label">Pellente</span><span class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Et rhonc</span><span class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Ligulaeg</span><span class="menu-desc"> - Lorem ipsum dolor sit am</span></a></li>
<li><a href="#" class="menu-subbutt