css - 设置菜单背景图像高度

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; 
}