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