设置菜单背景图像高度

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

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

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

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

来源

2013-04-14 Dale

您能否提供具体的代码，和工作，但在Jsfiddle.net你的问题的简单的例子？ – bookcasey

当然。现在会这样做。 – Dale

我有一个部分工作的例子：http://jsfiddle.net/L46rT/26/ 当显示子菜单时，主项显然不应该移动。浮动他们左侧修复它，但删除背景图像。 – Dale

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

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

诀窍是指定菜单的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; 
}

来源

2013-04-14 19:06:59 cockypup

Typo：'overflow：show' ==>'overflow：visible' –

@Matt Coughlin：谢谢。固定。有趣的是，它反正工作。我想当你将'overflow'设置为乱码时，默认是'visible'。 – cockypup

太棒了，谢谢！ – Dale

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

查看此页面为属性的完整描述： http://www.css3.info/preview/background-size/

来源

2013-04-14 18:06:43 cockypup

我尝试过使用它，但是修改了瓷砖的大小而不是瓷砖区域的大小。 – Dale

设置菜单背景图像高度

回答

相关问题