Sorry for the skip last week - had a major project deadline to attend to that sopped up my time.
Today we’re going to move away from the esoteric and cute (checkerboards, spinning dice) to something more concrete and practical. Drop down menus. You don’t have to go far to spot one, there’s one on the Sitepoint Homepage. Here’s a copy of the relevant HTML
<!DOCTYPE html>
<head>
<style type="text/css">
/* Put your css here */
</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>
Sitepoint uses a jQuery plugin called Superfish to insure backward compatibility with older browsers, even IE 6. In our exercise we will work only with the CSS needed to do the effect since modern browsers can achieve the effect without any Java Script.
Beginner Challenge: Replicate the SitePoint homepage dropdowns in CSS only. You’ll need to make use of the li:hover attribute, position relative and position absolute. Don’t fret so much on the color, font and spacing, the goal here is to master and understand the effect of a drop down menu.
Advanced Challenge: Use CSS Media queries to change the menu into an accordion for phones. Keep in mind that phones register the first touch on an element as a :hover.
Expert Challenge: Using CSS transitions, make the menus fold or fade in, dissolve out, or whatever suits your fancy. You may need to modify the HTML for more elaborate effects.
When sharing your answers in the thread, use spoilers.
[noparse]
[spoiler]This is spoiler text[/spoiler]
[/noparse]
renders…
[spoiler]This is spoiler text[/spoiler]
PaulOB
February 18, 2013, 3:40pm
2
Interesting challenge Michael:). Hopefully I will get some time later in the week to have a go at one of the challenges.
So, we’re posting our code in the thread instead of mailing them to someone?
Just so’s we’s clear.
PaulOB
February 18, 2013, 6:15pm
4
Yes just post the code in spoiler tags so that those who don’t want to peek before trying can avoid them.
Only created it quickly because I’m at work, might make it nicer when I get home
[spoiler]<!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>[/spoiler]
Looks like spam but I promise I am a human, slight update to my original post but with a nicer animation.
[spoiler]<!DOCTYPE html>
<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;
border-radius: 0 0 5px 5px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
font-size: smaller;
left: -1px;
opacity: 0;
overflow: hidden;
position: absolute;
top: 25px;
transition: all .2s ease-in;
visibility: hidden;
width: 180px;
}
.Superfish-wrap li:hover > ul {
opacity: 1;
top: 37px;
visibility: visible;
}
.Superfish-wrap li > ul a {
font-weight: normal;
line-height: 16px;
padding: 9px 15px;
}
.Superfish-wrap li > ul li:last-child a {
border-radius: 0 0 5px 5px;
}
</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>[/spoiler]
ronpat
February 20, 2013, 1:38am
8
Basic Level entry:
[spoiler]
<!DOCTYPE html>
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?977638-CSS-Challenge-4-Drop-down-menus
Thread: CSS Challenge #4 - Drop down menus
2013.02.18 08:21
Michael Morris
-->
<head>
<style type="text/css">
html {
padding:0;
margin:0;
}
body {
background-color:#fff;
}
div {
width:1080px;
background-color:#fff;
padding:0 0 0 40px;
margin:0 auto;
}
ul {
list-style-type:none;
padding:0;
margin:0;
}
.menu {
border:1px solid #d5d5d5;
background-color:#e8e8e8;
overflow:hidden;
border-radius:3px;
}
.tab {
float:left;
}
.tab.sitepoint-network-tab {
float:right;
}
.tab a:hover {
cursor:pointer !important;
}
.children {
position:absolute;
left:-999px;
opacity:0;
border-left:1px solid #d5d5d5;
border-right:1px solid #d5d5d5;
border-bottom:1px solid #d5d5d5;
box-shadow:0 0 3px 0px #ddd;
border-radius:0 0 3px 3px;
}
.children li:last-child a {
border-radius:0 0 2px 2px;
}
.tab:hover .children {
left:auto;
opacity:1;
transition:opacity .25s linear;
}
a {
display:block;
color:#000;
background-color:#e8e8e8;
font-weight:bold;
font-size:.75em;
font-family:Arial;
text-decoration:none;
padding:10px 16px;
}
a:hover,a:active {color:#fff;background-color:#e56500;}
</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>
[/spoiler]
This is my basic-level entry. I don’t have the colors, fonts, and icons matched, but hey…at least I did it. Right?!
Let the ridicule begin…
[spoiler]
body {
color: #333;
font-size: 100%;
font-family: sans-serif;
}
ul {
background-color: #ccc;
list-style: none;
margin: 0;
padding: 0;
}
div > ul {
border: 1px solid #aaa;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
float: left;
width: 100%;
}
ul li {
float: left;
}
ul li a {
color: #333;
display: block;
font-size: 1em;
padding: .5em 1em;
text-decoration: none;
text-shadow: 1px 1px 0px #eee;
}
ul li a:hover {
background-color: #ff8c00;
color: #fff;
text-shadow: none;
}
li ul {
display: none;
}
ul li:hover {
position: relative;
}
li:hover ul {
background-color: #ccc;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 1px solid #aaa;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
display: block;
position: absolute;
top: 2.1em;
}
li ul li {
width: 18em;
}
div > ul li:last-child {
float: right;
}
div > ul li:last-child:hover ul {
right: -1px;
}
[/spoiler]
Took the “expert” route…though, I’m pretty far from being an expert.
[spoiler]
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width" />
<style type="text/css">
.Superfish-wrap {
font-family: Calibri, "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
font-size: 1em;
line-height: 1.2em;
}
.Superfish-wrap ul.Superfish a {
color: #464646;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(150, 150, 150, .5);
cursor: pointer;
}
.Superfish-wrap ul,
.Superfish-wrap ul li {
margin: 0;
padding: 0;
list-style: none;
}
.Superfish-wrap ul.Superfish {
background: #e8e8e8;
border: 1px solid #d5d5d5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.Superfish-wrap ul.Superfish li.tab {
display: inline;
position: relative;
}
.Superfish-wrap ul.Superfish li.tab > a {
display: inline-block;
padding: 12px 15px;
}
.Superfish-wrap ul.Superfish li.tab:hover > a,
.Superfish-wrap ul.Superfish li.tab a:hover {
background-color: #e36400;
color: #fff;
}
.Superfish-wrap ul.Superfish li.tab ul {
display: block;
max-height: 0;
overflow: hidden;
position: absolute;
top: 1.9em;
left: 0;
background: #e8e8e8;
border: 1px solid #d5d5d5;
border-top: 0;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.Superfish-wrap ul.Superfish li.tab:hover ul {
max-height: 1000px;
-moz-transition: max-height 1s ease;
-webkit-transition: max-height 1s ease;
-o-transition: max-height 1s ease;
transition: max-height 1s ease;
}
.Superfish-wrap ul.Superfish li.tab ul li {
display: inline;
}
.Superfish-wrap ul.Superfish li.tab ul li a {
display: block;
width: 250px;
padding: 5px 15px;
}
@media (min-width: 320px) {}
@media (max-width: 600px) {
.Superfish-wrap ul.Superfish li.tab {
display: block;
border-bottom: 1px solid #999999;
}
.Superfish-wrap ul.Superfish li.tab:last-child {
border: 0;
}
.Superfish-wrap ul.Superfish li.tab > a {
display: block;
padding: 12px 15px;
}
.Superfish-wrap ul.Superfish li.tab ul {
position: relative;
top: 0;
left: 0;
background: #cccccc;
border: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.Superfish-wrap ul.Superfish li.tab ul li {
display: block;
border-bottom: 1px solid #999999;
}
.Superfish-wrap ul.Superfish li.tab ul li a {
width: auto;
padding: 5px 15px 5px 30px;
}
}
</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>
[/spoiler]
PaulOB
February 22, 2013, 10:38am
11
Good effort
There is a problem with the accordion affect in your code on touch devices in that the top link will always be followed and so the sub menu is superfluous as you can never use it. It can’t be fixed without changing the html though.
Nikhil
March 6, 2013, 11:32am
12
For the Beginner Challenge:
[spoiler]
<!DOCTYPE html>
<head>
<style type="text/css">
body { margin:0 0 0 0; padding:0; color:#464646;
font-family: Helvetica,sans-serif,Arial;
font-size:62.5%; line-height: 1.4em;}
ul, li {margin:0 0 0 0;padding:0}
.Superfish-wrap {margin:0 auto 0 auto; min-width:800px; width:80%; margin-top:30px; font-size:1.3em;}
.Superfish{list-style:none; border:solid #D5D5D5 1px; height:35px; background-color:#E8E8E8;} /* overflow:hidden */
.Superfish li{list-style-type:none;float:left; position:relative; }
.menu li a{ color:#464646; font-weight:bold; text-decoration:none; display:block; height:15px; padding:10px 15px 10px 15px;}
.Superfish li ul{ position: absolute; margin-left: -999em; top: auto; left:-1px;}
.Superfish li a:hover {background-color:#E56500; color:#FFFFFF;}
.Superfish li:hover ul,.Superfish li.over ul {margin-left:0; }
.Superfish .children{width:175px;background-color:#E8E8E8;border:solid #D5D5D5 1px; }
.Superfish .children li {width:100%;}
.Superfish .children li a{font-weight:normal; display:block; padding:10px 15px 10px 15px; height:auto;}
</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>
[/spoiler]
