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:

How can I get a down arrow to appear on each parent item (when I tried it replaced the background properties).
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

David Thomas · Accepted Answer · 2011-01-11 19:05:15Z

1

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

answered Jan 11, 2011 at 19:05

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Thomas Over a year ago

@Tom Perkins: it's no problem at all, you're quite welcome =)

mingala · Accepted Answer · 2011-01-11 19:05:23Z

0

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.

answered Jan 11, 2011 at 19:05

mingala

2943 silver badges7 bronze badges

Collectives™ on Stack Overflow

CSS Dropdown Menu

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related