CSS Positioning For Glyphicon-based Navbar That Opens On Hover

I'm trying to convert a image mockup into HTML/CSS and I'm struggling to get the navbar working: JSFiddle code: http://jsfiddle.net/victorhooi/ZcrCc/ Full-screen JSFiddle output: h

Solution 1:

This should get you closer. I'd make your glyph icons block elements. If you want a nice animation either use CSS3 or jQuery.

html

<ul>
    <li>
        <ul>
            <li><a href="#biography"><img src="http://placehold.it/50x50"/>Bio</a>
            </li>
            <li><a href="#story"><img src="http://placehold.it/50x50"/>Story</a>
            </li>
            <li><a href="#proposal"><img src="http://placehold.it/50x50"/>Proposal</a>
            </li>
            <li><a href="#gallery"><img src="http://placehold.it/50x50"/>Gallery</a>
            </li>
            <li><a href="#rsvp"><img src="http://placehold.it/50x50"/>RSVP</a>
            </li>
            <li><a href="#thedate"><img src="http://placehold.it/50x50"/>The Date</a>
            </li>
            <li><a href="#party"><img src="http://placehold.it/50x50"/>Party</a>
            </li>
            <li><a href="#thankyou"><img src="http://placehold.it/50x50"/>Thank You</a>
            </li>
        </ul> <a href="/">Menu</a>

    </li>
</ul>

css

#nav > a {
    display:none;
}
#nav ul {
    list-style:none;
    margin:0;
    padding:0;
}
#nav li {
    position: relative;
}
/* first level */
#nav > ul > li {
    float: left;
}
/* second level */
#nav li ul {
    display: none;
}
#nav li:hover ul {
    display: block;
}
#nav li ul img {
    display:block;
    min-width:100%;
}
#nav li ul li {
    text-align:center;
}

http://jsfiddle.net/Wz5wn/