Question

我正在创建一个网站，当我将鼠标悬停在菜单上时，我遇到了巨大的IE延迟。我正在组合使用Cufon，当我将高度，宽度，边距或填充应用于li：hover元素时，它似乎会造成巨大的延迟。

所以，我需要找出一种聪明的方法来做到这一点。该网站位于http://w3box.com/mat

你可以清楚地看到我猜的菜单。所以，我想要的是将整个菜单向下推，使其像高度线底部上方的3或4个像素。因此它与左侧的徽标字体匹配相同的垂直位置。

然后，我希望悬停效果的高度更大。很难解释，但是当将鼠标悬停在菜单项上时，想象一下文本位于框底部的框。像这样;

http://img710.imageshack.us/img710/2791/menuheader.jpg

现在，您可能会注意到箭头看起来很粘在底部。我真的不需要那个，但如果你对如何做到这一点有任何想法，我会很感激你的帮助！ ;）

Answer 1

我没试过，但我认为这可能是一种选择。

你在一个div中拥有所有内容，为什么不尝试将div放入div中？

这是您当前的标题代码。

<div id="header">  
                <img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/> 

                <img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>                     


                    <ul class="menuwrapper"> 
                        <li><h4><a href="#">Logg ut</a></h4></li> 
                        <li><h4><a href="#">Kontakt</a></h4></li> 
                        <li><h4><a href="#">Kontrollpanel</a></h4></li> 
                    <li><h4><a href="#">Oppskrifter</a></h4></li> 
                    <li><h4><a href="#">Hjem</a></h4></li> 
                    </ul> 



            </div>

您可以尝试这样的事情，这样您就可以更好地控制不同的对象。

<div id="header" style="float:left;vertical-align:bottom">  
<div id="imgChef">
    <img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/> 
</div>
<div id="imgMat" style="float:left;vertical-align:bottom">
    <img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>                     
 </div
 <div id="menu" style="float:right;vertical-align:bottom">
<ul class="menuwrapper"> 
<li><h4><a href="#">Logg ut</a></h4></li>                                                              <li><h4><a href="#">Kontakt</a></h4></li> 
<li><h4><a href="#">Kontrollpanel</a></h4></li> 
<li><h4><a href="#">Oppskrifter</a></h4></li> 
<li><h4><a href="#">Hjem</a></h4></li> 
</ul> 
 </div>


</div>

我不确定这可能是正确的组合，但我认为使用div中的三个div可以更好地控制标题div中的元素。

Answer 2

忽略菜单中的h4，因为我认为不需要它。比在display:block上设置<a>并使用line-height和padding-left , padding-right使锚扩展正确的大小。另请注意，如果没有一些调整，IE6 / 7中不支持li：hover。要将菜单定位在与徽标相同的级别上，只需在ul元素上设置margin-top。

Answer 3

对我来说有太多的规则，太多无用的规则。没有时间纠正所有并在FF / IE上测试它，但这是一个例子： .menuwrapper li { 浮动：权利; list-style：none; 填充：30px 23px 3px 23px; 职位：亲属;
上：7px; }

Answer 4

vertical-align 怎么样？

CSS - 帮我格式化这个菜单而不使用边距？

4 个答案: