当前位置：文江博客话题详情

CSS - 帮助我设置此菜单的样式而不使用边距？

发布于 2024-08-20 13:56:15 字数 597 浏览 5 评论 0原文

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

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

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

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

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

现在，您可能会注意到箭头看起来像粘在底部的东西。我真的不需要这个，但如果您知道如何做到这一点，我将不胜感激！ ;)

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鱼忆七猫命九 2024-08-27 13:56:15

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

你把所有东西都放在一个 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 内的元素的更多控制。

I have not tried, but I think this may be an option.

You have everything with in one div, why dont you try to put div with in divs?

this is your current code for 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>

You can try something like this, so you have more control over the different objects.

<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>

I am not sure that may be the right combination, but I think with the three divs inside the div you will gain more control over the elements inside the header div.

回复收藏 0 原文