Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@daneden
Forked from anonymous/dabblet.css
Created June 15, 2012 05:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save daneden/2934857 to your computer and use it in GitHub Desktop.
Save daneden/2934857 to your computer and use it in GitHub Desktop.
Reset
/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }
/* Styles */
body {
margin: 0;
padding: 0;
background: black;
font-size: 100%;
line-height: 130%;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
#wrapper {
width: 900px;
margin: 0 auto;
}
/************************/
/****** NAVIGATION ******/
/************************/
ul.nav {
text-align: center;
display: block;
list-style: none;
overflow: hidden;
margin: 0 auto;
letter-spacing: -.25em; /* This makes up for inline-block weirdness */
}
ul.nav li {
display: inline-block;
letter-spacing: 0; /* This gets our letter spacing back to normal */
padding: 0.4em 1em;
color: #595959;
background: green;
}
ul.nav li:hover ul.submenu {
display: block;
position: absolute;
}
ul.nav li ul.submenu {
display: none;
}
ul.nav li ul.submenu li {
display: block;
float: none;
}
/************************/
/****** MAIN SITE *******/
/************************/
#main {
font-size: 90%;
color: #545456;
overflow: hidden;
text-justify:inter-word;
background-color: #FFFFFF;
}
#main .content {
margin: 1em;
}
<div id="wrapper">
<ul class="nav">
<li class="selected">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Wedding Planning</a>
<ul class="submenu">
<li>
<a href="#">Full Wedding Planning</a>
</li>
<li>
<a href="#">The Final Hurdle</a>
</li>
<li>
<a href="#">The Big Day</a>
</li>
<li>
<a href="#">Supplier Sourcing</a>
</li>
</ul>
</li>
<li>
<a href="#">Event Management</a>
</li>
<li>
<a href="#">Gallery</a>
</li>
<li>
<a href="#">Testimonials</a>
</li>
<li>
<a href="#">Fees</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<div id="main">
<div class="content">
<p>Welcome to Isabelle Rose Events dolor sit amet, consectetur adipiscing elit. Sed eget porta sapien. Ut et ipsum libero, consectetur scelerisque tortor. Duis elementum erat non erat sodales non tempor justo pulvinar. Fusce ornare, augue non faucibus dapibus, libero risus ullamcorper sapien, eu ullamcorper leo nulla in felis. Proin ornare ipsum at mi luctus sed consequat turpis malesuada. Phasellus pulvinar facilisis porttitor. Nulla id convallis sapien. Fusce tempor malesuada nulla at aliquet. Integer lobortis tortor velit, eu vulputate magna. Fusce non nibh est, consectetur vulputate ipsum. Maecenas ac eleifend dui. Praesent congue malesuada lorem, sit amet interdum justo lobortis vitae. Aliquam mollis ultrices blandit. Cras ut mi eget nisi tristique malesuada. Aenean quis turpis neque, ut lacinia neque. Vestibulum luctus, sapien non ultricies sagittis, augue ipsum rhoncus ligula, at viverra augue sem quis tortor.</p>
</div>
</div>
</div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment