Sub level navigation.

subnav.html

// http://www.cnblogs.com/rubylouvre/archive/2009/09/28/1575294.html

<ul class="nav main-nav pull-right">
	<li><a href="{{ url_for('home') }}">Home</a></li>
	<li>
		<a href="{{ url_for('products') }}">Products</a>
		<!-- sub menu -->
		<ul>
			<li><a href="">Data Center Cabling</a></li>
			<li><a href="">Passive Products</a></li>
			<li><a href="">Copper Series</a></li>
		</ul>
	</li>

	<li>
		<a href="{{ url_for('about') }}">About Us</a>
		<!-- sub menu -->
		<ul>
			<li><a href="">Company Introduction</a></li>
			<li><a href="">Fiber Factory</a></li>
			<li><a href="">Exhibitions Information</a></li>
			<li><a href="">Partner Relationship</a></li>
		</ul>

	</li>
	<li><a href="{{ url_for('service') }}">Service</a></li>
	<li><a href="{{ url_for('contact') }}">Contact</a></li>
</ul>

subnav.less

.main-nav > li{
	position: relative;
	overflow: visible;

	// sub navbar
	ul{
		visibility: hidden;
		position: absolute;
		left: 0;
		top: 50px;
		z-index: 1000;
		list-style-type: none;
		margin: 0;
		background-color: #fcfcfc;
		border: 1px solid #ccc;
		border-bottom: 0;

		li{
			a{
				width: 200px;
				display: block;
				padding: 10px 15px 10px 15px;
				color: #333;
				text-decoration: none;
				border-bottom: 1px solid #ccc;

				&:last-child{
					// border-bottom: 0;
				}

				&:hover{
					background-color: black;
					color: white;
				}
			}
		}
	}

	&:hover ul{
		visibility: visible;
	}
}