Skip to content

Instantly share code, notes, and snippets.

@benneuman

benneuman/hover.css

Created February 5, 2014 12:46
Show Gist options
  • Save benneuman/8822885 to your computer and use it in GitHub Desktop.
Save benneuman/8822885 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hover.css
.container {
/*
If you have a block-level element of a certain width, margin: 0 auto;
will how you center it inside its parent container.
See: http://bluerobot.com/web/css/center1.html
Don't change the container width.
*/
margin: 0 auto;
width: 720px;
}
nav {
}
ul {
list-style: none;
width: 100%;
padding-left: 0;
border-radius: 5px;
border: 1px solid gray;
background: linear-gradient(silver, gray);
}
ul a {
text-decoration: none;
color: #444666;
}
li {
display:inline-block;
width: 19.7%;
border-right: 1px solid white;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
margin-right: -3px;
}
li:last-child {
border-right: 0;
}
.submenu {
/* display: inline;*/
position: absolute;
margin: .5% 0 0 0;
width: 143px;
display: none;
/*width: 19.7%;*/
}
ul li:hover > .submenu {
display: block;
}
.submenu li {
display: block;
text-align: left;
border: none;
padding-left: 5px;
}
Raw
hover.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--
normalize.css removes cross-browser differences in defaults, e.g.,
differences in how form elements appear between Firefox and IE
See: http://necolas.github.com/normalize.css/
-->
<link rel="stylesheet" href="normalize.css">
<!-- Put your challenge-specific CSS in here -->
<link rel="stylesheet" href="main.css">
<title></title>
</head>
<body>
<div class="container">
<header>
<h1>My Super SaaS</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a>
<ul class="submenu">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
<li><a href="#">Baz</a></li>
</ul></li>
<li><a href="#">Tour</a>
<ul class="submenu">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
<li><a href="#">Baz</a></li>
</ul></li></li>
<li><a href="#">Pricing</a>
<ul class="submenu">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
<li><a href="#">Baz</a></li>
</ul></li></li>
<li><a href="#">About</a>
<ul class="submenu">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
<li><a href="#">Baz</a></li>
</ul></li></li>
<li><a href="#">Contact</a>
<ul class="submenu">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
<li><a href="#">Baz</a></li>
</ul></li></li>
</ul>
<br clear="all">
</nav>
<div class="content">
<h2>You are so totally going to love this application.</h2>
<div id="registration">
<form name="sign_up" action="#" method="post">
<label for="email">Email</label>
<input type="text" name="email">
<label for="password">Password</label>
<input type="password" name="password">
<button type="submit">Sign Up</button>
</form>
</div>
<div id="buzz">
<h3>Check out our buzz:</h3>
<blockquote>
Probably the coolest thing I've ever seen in my entire life.
<br><cite>- Ghandi</cite>
</blockquote>
<blockquote>
I can't believe I ever got by without this. What a lifesaver!
<br><cite>- Cleopatra</cite>
</blockquote>
<blockquote>
This is the most amazing creation ever imagined by humanity.
<br><cite>- Some guy on the street</cite>
</blockquote>
</div>
<div id="tour">
<h2>Tour</h2>
<h3>Some of the super features</h3>
<div class="feature">
<h4>Zip</h4>
<img src="http://f.cl.ly/items/3e332b2e0B3d311a1U1X/wargames.jpg">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="feature">
<h4>Zap</h4>
<img src="http://f.cl.ly/items/2h0Q3P0t0B3Q0N370u43/businessdude.jpg">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="feature">
<h4>Zop</h4>
<img src="http://f.cl.ly/items/3i2V2V0D3n293d0y2y0U/tron.jpg">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="pricing">
<h2>Pricing</h2>
<dl>
<dt>Basic</dt>
<dd>$19.99 / mo.</dd>
<dt>Pro</dt>
<dd>$39.99 / mo.</dd>
<dt>Platinum</dt>
<dd>$99.99 / mo.</dd>
</dl>
</div>
<div id="about">
<h2>About</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div id="contact">
<h2>Contact</h2>
<table>
<tbody>
<tr>
<td>Email</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Twitter</td>
<td>@supersass</td>
</tr>
<tr>
<td>Phone</td>
<td>555-867-5309</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="footer">
Copyright &copy; 2013 Awesome People, Inc.
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment