Question

有人知道我如何在导航和下拉之间创建一点差距吗？我尝试了保证金而没有成功。

我的导航栏如下所示：

<div class="navigation">
<ul class="menu">
    <li><a href="#">Worker</a></li>
    <li><a href="#" class="sub">Categories</a>
        <ul>
            <li><a href="#">Webdesign</a></li>
            <li><a href="#">Inspiration</a></li>
            <li><a href="#">Tutorials</a></li>
            <li><a href="#">Development</a></li>
        </ul>
    </li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Account</a></li>
</ul>

我将代码粘贴到jsfiddle

如果有人有想法解决这个问题，我将不胜感激。

Answer 1

使用此：

.menu li:hover ul {margin-top: 10px;}

处理保证金非悬停问题：

.menu li:hover ul {padding-top: 10px;}

可以尝试一下吗？

.menu li:hover ul li:first-child {margin-top: 10px;}

小提琴：http://jsfiddle.net/praveenscience/1oakjjLc/7/

Answer 2

body > div > ul > li > ul {
border-top: 10px solid white;
}

如果您希望它可以悬停，那就是这样。

Answer 3

我建议您在html div中使用<div class="sepLine"></div>跟随css：

.sepLine{
    height: 15px;
    position: relative;
    width: 100%;
    top: 50px;
}

同时从此类中删除行高并添加高度：

.menu a
    {  
        font: 500 15px Open Sans;
        display: block; 
        color: white; 
        height: 50px; /*Change line-height with height*/
        color: #FFF;
        width: 140px;
        text-align: center;
        display: inline-block;
    }

最后为此添加行高：

.menu > li > ul > li > a{
        line-height: 50px; /*Add line height*/
    }

fiddle

整个代码：

<强> HTML

<div class="navigation">
    <div class="sepLine"></div>
    <ul class="menu">
        <li><a href="#">Worker</a></li>
        <li><a href="#" class="sub">Categories</a>
            <ul>
                <li><a href="#">Webdesign</a></li>
                <li><a href="#">Inspiration</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Development</a></li>
            </ul>
        </li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Account</a></li>
    </ul>
</div>

<强> CSS

/* RESET */

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body
{
    line-height:1;
    -webkit-font-smoothing: subpixel-antialiased;
}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section
{ 
    display:block;
}
blockquote, q
{
    quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after
{
    content:"";
    content:none;
}
a
{
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}
ul
{
    list-style: none;
}
::-webkit-input-placeholder
{
    color: #fff;
}
:-moz-placeholder
{ 
    color: #fff;
    opacity:  1;
}
::-moz-placeholder
{
    color: #fff;
    opacity:  1;
}
:-ms-input-placeholder
{
    color: #fff;
}

/* BOX */

*, *:before, *:after
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

/* CLEARFIX */

.clearfix:before, .clearfix:after
{
    content: "";
    display: table;
}
.clearfix:after
{
    clear: both;
}
.clearfix
{
    *zoom: 1;
}

/* NAVIGATION */

.navigation
{
    width: 100%;
    height: 50px;
    background: #34495E;
    position: fixed;
    top: 0;
}
.menu
{
    width: 960px;
    height: 50px;
    margin: 0px auto;
    padding: 0px;
}
.menu > li
{
    float: left;
    position: relative;
}
.menu ul
{ 
    display: none; 
    position: absolute;
    left: 0;
    top: 100%;
}
.menu a
{  
    font: 500 15px Open Sans;
    display: block; 
    color: white; 
    height: 50px; /*Change line-height with height*/
    color: #FFF;
    width: 140px;
    text-align: center;
    display: inline-block;
}
.menu a:hover, .menu a:active
{
    color: #1ABC9C;
}
.menu li
{
    list-style: none;
}
.menu li:last-child
{
    float: right;
}
.menu li:hover ul
{
    display: block;
    background: #34536e; 
}
.navigation 
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.account
{
    float: right;
}
.sepLine{
    height: 15px;
    position: relative;
    width: 100%;
    top: 50px;
}

.menu > li > ul > li > a{
    line-height: 50px; /*Add line height*/
}

Answer 4

好的，因为它在这里感到困惑，我决定打开一个新的答案，这是一种方法：

.navigation {
    height: 50px;
    overflow: visible;
}

.navigation li {
    height:  60px;
}

基本上你通过设置第一级li grater的高度而不是它的容器（10px）来推下它。

http://jsfiddle.net/1oakjjLc/10/

在导航和下拉之间创建差距

4 个答案:

小提琴：http://jsfiddle.net/praveenscience/1oakjjLc/7/