如何使用（顶部）边距与CSS3下拉菜单？ [英] How to use (top) margin with CSS3 drop down menu?

问题描述

我试图在CSS3中完全创建一个下拉菜单。在大多数情况下，我已经完成了我想要的，但由于某种原因，我似乎不能添加 margin-top：10px; 下拉菜单，我想要它触摸主链接。

我已经在jsFiddle发布了一个没有边距的工作示例： http://jsfiddle.net/J5QSv/

这是用 margin-top：10px; ，但无效： http：// jsfiddle .net / RastaLulz / J5QSv / 2 /

正如你可以看到的，这是完全正常的。但是，如果你取消注释 margin-top：10px; ，它将不再工作。

解决这个问题？

 < span class = LinksMenu> 
< ul> 
< li> 
< a href =＃>帐户< / a> 
< ul> 
< li>< a href =＃>设置< / a>< / li> 
< li>< a href =＃>退出< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / span> 
  

CSS

  body {
 padding：10px; 
 background：＃F3F3F3; 
} 
 
 a：link，a：visited [color：＃000; text-decoration：none} 
 a：hover，a：active {color：＃000; text-decoration：underline} 
 
 .LinksMenu {
 margin：0; 
 padding：0; 
 clear：both; 
} 
 
 .LinksMenu ul {
 margin：0; 
 padding：0; 
} 
 
 .LinksMenu li {
 margin：0; 
 padding：0; 
 list-style：none; 
 float：left; 
 position：relative; 
} 
 
 .LinksMenu ul ul li a {
 margin：0; 
 padding：10px; 
 width：100px; 
 display：block; 
 text-shadow：0; 
 color：＃000; 
} 
 
 .LinksMenu ul ul {
 / * margin-top：3px; * / 
 border：1px solid #CCC; 
 border-radius：3px; 
 background：#FFF; 
 position：absolute; 
 visibility：hidden; 
} 
 
 .LinksMenu ul li：hover ul {
 visibility：visible; 
} 
  

解决方案

到悬停时的悬停元素，因此元素在出现的元素下面。您需要向顶级< li> 添加一个类。

  .LinksMenu ul li.myClass：hover {
 height：80px; 
} 
  

检查小提琴。

I am trying to create a drop down menu completely in CSS3. For the most part I have accomplished what I wanted, but for some reason I can't seem to add margin-top: 10px; to drop down menu, as I don't want it touching the main link. It seems to deactivate the hover when it hits the margin?

I have posted a working example with no margin on jsFiddle: http://jsfiddle.net/J5QSv/

This is with the margin-top: 10px;, and does not work: http://jsfiddle.net/RastaLulz/J5QSv/2/

As you can see, that works perfectly fine. However, when you uncomment margin-top: 10px; it no longer works.

Do you know a way to fix this? or a work around?

HTML

<span class="LinksMenu">
    <ul>
        <li>
            <a href="#">Account</a>
            <ul>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </li>
    </ul>
</span>

CSS

body {
    padding: 10px;
    background: #F3F3F3;
}

a:link,a:visited { color:#000; text-decoration:none }
a:hover,a:active { color:#000; text-decoration:underline }

.LinksMenu {
    margin:0;
    padding:0;
    clear: both;
}

.LinksMenu ul {
    margin:0;
    padding:0;
}

.LinksMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float: left;
    position: relative;
}

.LinksMenu ul ul li a {
    margin: 0;
    padding: 10px;
    width: 100px;
    display: block;
    text-shadow: 0;
    color: #000;
}

.LinksMenu ul ul {
    /* margin-top: 3px; */
    border: 1px solid #CCC;
    border-radius: 3px;
    background: #FFF;
    position: absolute;
    visibility: hidden;
}

.LinksMenu ul li:hover ul {
    visibility: visible;
}

解决方案

One fix is to add height to the hovered element on hover, so the element is underneath the one that appears. You'll need to add a class to the top level <li>s.

.LinksMenu ul li.myClass:hover{
    height: 80px;
}

Check the fiddle.

这篇关于如何使用（顶部）边距与CSS3下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！