CSS hover navigation / marble menu

Question

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 sure how to make the hover effects happen with CSS. What's the best method to achieve this?

HTML

<nav>
        <ul>
            <li><a href="index.php?page_id=7"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/about.png" alt="about ZOPA" /></a></li>
                <ul class="subs">
                    <li><a href="#">Realty</a></li>
                    <li><a href="#">RA</a></li>
                    <li><a href="#">WM + SB</a></li>
                    <li><a href="#">Vendors</a></li>
                </ul><!-- end subs -->
            <li><a href="index.php?page_id=16"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/blog.png" alt="ZOPA blog" /></a></li>
            <li><a href="index.php?page_id=13"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/share.png" alt="share with ZOPA" /></a></li>
            <li><a href="index.php?page_id=9"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/contact.png" alt="contact ZOPA" /></a></li>
            <li><a href="http://www.thezopateam.com/"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/properties.png" alt="ZOPA properties" /></a></li>
                <ul class="subs">
                    <li><a href="#">Buying</a></li>
                    <li><a href="#">Selling</a></li>
                </ul><!-- end subs -->
            <li><a href="index.php?page_id=11"><img src="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/gallery.png" alt="ZOPA gallery" /></a></li>
        </ul>
    </nav>

updated css

nav li {
    width: 100px;
    margin: 1px;
    list-style-type: none;
}

nav > ul > li {
    position: relative; 
}

nav li ul {
    position: absolute;
    top: 0;
    left: 120px;
}

nav li ul li { 
    display: inline; 
}

nav li:not(:hover) ul { 
    display: none; 
}

Answer 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; } 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; } nav li:hover ul { display: block; } .

Answer 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;
}