Question

Ref this tutorial: https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/

I used an external stylesheet, and simply put #menu before each CSS item, like this:

#menu ul{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;}

or:

#menu ul li{
display: block;
position: relative;
float: left;}

But, when i reference with #menu, the menu doesn’t render properly. It leaves the parent ‘li’ untouched by CSS.

http://jsfiddle.net/UGW2L/

Any ideas?

Thx,
Dave

Answer 1

#menu ul targets this (any ul inside of an element with id='menu')…

<div id="menu">
    <ul> <!-- <<-- this element is the target -->
       ...
    </ul>
</div>

(div is just an example, any element with id="menu" can be used above)

---

ul#menu targets this (the ul with id='menu')…

<ul id="menu">  <!-- <<-- this element is the target -->
    ...
</ul>

---

Edit as per comments:

Quote: “…i am missing the ‘box’ around the parent node.”

I think the node to which you refer is the <li>, just inside the parent <ul id='menu'>, and you have not targeted it anyplace at all.

Just add ul#menu li a to your box styling. (Note the comma. It separates two totally unique selectors sharing the same 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/

See the difference?

ul#menu is the parent.
ul#menu li is the first item inside the parent.
ul#menu li a is the link inside the first child of the parent.

Since ul#menu li targets any & all <li>‘s that are children of the ul#menu parent, you would only need the 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/

Also note how it’s the full width of the screen.

To target & style just the parent, add something like this.

ul#menu {
  display: block;
  position: relative;
  float: left;
  list-style: none;
}

http://jsfiddle.net/cWpEg/6/