造型多个navbars css

Question

我在这里有两个导航栏，我试图将一个置于另一个之上但没有成功。我只是在学习风格，而且比我想象的要困难。谢谢你的回答。

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

}

div.IntroduceYourself nav ul li.category{
    float: left;
}

div.IntroduceYourself nav ul li {
    float: right;
}




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

}

div.Stories nav ul li.category{
    float: left;
}

div.Stories nav ul li {
    float: right;
}

这是HTML代码..

<div class="IntroduceYourself">
    <nav>
        <ul>
            <li class="category"><a href='/Forum/IntroduceYourself'>Introduce Yourself</a></li>
            <!-- Need a better way of adding spaces.. -->
            <li class="recentpost">
                <a href='/blog/{{ recent_intro.id }}'>Most recent post: {{ recent_intro.title }}</a>
            </li>
            <li class="totalposts"><p>Number of replies: {{ total_intro }}</p></li>
        </ul>
    </nav>
    </div>

    <div class="Stories">
    <nav>
        <ul>
            <li class="category"><a href='/Forum/Stories'>Share Stories</a></li>
            <li>
                {#% for intro in introduce_list %#}
                <a href='/blog/{{ recent_story.id }}'>Most recent story: {{ recent_story.title }}</a>
                {#% endfor %#}
            </li>
            <li><p>Number of replies: {{ total_stories }}</p></li>
        </ul>
    </nav>
    </div>