niche Posted July 7, 2010 Share Posted July 7, 2010 I'm studying this script from cssplay. I can't decide for a fact what #menu means in this context. Based on http://www.w3schools.com/CSS/css_id_class.asp I'm lead to thing that # sign labels menu as an "id". Am I right? If not, what the right explanation please? <style type="text/css">#menu {height:132px; width:132px; position:relative;}#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; padding:1px 1px 0 1px; background:#fff;}#menu li {margin:0; padding:0; list-style:none;}#menu li {display:inline;}#menu ul ul {position:absolute; left:-9999px;}#menu ul#toplevel {position:absolute; left:0; top:0;}#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:22px; text-decoration:none;padding:0 20px 0 10px;} #menu li a.fly {background: url(anywidth/arrow.gif) no-repeat right top;}#menu li a:hover {background-color:#09c; color:#fff;} #menu li:hover > a {background-color:#09c; color:#fff;}#menu ul li:hover > ul {left:100%; margin-top:-23px; margin-left:-1px;}#menu a:hover ul,#menu a:hover a:hover ul, #menu a:hover a:hover a:hover ul {left:100%;}#menu a:hover ul ul, #menu a:hover a:hover ul ul {left:-9999px;}#menu table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px; margin-left:-1px;}</style><div id="info"><h2>A CSS only flyout - the basics</h2><h3>5th August 2009</h3><h3>12th December 2009 - simplified</h3><div id="menu"> <ul id="toplevel"> <li><a href="#url">Home</a></li> <li><a class="fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Email</a></li> <li><a href="#url">Telephone</a></li> <li><a href="#url">Online Form</a></li> <li><a href="#url">Snail Mail Address</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Ski Hire Facilities</a></li> <li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Beginners Slopes</a></li> <li><a href="#url">Intermediate Slopes</a></li> <li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Local</a></li> <li><a href="#url">Nearby</a></li> <li><a href="#url">With instructor</a></li> <li><a href="#url">Snow boarding</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Expert</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Night Life</a></li> <li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Snow Hotel</a></li> <li><a href="#url">The Snowman</a></li> <li><a href="#url">Ice Cavern</a></li> <li><a href="#url">Ski Inn</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">From Airport</a></li> <li><a href="#url">In Resort</a></li> <li><a href="#url">Multiple Resorts</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Money Exchange</a></li> <li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Lift Passes</a></li> <li><a href="#url">Insurance</a></li> <li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Boots</a></li> <li><a href="#url">Skis</a></li> <li><a href="#url">Ski Wear</a></li> <li><a href="#url">Goggles</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Ski Schools</a></li> <li><a href="#url">Snow Report</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Austrian</a></li> <li><a href="#url">German</a></li> <li><a href="#url">French</a></li> <li><a href="#url">English</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Short Breaks</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Where to go</a></li> <li><a href="#url">What to do</a></li> <li><a href="#url">Places of interest</a></li> <li><a href="#url">National parks & Museums</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Privacy</a></li> </ul></div> Link to comment Share on other sites More sharing options...
real_illusions Posted July 7, 2010 Share Posted July 7, 2010 # is for any element with an id. An id can only be used once on a page. is for any element with a class and can be used as many times as you want.In your instance, #menu refers to <div id="menu"> Link to comment Share on other sites More sharing options...
niche Posted July 7, 2010 Author Share Posted July 7, 2010 That's what I thought. Also, thanks for the period explanation. real_illusions, I really value you help.NIche Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.