The target for #menu ul
is any unordered list (ul
) inside an element with the ID of 'menu'...
<div id="menu">
<ul> <!-- <<-- this element is the target -->
...
</ul>
</div>
(The example uses a div
, but any element with id="menu"
can be used)
The target for ul#menu
is a specific unordered list (ul
) with the ID of 'menu'...
<ul id="menu"> <!-- <<-- this element is the target -->
...
</ul>
Based on comments:
Quote: "...i am missing the 'box' around the parent node."
The element you are referring to, just inside the parent <ul id='menu'>
, is the <li>
. You have not targeted it at all.
To style this element, add ul#menu li a
to your CSS. (Note the comma, separating two unique selectors with shared styling.)
ul#menu li a,
ul#menu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
http://jsfiddle.net/cWpEg/1/
Do you see the difference?
ul#menu
is the parent.
ul#menu li
is the first child inside the parent.
ul#menu li a
is the link inside the first child of the parent.
Since ul#menu li
targets all <li>
elements that are children of ul#menu
, you only need one selector...
ul#menu li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
http://jsfiddle.net/cWpEg/2/
Notice how it spans the full width of the screen.
To specifically target and style the parent, add this to your CSS:
ul#menu {
display: block;
position: relative;
float: left;
list-style: none;
}
http://jsfiddle.net/cWpEg/6/