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><ahref="#biography"><imgsrc="http://placehold.it/50x50"/>Bio</a></li><li><ahref="#story"><imgsrc="http://placehold.it/50x50"/>Story</a></li><li><ahref="#proposal"><imgsrc="http://placehold.it/50x50"/>Proposal</a></li><li><ahref="#gallery"><imgsrc="http://placehold.it/50x50"/>Gallery</a></li><li><ahref="#rsvp"><imgsrc="http://placehold.it/50x50"/>RSVP</a></li><li><ahref="#thedate"><imgsrc="http://placehold.it/50x50"/>The Date</a></li><li><ahref="#party"><imgsrc="http://placehold.it/50x50"/>Party</a></li><li><ahref="#thankyou"><imgsrc="http://placehold.it/50x50"/>Thank You</a></li></ul><ahref="/">Menu</a></li></ul>

css

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

http://jsfiddle.net/Wz5wn/