1

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

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

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

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

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

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

4

4 回答 4

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 内元素的更多控制。

于 2010-02-09T10:00:34.430 回答
0

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

于 2010-02-09T09:38:48.450 回答
0

对我来说规则太多，无用的规则太多。没有时间更正所有内容并在 FF/IE 上对其进行测试，但这适用于示例：.menuwrapper li { float:right; 列表样式：无；填充：30px 23px 3px 23px；位置：相对；
顶部：7px；}

于 2010-02-09T09:45:06.950 回答
0

那么垂直对齐呢？

于 2010-02-09T09:47:36.897 回答