CSS Dropdown Menu

Question

I'm learning to style a dropdown menu and have a couple of questions.

You can see the dropdowns here: http://jsfiddle.net/tomperkins/3M7Cb/

My questions are:

1. How can I get a down arrow to appear on each parent item (when I tried it replaced the background properties).

2. How can I get the whole child area to be clickable, rather than just the text itself?

As always, all help really appreciated.

Thanks in advance,

Tom Perkins

Answer 1

question 2> your <a> tag needs to be rendered as a block that takes up the area of the dropdown item. Since you are using a specialized tool to build these menus, I'm guessing there is a config setting (or similar) that allows you to set this up.

Answer 2

For the down arrow, my inclination is to use a text-object rather than an image:

ul li.top:after {
content: "▼";
}

To make the whole li clickable:

ul li a {
    display: block;
    /* other stuff */
}

JS Fiddle demo of both suggestions.

---

Edited to adjust the hover style of the down-arrow:

ul li.top:after {
    color: #000;
    content: "▼";
    float: right;
}

ul:hover li.top:after {
    color: #ccc;
}

JS Fiddle demo