Only created it quickly because I'm at work, might make it nicer when I get home
Code:
<!DOCTYPE html>
<head>
<style type="text/css">
body {
font-size: 14px;
font-family: Calibri, 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
line-height: 13px;
padding: 10px;
}
.Superfish-wrap {
background-color: #e8e8e8;
border: 1px solid #d5d5d5;
border-radius: 3px;
margin: 0 auto;
width: 900px;
}
.Superfish-wrap ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.Superfish-wrap a {
color: #464646;
display: block;
font-weight: bold;
line-height: 36px;
padding: 0 15px;
text-decoration: none;
text-shadow: 1px 1px 1px #fff;
transition: all .1s ease-in;
}
.Superfish-wrap li:hover > a,
.Superfish-wrap a:hover {
background-color: #e56500;
color: #fff;
cursor: pointer !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
}
/* Top level navigation */
.Superfish-wrap > ul {
height: 36px;
padding: 0 10px;
}
.Superfish-wrap > ul > li {
float: left;
position: relative;
}
/* Sub navigation */
.Superfish-wrap li > ul {
background-color: #e8e8e8;
border: 1px solid #d5d5d5;
border-top-width: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
font-size: smaller;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
top: 36px;
transition: all .2s ease-in;
width: 180px;
z-index: -1;
}
.Superfish-wrap li:hover > ul {
opacity: 1;
z-index: 1;
}
.Superfish-wrap li > ul a {
font-weight: normal;
line-height: 16px;
padding: 9px 15px;
}
</style>
</head>
<body>
<div class="Superfish-wrap">
<ul class="Superfish menu">
<li class="selected current tab"><a href="http://www.sitepoint.com" >Home</a></li>
<li class="tab"><a href="http://www.sitepoint.com/forums/">Forums</a>
<ul class="children">
<li><a href="http://www.sitepoint.com/forums/forumdisplay.php?240-Web-Content" >Web Content</a></li>
<li><a href="http://www.sitepoint.com/forums/forumdisplay.php?40-Design-Your-Site" >Design Your Site</a></li>
<li><a href="http://www.sitepoint.com/forums/forumdisplay.php?4-Program-Your-Site" >Program Your Site</a></li>
<li><a href="http://www.sitepoint.com/forums/forumdisplay.php?95-Host-Your-Site" >Host Your Site</a></li>
<li><a href="http://www.sitepoint.com/forums/forumdisplay.php?45-Manage-Your-Site" >Manage Your Site</a></li>
<li><a href="http://www.sitepoint.com/forums/forumdisplay.php?47-Community-Center" >Community Center</a></li>
</ul>
</li>
<li class="tab"><a style="cursor:default;">Resources</a>
<ul class="children">
<li><a href="http://www.sitepoint.com/newsletter/#subscription-info" >Newsletters</a></li>
<li><a href="http://www.sitepoint.com/category/podcast/" >Podcast</a></li>
<li><a href="http://reference.sitepoint.com/css" >CSS Reference</a></li>
<li><a href="http://reference.sitepoint.com/html" >HTML Reference</a></li>
<li><a href="http://reference.sitepoint.com/javascript" >Javascript Reference</a></li>
<li><a href="http://www.sitepoint.com/tools/" >Tools</a></li>
<li><a href="http://www.sitepoint.com/tag/html5-dev-center/" >HTML5 Dev Center</a></li>
<li><a href="http://www.sitepoint.com/web-hosting-reviews/" >Hosting Reviews</a></li>
</ul>
</li>
<li class="tab"><a href="http://dealfuel.com/?utm_source=sitepoint&utm_medium=menu&utm_campaign=sitepoint" target="_blank">Deals</a></li>
<li class="tab"><a href="http://products.sitepoint.com/" >Bookstore</a>
<ul class="children">
<li><a href="http://www.sitepoint.com/books-matrix/" >Find the right book</a></li>
<li><a href="http://products.sitepoint.com/" >New Releases</a></li>
<li><a href="http://products.sitepoint.com/development" >Web Development Books</a></li>
<li><a href="http://products.sitepoint.com/design" >Web Design Books</a></li>
<li><a href="http://products.sitepoint.com/business" >Business & Marketing Books</a></li>
<li><a href="http://www.sitepoint.com/for-educators/" >Books for Educators</a></li>
<li><a href="http://www.sitepoint.com/frequently-asked-questions/" >Frequently Asked Questions</a></li>
<li><a href="http://sitepoint.com/shipping/" >Shipping Rates & Times</a></li>
</ul>
</li>
<li class="tab"><a href="http://www.sitepointmarket.com" >Market</a></li>
<li class="tab"><a href="https://learnable.com/sitepoint" >Courses</a></li>
<li class="sitepoint-network-tab tab"><a href="http://www.sitepoint.com" >Sitepoint Network</a>
<ul class="children">
<li class="jspro"><a href="http://jspro.com/" >JSPro</a></li>
<li class="buildmobile-link"><a href="http://buildmobile.com" >BuildMobile</a></li>
<li class="designfestival-link"><a href="http://designfestival.com" >DesignFestival</a></li>
<li class="rubysource-link"><a href="http://rubysource.com" >RubySource</a></li>
<li class="cloudspring-link"><a href="http://cloudspring.com" >CloudSpring</a></li>
<li class="phpmaster-link"><a href="http://phpmaster.com" >PHPMaster</a></li>
<li class="learnable"><a href="http://learnable.com/" >Learnable</a></li>
<li class="sitepointmarket-link"><a href="http://www.sitepointmarket.com" >SitePoint Market</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Reply With Quote
. Hopefully I will get some time later in the week to have a go at one of the challenges.
Originally Posted by Stomme poes
Bookmarks