html - 如何做一个导航栏

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;
}