Question

我在Drupal中有一个水平菜单块，它有一个重复的背景图像。我现在正在尝试为菜单的孩子制作一个下拉菜单。

我遇到的问题是，当下拉菜单处于活动状态时，背景图像会重复整个菜单的宽度和下拉菜单的高度。

我明白为什么会这样，但想不出一种优雅的方法来解决问题。只使用按钮上的背景图像应该可以工作，但背景不会延伸到边缘。

有没有办法限制重复图像的高度？如果我可以限制高度，我可以将其设置为父菜单的高度。欢迎任何其他建议。

Answer 1

您可以使用属性background-size来指示背景的大小。

查看此页面以获取该属性的完整说明： http://www.css3.info/preview/background-size/

Answer 2

这个怎么样？不要担心我的隐藏/显示菜单（或俗气的背景）的方法

我为子菜单添加了一个类，只是为了简化代码。

诀窍是指定菜单的height，然后将overflow设置为可见。

此处的工作代码：http://jsfiddle.net/cockypup/Fs3WV/

这是CSS

#blockmenu {
    background-image:url(http://t1.gstatic.com/images?q=tbn:ANd9GcS3LkgeI7h_C9w5PbHx_mIuVETgzO2NqJJdOSet-va1t6Q8nUAj);
    height:30px;
    overflow:visible;
}
#blockmenu ul li {
    display: inline;
    padding-right: 30px;
    list-style: none;
    color:white;
    position:relative;
}

.sub {
   display: list-item;   
   list-style-type: none;
   padding-left: 0;
   display:none;
   position:absolute; 
   top:50px;
   width:60px; 
}

设置菜单背景图像高度

2 个答案: