Question

我正在使用Drupal模板（Zen子主题）。我想实现一些菜单悬停效果。我要试着解释一下：当您将鼠标悬停在菜单项上时，我希望在<ul><li>的底部显示图像。 <ul><li>身高为30px; 因此，如果您将鼠标悬停在第一个菜单项上，您将看到如下内容：

item item item item
||||

这个'||||'是<li>背景底部显示的图形。在此图形下面开始内容。它与正方形不同于页面背景颜色。此内容方块必须出现在菜单图形结束的完全相同的位置。我希望我已经解释得足够好了（对不起我糟糕的英语）

现在问题：内容方块显示在FireFox和Opera的菜单下方。在其他浏览器中，菜单背景图形显示在内容正方形上（如高度og <li>标记不存在）。我试图通过添加top: 15px;来解决这个问题，而不是在chrome，IE等中使用它，但在FF和Opera中我的高度为<li>加top: 15px;（所以有很多空间在上面。）

@edit：这是菜单的代码

<div id="navigation"><div class="section clearfix">

        <h2 class="element-invisible">Menu główne</h2><ul id="main-menu" class="links inline clearfix"><li class="menu-390 first"><a href="/drupal-femini/gallery" title="">Gallery</a></li>
<li class="menu-394 active-trail active"><a href="/drupal-femini/node/15" class="active-trail active">Gallery2</a></li>
<li class="menu-339"><a href="/drupal-femini/node/1" title="Find out more">About</a></li>
<li class="menu-398 last"><a href="/drupal-femini/node/17">Contact</a></li>
</ul>

菜单的CSS：

#navigation ul.links, #navigation .content ul {
    margin: 0;
    padding: 0;
    text-align: left;
}

#main-menu {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 5px;
    padding-top: 5px;
}

#navigation ul.links li,
#navigation .content li {
    float: left; /* LTR */
    padding: 15px 10px 0 10px; /* LTR */
    height: 30px;
}

#navigation ul.links li:hover {
background: url(../images/menu_bg.png) repeat-x bottom;
}

内容CSS：

#main-wrapper {
  position: relative;
  top: 14px;
}

高度和高度最佳。浏览器差异

0 个答案: