#menu is only supposed to apply to <ul id="menu"> but somehow it applies to all the <ul> tags. Why does it happen and how can I fix this? Thank you. html: <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/day16.css"> </head> <body> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> <form action="" method="post"> <ul> <li> <label for="name">Enter Your Name: </label> <input id="name" name="name" /> </li> <li> <label for="comments">Your Comments: </label> <textarea id="comments" name="comments"></textarea> </li> </ul> <p><input type="submit" value="Go!" /></p> </form> <ul> <li>Hello</li> <li>Item2</li> <li>Item3</li> </ul> </body> <html> Code (markup): CSS: body {font-family: sans-serif;} li { display: inline; padding-right:10px; } #menu { text-decoration: none; color: blue; } #menu a:hover { text-decoration: underline; color: green; } Code (markup):
Uhm, did you only want to target the LI inside #menu? That's the only thing I'm seeing that's targeting everything... if so, change that to "#menu li {" instead of just "li {" Though I'm stuck wondering what the blue devil makes LABELs and INPUTs a list?!? Much less what the devil makes a lone INPUT[submit] a paragraph of flow text... bad semantics is worse than no semantics.