如何做导航栏

Question

我需要一些导航栏的帮助！我想把它变成水平的，它们都是分开的，有点像堆栈溢出的东西，（它说：问题，标签等）。

我尝试过只做一个菜单，但我意识到将它全部视为一个，而不是单独的东西，所以我添加了div，当我改变CSS以确保它在div中获得所有东西时，一切都变得歪斜，所以我还原它回到原来的菜单表格。

这是我的HTML：

  <!-- navigation bar for: ALL PAGES --->
    <nav style="width=100%;">

    <ul id="menu">
        <li><a href="#">Welcome</a></li>
        <li><a href="#">Review</a>
            <ul>
                <li><a href="#">Customer Reviews</a></li>
                <li><a href="#">Leave a Review</a></li>
            </ul>   
        </li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Discounts</a>
            <ul>
                <li><a href="#">Refer us!</a></li>
                <li><a href="#">Claim discount</a></li>
            </ul>   
        </li>
        <li><a href="#">Send me an email!</a>
        </li>

    </ul>
    </nav>
    <!-- end navigation bar for: ALL PAGES --->

和我的CSS：

/* nav */

#menu {
margin:0 auto;
display: inline-block;
list-style-type:none;
padding:0;
}

#menu li {
float: left;
}

#menu li a {
font-family:helvetica;
display:block;
padding:10px 10px;
text-decoration:none;
}   

#menu li a:hover {

}

#menu, #menu ul {
    margin:0 auto;
    padding: 0;
}
#menu li {
    float: left;
    position: relative;
    list-style-type: none;
}

#menu > li:hover > ul {
    display: block;

}
#menu > li > ul {
    display: none;
    position: absolute;
}
#menu li a {
    white-space: nowrap;
}

Answer 1

你在找这个吗？

然后使用此

#menu li {
    float: left;
    position: relative;
    list-style-type: none;
    background:gray;
    margin-left:10px;
    margin-top:5px;
}