html - 获取带 float 的电子菜单

Question

我想要这样的菜单:menssana.be/FOOD/

但这不是用float做的。当我调整屏幕大小时，它不可读。
所以我想用 float 来做，但我做不对。
总有不对的地方。
有人可以给我一些提示吗

我的代码是:

#active {
    /*  color:#FFFFFF; 
       background-color: #1A1718;  */
}
#menu {
    margin-top: -1%;
    width: 100%;
    background-color: #D3D5D7;
    color: #000000;
    text-align: center;
}
menu ul {
}
#menu a {
    color:#000000;
    display: block;
    min-height: 25px;
    width: 100%;
    text-decoration: none;
    line-height: 25px;
}
#menu a:hover {
    color:#FFFFFF;
    background-color: #1A1718;
}
#menu li {
    list-style: none;
    display: inline-block;
}
.link {
    width: 11%;
}

  <div id ="menu">
    <ul>
        <li class ="link"><a class ="active" href ="index.php">Home</a></li>
        <li>|</li>
        <li class ="link"><a href ="samenstellingen.php">Samenstellingen</a></li>
        <li>|</li>
        <li class ="link"><a href ="panini.php">Panini's</a></li>
        <li>|</li>
        <li class ="link"><a href ="soep.php">Soep</a></li>
        <li>|</li>
        <li class ="link"><a href ="beleg.php">Beleg</a></li>
        <li>|</li>
        <li class ="link"><a href ="contact.php">Contact</a></li>
        <li>|</li>
        <li class ="link"><a href ="../WELNESS/index.php">Schoonheidssalon</a></li>
    </ul>
</div>

感谢您的帮助。

Answer 1

如果我很清楚您的菜单因为元素重叠而无法阅读，那么当屏幕尺寸太小时您需要换行。试试这个:

.link{
  /*width: 11%; Remove this*/
  min-width:11%; /*Include this*/
}