Question

我一直试着让这个下拉菜单工作。我想在菜单之间留出空间。尝试填充以及:: after选择器。

HTML：

<div id="menu">
    <div id="wrapper">
        <ul class="navbar">
            <li><a href="#">Menu</a>
              <ul>
                <li><a href="#">Hej 1</a></li>
                <li><a href="#">Hej 2</a></li>
                <li><a href="#">Hej 3</a></li>
             </ul>         
            </li> 
        </ul>
    </div>
</div>

CSS：

body {
    background-color: #efefef;
}

#menu{
    height:auto;
    position: absolute;
    margin: 0px;
}

#wrapper{
    position:absolute;
    top: 0px;
    left:0px;
    height: auto;
    margin: 0px;

}

#wrapper ul{
    margin:0px;
    padding: 0px;
    height: auto;
    width: auto;
    background-color: #fff;
    border-radius: 8px;    
}

#wrapper ul li,#wrapper ul li a, #wrapper ul li ul li, #wrapper li ul li a{
    position: relative;
    list-style: none;
    display: inline-block;
    font-size: 14px;
    font-family: sans-serif;
    text-decoration: none;
    color: #808285;
    padding: 3px 10px 3px 10px;
    transition: all 0.3s ease 0s;
}

#wrapper ul li ul{
    display: none;
    position: absolute;
    top: 20px;
    margin-top: 20px;
    right: -30px;
    width: 150px;
    background-color: #FFFFFF;
    border-radius: 0px;
    transition: all 0.3s ease 0s;
    border-radius: 8px;
    left: 5px;
}

#wrapper ul li ul li{
    position: relative;
    top: auto;
    left: 0px;
    height: auto;
    width: 150px;
    list-style: none;
    display: list-item;
    padding: 3px 5px 3px 5px;
    margin-top: 5px;
}

#wrapper ul li a:hover, #wrapper ul li ul li a:hover{
    color: #ba141a;
}

#wrapper ul li:hover ul{
    display: block;
}

#wrapper ul li ul li:hover{ 
    width: 132px;
}

这是一个小提琴：http://jsfiddle.net/yMvg9/1/

sombebody知道问题是什么吗？

Answer 1

margin-top: 20px;上#wrapper ul li ul打破了你的悬停。

试试下一个小提琴： http://jsfiddle.net/skeurentjes/yMvg9/3/

Answer 2

减少#wrapper ul li ul

的保证金

#wrapper ul li ul {
   margin-top: 9px;
}

工作fiddle

Answer 3

从margin:20px删除/缩小#wrapper ul li ul应解决该问题

#wrapper ul li ul{
display: none;
position: absolute;
top: 20px;
margin-top: 20px;
right: -30px;
width: 150px;
background-color: #FFFFFF;
border-radius: 0px;
transition: all 0.3s ease 0s;
border-radius: 8px;
left: 5px;
}

会不会变成

#wrapper ul li ul{
display: none;
position: absolute;
top: 20px;
margin-top:0px; /* or some other value which suits */
right: -30px;
width: 150px;
background-color: #FFFFFF;
border-radius: 0px;
transition: all 0.3s ease 0s;
border-radius: 8px;
left: 5px;
}

Answer 4

你有20px的最高保证金 { #wrapper ul li ul }

#wrapper ul li ul{
display: none;
position: absolute;
top: 20px;
margin-top: 20px; // Remove of Lessen this one...
right: -30px;
width: 150px;
background-color: #FFFFFF;
border-radius: 0px;
transition: all 0.3s ease 0s;
border-radius: 8px;
left: 5px;
}

这可能会解决你的问题......

working Fiddle

Answer 5

将此代码放入样式表

#wrapper ul li ul{ 
     background: none;
}

#wrapper ul li ul li{
     background-color: #FFFFFF;
}

Answer 6

可能因为边距设置为0。尝试这个工作小提琴：http://fiddle.jshell.net/DNQH9/

菜单和子菜单之间的空格

6 个答案: