Style dropdown part of menu

Question

I have a short question regarding my styling. I'm trying to get my drop down menu styled using CSS.

So when I'm changing the background image of the "main" menu items, the dropdown part also gets the same styling. I figured it should be easy to get only the "dropping down" part. But what do I use in my code?

It needs to have a margin and a fixed width and a different background from the main menu entries.

The main selector for the element is '#access a'.

I hope i've explained it clear enough!

Thanks in advance for your feedback.

HTML

<a href="http://wattel.nl/?page_id=13">Motor</a>
<ul class="sub-menu">
   <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">
       <a href="http://wattel.nl/?page_id=29">Algemeen</a>
    </li>
</ul>

It's just a basic wordpress menu. And the menu is styled by this CSS:

#access a {
  background-image: url('images/menubg.png');
  min-width: 200px;
  font-family: trebuchet MS;
  text-align: center;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
  text-transform: none;
  height: 44px;
}

So now the secondary menu-items also have the menubg.png, and i'd like them to be a different style.

can you add a bit of code please ? i think you can do it with #access>a instead on #access a (will apply rule only on the <a> placed as direct child of #access) but we need more code. — Pierre Granger
i've added some code, i hope you can figure it out now. I'm kind of new to this so sorry if i've missed anything. — user3733066
nothing has an id of access in your HTML. Would be nice to have the part that has the issues. Creating a jsfiddle is often the best way so people can reproduce the issue and updated it to fix it. Otherwise like Pierre said using > will target only direct children of access which may be good enough. — GillesC
something in the code is not enough, as in ID, no html markup and styles have — Alex Wilson

demonofthemist demonofthemist · Accepted Answer · 2014-06-12T08:12:21

Use > operator in CSS

#access > a {
    background-image: url('images/menubg.png');
}

It will style only the direct <a> child tag of the #access menu, not the others.

Style dropdown part of menu

1 Answers