Css Hover Navigation / Marble Menu

I have a vertical navigation bar that has buttons to where when hovered over, I would like for options to appear beside that button horizontally. I have the HTML, I'm just not sur

Solution 1:

Here's a simple demo of a submenu: http://jsbin.com/iyijed/1/edit

The key rule is nav li:not(:hover) ul { display: none; } - that's what hides your submenus until their parent is hovered.

If you have (old browser) issues with :not, you can simply put display: none on the submenus, and override it with nav li:hover ul { display: block; }.

Solution 2:

Something like this should get you close:

nav > ul > li {
    position: relative;
}

nav > ul > li > ul.subs { 
    display:none;
    position:absolute;
    right: 5%;
}

nav > ul > li:hover > ul.subs {
    display:block;
}