Eps 13: CSS Drop Down Menus – Talking HTML

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out
Code will be attached to show notes for you to reference as you listen, or go ahead and copy it to try it out for yourself.
 
Start out with html
 Use an Unordered list
 Nest your lists
Display: none; hides the dropdown menu
display: block; makes the menu appear when attached using :hover to a <li>
 
If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site!
 
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
<style>
<!–CSS–>
#nav ul li{
position: relative;
color: white;
background: #113e63;
display: block;
width: 150px;
position: relative;
list-style-type: none;
float: left;
padding: 0px;
margin: 0 3px 0 0;
height: 40px;
border: 0px solid #ffbf00;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#nav ul li a {
display: block;
text-decoration: none;
color: white;
font-size: 1.4em;
line-height: 40px;
text-align: center;
}
#nav ul li:hover,
#nav ul li:focus,
#nav ul li#current {
background: #c1c4c4;
line-height: 40px;
}
#nav ul li a:hover,
#nav ul li a:focus,
#nav ul li#current a {
color: #000;
}
ul#pod-links {
position: absolute;
display: none;
top:100%;
left:0;
}
ul#pod-links li {
color: white;
background: #113e63;
display: block;
width: 150px;
position: relative;
list-style-type: none;
float: left;
padding: 0px;
margin: 0 3px 0 0;
height: 40px;
border: 0px solid #ffbf00;
border-top: 5px solid #fff;
}
ul#pod-links li a {
display: block;
text-decoration: none;
color: white;
font-size: 1.4em;
line-height: 40px;
text-align: center;
}
ul#pod-links li:hover,
ul#pod-links li:focus,
ul#pod-links li#current {
background: #c1c4c4;
line-height: 40px;
}
#nav ul ul#pod-links li a:hover,
#nav ul ul#pod-links li a:focus,
#nav ul ul#pod-links li#current a {
color: #000;
}
#nav ul li:hover > ul#pod-links {
display: block;
}
</style>
 
<!–HTML–>
<nav id=”nav”>
<ul>
<li id=”current”><a href=”index.html” class=”button”>Home</a><span></span></li>
<li><a href=”portfolio/index.html” class=”button”>Portfolio</a><span></span></li>
<li><a href=”contact/contact.php” class=”button”>Hire Me</a><span></span></li>
<li><a>The Podcasts</a>
<ul id=”pod-links”>
<li><a href=”http://www.talking1265.com” target=”_blank” class=”button”>Talking 1265 </a><span></span></li>
<li><a href=”http://www.webdevpod.com” target=”_blank” class=”button”>Talking HTML</a><span></span></li>
</ul>
</li>
</ul>
</nav>