The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Nested nav

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #145662
    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.


    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…

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.