Question

dreamweaver中如何更改spry菜单的颜色

我创建了spry菜单，调整了子菜单的颜色，但当鼠标移开时又恢复为灰色，另外一个问题是，当我把菜单属性改为不换行时，菜单的背景色只延伸到文字部分，文字外的部分仍是空白，怎么让它的背景色始终充满整个菜单框啊？
我都改了，但是不起作用,不知是何原因，能否解释详细点？

Answer 1

子菜单的颜色默认定义与主菜单是一个颜色的

显示的效果：

去修改这个文件，调整为自己所需要的效果

Answer 2

Spry的菜单是通过CSS控制样式的,但是系统自带的 css文件中类仍然不是很全面.需要根据个人的需要进行额外控制.

下面是我曾经修改过的一个文件,你可以和原始的SpryMenuBarHorizontal.css对比一下多出来的部分,希望有帮助.
------------------------------------------
@charset "UTF-8";

ul.MenuBarHorizontal {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
cursor: default;
width: auto;
}
ul.MenuBarActive {
z-index: 1000;
}
ul.MenuBarHorizontal li {
margin: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
ul.MenuBarHorizontal li ul li {
padding: 0px;
}

ul.MenuBarHorizontal ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
background-color: #FFF;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
left: auto;
background-color: #FFF;
}
ul.MenuBarHorizontal ul li {
width: 8.2em;
background-color: #FFF;
}
ul.MenuBarHorizontal ul ul {
position: absolute;
margin: -5% 0 0 95%;
background-color: #FFF;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
left: auto;
top: 0;
background-color: #FFF;
}
ul.MenuBarHorizontal ul {
border: 1px solid #CCC;
background-color: #FFF;
}
ul.MenuBarHorizontal ul li a, ul.MenuBarHorizontal ul li a.MenuBarItemSubmenu {
background-color: #FFF;
color: #900;
}
ul.MenuBarHorizontal ul li a:hover, ul.MenuBarHorizontal ul li a.MenuBarItemSubmenu:hover {
background-color: #900;
color: #fff;
}

ul.MenuBarHorizontal a {
display: block;
cursor: pointer;
background-color: #000;
padding: 0.5em 0.75em;
color: #CCC;
text-decoration: none;
border: 1px solid #900;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
background-color: #FFF;
color: #900;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
background-color:#900;
color:#FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(../images/SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #000;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(../images/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(../images/SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #900;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(../images/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #900;
}

ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
float: left;
background: #000;
}
}

Answer 3

修改CSS样式，选中要修改部分点击右边的样式