Nested nav

[Jason Penezich]

Hey, was wondering if there was a easy, clean code out there already for nested nav lists. I usually end up writing the code every project but looking for something I can implement into my bare bones wp theme. SCSS acceptable also. I have written my own plenty of times, however I’m just looking for the cleanest version I can get of it. Preferably without classes so if someone doesn’t use the menu as registered, it will work regardless.

[Martin Duran]

Jason, how’s this? It’s minimal, classless, and highly customizable.

http://codepen.io/Martin-Duran/pen/onGpD

[jurotek]

Here is . . another one I experimented with least amount of mark up while back.

[Jason Penezich]

Yeah these are what I’m interested in. I’ll have to mess with it a tad to give it tertiary links but they both look good.

[Tom Houy]

Here is a basic horizontal drop down menu in CSS:

.menustyle ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menustyle ul li {
float: left;
position: relative;
}
.menustyle ul li a {
display: block;
white-space: nowrap;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
text-decoration: none;
background-color: #CCC;
}
.menustyle ul li ul {
position: absolute;
visibility: hidden;
}
.menustyle ul li:hover > ul {
visibility: visible;
}
.menustyle ul li ul li {
float: none;
}
.menustyle ul li ul li ul {
left: 100%;
top: 0px;
}

You could obviously spiff it up with gradients, borders, rounded corners, transitions, etc…

[Author]

Posts