0

http://jsfiddle.net/zcfqu/

一直在玩这段代码，有点困惑。

我如何能：

  1. 更改每个子菜单的颜色？
  2. 使子菜单与主按钮的宽度相同？

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>
4

6 回答 6

1

这是解决问题的正确方法

演示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;
}
于 2013-09-01T11:21:20.080 回答
1

更改每个子菜单的颜色

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

这会在悬停时发生变化。如果你想要它总是相同的颜色删除:hover

使子菜单与主按钮的宽度相同

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

这样您就不需要应用固定的width. 浏览器将使用父母调整来计算它width。

演示

于 2013-09-01T11:12:57.777 回答
1

删除所有浮动和位置：绝对

检查这个演示

我刚刚删除了所有floats（这导致 li 有趣的跳跃并且真的不需要）和position:absolute（这导致菜单向侧面移动）

另外，我没有通读您的所有 CSS 来查找哪个background属性覆盖了哪个属性，但我只是将它们全部删除并在底部添加了新的。

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

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

编辑 1

使用 CSS 速记并减小 CSS 大小并使其更具可读性是一个好主意。此外，删除所有不正确的 CSS，您也可以写border-radius: 2px 2px 2px 2px为border-radius: 2px（并保存 12 个字节:O）

编辑 2

CSS 速记 - MDN

font速记 - W3C

background速记 - W3C（滚动到页面的最底部）

于 2013-09-01T11:39:57.723 回答
0

看看这个，我改变了背景，“悬停”和宽度。它是正确的 ？小提琴

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

ul#menu li a for the background
于 2013-09-01T11:02:03.173 回答
0

您可以尝试如下的 css，而无需更改 html 元素。我添加了一些评论供您参考。仅对 css 进行了 3 处更改。

/*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;

}
于 2013-09-01T11:08:13.477 回答
0

我已将每个 li 设置为 150px 宽度。这已经解决了这个问题。 http://jsfiddle.net/andaywells/zcfqu/34/

ul#menu ul.submenu li {width: 150px;}
于 2013-09-01T11:08:39.150 回答