views:

63

answers:

3

Hey guys, thanks in advance for any help or input. I am having trouble understanding CSS selectors and i have read the docs..

I am trying to refer to the UL with the id dropdown in my stylesheet. I was under the assumption that i was able to refer to any elements like:

#dropdown ul  
{
}

This method however does not seem to work :s.. Am i misunderstanding CSS selectors? The elements in my actual code are nested deeper than this structure but i presume the principle is the same?

<div id="wrapper">

    <ul id="dropdown">
      <li class="sub"><a href="#">Dropdown</a>

      <!-- Sub Menu -->
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
      </ul>
      <!-- End Submenu -->

    </li>
  </ul>

</div>


/* Dropdown Menu */
#dropdown ul 
{
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

#dropdown li ul 
{
   display: none; 
}

#dropdown 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;
}

#dropdown ul li a:hover 
{ 
   background: #617F8A; 
}

#dropdown li:hover ul 
{
  display: block;
  position: absolute;
}

#dropdown li:hover li 
{
  float: none;
  font-size: 11px;
}

#dropdown li:hover a 
{ 
   background: #617F8A; 
}

#dropdown li:hover li a:hover 
{ 
   background: #95A9B1; 
}
+1  A: 

Try

ul#dropdown
{
}

This will select the ul element with id dropdown.

With

#dropdown ul

you are trying to locate a ul element within an element with id dropdown. This will select all ul elements inside the #dropdown ul, however many levels deep.

Mario Menger
Thanks for the reply.. I've added what you have suggested to my CSS file however it didnt work. I have edited the original post to show the CSS that should style the dropdown.
Lee
The CSS in your update doesn't match what Mario has suggested.
Chris
Marios solution works great for the ul element.. However the following line: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;}to: ul#dropdown li a it seems to break
Lee
In what way does it break? It is selecting something different - `li a` selects all a elements inside any li elements, `ul#dropdown li a` selects all a elements inside any li elements inside the ul#dropdown element.
Mario Menger
ul#dropdown li a the style doesnt seem to be applied any longer.. Sorry im not explaining this very well..
Lee
Do you mean that changing `#dropdown ul li a` to `ul#dropdown li a` stops the style from being applied? Do you have another style that applies to the a tags that you're not showing in your example? Try `ul#dropdown ul li a`
Mario Menger
A: 

edit: its right as mario wrote.

edit2: im sorry for being 5seconds too slow, i just wanted to help. For completition of my post: ul#dropdown or #dropdown is the right selection

Rito
Doesn't seem to work :s
Lee
Thanks for the help.. ul#dropdown works fine for the mian UL element.. The problem seems to exist changing the more complex selectors..
Lee
Examle: li a - worksul#dropdown li a - does no
Lee
works finde for me -> http://jsbin.com/afufa3/edit: ul#dropdown li a works too.
Rito
Ahh ok that helped me.. #dropdown works fine.. i was trying with ul#dropdown
Lee
A: 

#dropdown ul means "select any ul that is a direct or indirect child of #dropdown". That is not what you want, I think. Try #dropdown alone (you don't need to mention ul as IDs are exclusive, meaning you should only have one #dropdown in a page).

Delan Azabani