html - CSS - 帮助我在不使用边距的情况下设置此菜单的样式？

Question

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

所以，我需要想出一个聪明的方法来做这件事。网站在这里，http://w3box.com/mat

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

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

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

现在，您可能会注意到箭头看起来像粘在底部的东西。我真的不需要那个，但是如果您对如何做有任何想法，我将不胜感激! ;)

Answer 1

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

你在一个 div 中拥有一切，为什么不尝试将 div 放在 div 中？

这是您当前的 header 代码。

<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 中的元素。