CSS-Navigation

Basic horizontal CSS-Dropdown-Navigation

  • Multilevel (no Limit)
  • Flexible Width
  • Responsive

 CSS

/* nav-basic.css */

.nav *{
	box-sizing: border-box;
	border-collapse: collapse;
}

.nav li {
	margin: 0px;
	white-space: nowrap;
}
.nav ul {
	list-style: none;
}
/* @desktop */
@media (min-width: 721px){

.nav ul {
	position: relative;
	padding:0;
	margin:0;

}
.nav ul ul {
	display: none;
	position: absolute;
	z-index:999;
}
/* 3rd level */
.nav ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}
.nav>ul>li {
	display:inline;
	float: left;
}
.nav ul li:hover>ul
	{display:block;}

}/* /@media */


/* S T Y L I N G */

.nav ul{
	background-color: #fff;	
}
.nav, .nav>ul>li{
	line-height:40px;
}
.nav ul ul {
	top: 40px;
}
.nav ul ul li{
	line-height:30px;
	min-width: 150px;
}
.nav a{
padding: 0 20px 0 20px;
}	
.nav ul ul a{
padding: 0 20px 0 20px;
}

 HTML

<div class='nav'> 
<ul>
<li><a href='#'>Page 1</a></li>
<li><a href='#'>Page 1</a>
<ul>
<li><a href='#'>Sub-Page 2.1</a></li>
<li><a href='#'>Sub-Page 2.2</a></li>
</ul>
</li>
</ul>
<div style='clear:both;'></div>
</div>
 

Links

Übersicht