如何在CSS中自定义下拉菜单？

Question

http://jsfiddle.net/zcfqu/

Been playing around with this piece of code for a while and am confused a bit.

How do I:

1. Change the color of the each submenu?
2. Make the submenu the same width as the main button?

HTML

<ul id="menu">
    <li><a href="#">This is the button</a>

        <ul class="submenu">
            <li><a href="#">Button one</a>
            </li>
            <li><a href="#">Button two</a>
            </li>
            <li><a href="#">Button three</a>
            </li>
        </ul>
    </li>
</ul>

Answer 1

Change the color of the each submenu

ul.submenu a:hover {
   background-color: red !important;
}

This changes on hover. If you want it always the same color remove :hover

Make the submenu the same width as the main button

ul.submenu, ul.submenu>li {
   width: 100%;
}

This way you don't need to apply a fixed width . The browser will calculate it using parents adapted width .

Demo

Answer 2

Here is the correct approach in tackling your issues

DEMO http://jsfiddle.net/kevinPHPkevin/zcfqu/37/

// be more specific when targeting
ul#menu  ul.submenu li a:hover {
   background-color: green;
}
// set width to match button size
ul.submenu, ul.submenu>li {
   width: 100%;
}
 // assign classes for different coloured buttons. You could do this with css3 and `nth child` but it would limit your browser support considerably.
ul#menu .submenu li.btn1 a {
    background: red;
}
ul#menu .submenu li.btn2 a {
    background: yellow;
}
ul#menu .submenu li.btn3 a {
    background: blue;
}

Answer 3

Remove all floats and position:absolute

Check this demo

I just removed all floats (which was causing funny jumping of li and really not needed) and position:absolute (which was causing menu to shift sideways)

Also, I didn't read through all your CSS to find which background property is overriding which one, but I just removed them all and added new ones at bottom.

#menu > li { background-color: red; }
#menu > li:hover { background-color: green; }

.submenu li { background-color: blue; }
.submenu li:hover { background-color: yellow; }

EDIT 1

Its a good idea to use CSS shorthands and reduce CSS size and also make it more readable. Also, remove all incorrect CSS and you can also write border-radius: 2px 2px 2px 2px as border-radius: 2px (and save 12 bytes :O )

EDIT 2

CSS shorthands - MDN

font shorthand - W3C

background shorthand - W3C (scroll to the very bottomo of the page)

Answer 4

Take a look to this, I changed the background, and the "hover" and the width. It is correct ? Fiddle

ul#menu, ul#menu ul.sub-menu and ul#menu, ul.submenu --> width: 200px;

ul#menu li a for the background

Answer 5

You can try the css as below with no changes on the html elements. I have added some comments for your references. Only 3 changes made on the css.

/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    font-family: Helvetica;
    background-color: #57AD68;
    color: #FFFFFF;
    border-radius: 3px 3px 3px 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    height: 40px;
    line-height: 39px;
    padding: 0 20px;
    position: relative;
    text-align: center;
    vertical-align: bottom;
    border-radius: 3px 3px 3px 3px;
    border-style: none none solid;
    border-width: 0 0 1px;
    cursor: pointer;
    display: inline-block;
    float: center;
    list-style-type: none;
    text-decoration: none;
}

ul#menu, ul.submenu{
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    width: 134px; /*Adjust the sub menu width*/
}
ul#menu li{
    float: left;
}
/* hide the submenu */
li ul.submenu {
    display: none;
}

/* Main Button */
ul#menu li a{
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 0 20px;
    background: ; /*Remove the color here to avoid overlapped*/
    float:right;
    border-radius: 2px 2px 2px 2px;
    font-family: Helvetica;

}

ul.submenu a:hover {

        background: red;

}

/* show the submenu */
ul#menu li:hover ul.submenu{
    display: block;
    position: absolute;
    float:right;
    background-color:green; /*Adjust the color of sub menu.*/
}

ul#menu li:hover li,  ul#menu li:hover a {
    float: none;
    background: ;
}
ul#menu li:hover li a:hover {
    opacity:0.9;

}

Answer 6

I've set each li as 150px width. This has fixed the issue. http://jsfiddle.net/andaywells/zcfqu/34/

ul#menu ul.submenu li {width: 150px;}