Html 设置导航栏的样式

我想在自我介绍和主导航栏之间创建一个空间，就像分享故事和自我介绍之间的空间一样。设置“自我介绍”导航栏和“共享故事”导航栏样式的代码是相同的，所以我有点搞不懂为什么会这样显示

以下是css代码：

div.IntroduceYourself nav,
div.IntroduceYourself nav ul,
div.IntroduceYourself nav li,
div.IntroduceYourself nav a {
    list-style: none;
    margin: 8px 8px 8px 8px;
    padding: 2px 2px 2px 2px;
    border: 2px 2px 2px 2px;
    font-size: 12px;
    font-family: Helvetica;
    line-height: 1;
}

div.IntroduceYourself nav ul {

    zoom: 1;
    background: #a7bc7a url(images/pattern.png) top left repeat;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #839b4e;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    width: 578px;
    margin: 0 auto;
    padding: 0;
}

div.IntroduceYourself nav ul:before {
    content: '';
    display: block;
}

div.IntroduceYourself nav ul:after {
    content: '';
    display: table;
    clear: both;
}

div.IntroduceYourself nav a,
div.IntroduceYourself nav a:link,
div.IntroduceYourself nav a:visited {
    padding: 5px 12px;
    display: block;
    text-decoration: none;
    color: #ffffff;
    text-shadow: 0 -1px 1px #586835;
    border-right: 1px solid #839b4e;
}

div.IntroduceYourself nav a:hover {
    color: #586835;
    text-shadow: 0 1px 1px #bdcd9c;
}

div.IntroduceYourself nav li {
    float: left;
    border-right: 1px solid #b2c58b;
}

div.IntroduceYourself nav ul li.category{
    float: left;
    vertical-align: top;
}

div.IntroduceYourself nav ul li {
    float: right;
    vertical-align: top;
}




div.Stories nav,
div.Stories nav ul,
div.Stories nav li,
div.Stories nav a {
    list-style: none;
    margin: 4px 4px 4px 4px;
    padding: 2px 2px 2px 2px;
    border: 2px 2px 2px 2px;
    font-size: 12px;
    font-family: Helvetica;
    line-height: 1;

}

div.Stories nav ul {
    zoom: 1;
    background: #a7bc7a url(images/pattern.png) top left repeat;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #839b4e;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    width: 578px;
    margin: 0 auto;
    padding: 0;
}

div.Stories nav ul:before {
    content: '';
    display: block;
}

div.Stories nav ul:after {
    content: '';
    display: table;
    clear: both;
}

div.Stories nav a,
div.Stories nav a:link,
div.Stories nav a:visited {
    padding: 5px 12px;
    display: block;
    text-decoration: none;
    color: #ffffff;
    text-shadow: 0 -1px 1px #586835;
    border-right: 1px solid #839b4e;
}

div.Stories nav a:hover {
    color: #586835;
    text-shadow: 0 1px 1px #bdcd9c;
}

div.Stories nav li {
    float: left;
    border-right: 1px solid #b2c58b;
}

div.Stories nav ul li.category{
    float: left;
    vertical-align: top;
}

div.Stories nav ul li {
    float: right;
    vertical-align: top;
}

---

谢谢

删除这两行：

.mainHead nav {
    display: table-cell;
    float: left;
}

---

（但就我个人而言，我会重新组织整个过程，因为它有点乱。）

Html？或者尝试添加到Fiddle中您的CSS有问题：

div.introductceyourself nav li div.introductceyourself nav a{

这看起来像是两个选择器，在这种情况下，中间需要有一个逗号。这是HTML是的。啊，我纠正了这个问题，但问题仍然存在。我会尝试将它加载到Fiddle上。你是否尝试在自我介绍和故事之间设置

边距，例如
div.introductionYourself:margin bottom:20px；
@pbaldauf Hi，是的这很好，但我需要在自我介绍和主主导航栏边距顶部之间留有间隔，因为它似乎不会给出任何结果。