html - 尝试用 HTML 制作基本菜单，显示一个按钮，其他按钮不适用于相同的 CSS

Question

作为初学者，我正在尝试改进我的 HTML。我已经开始尝试创建一个基本网站并且我正在处理菜单，我制作了一个按钮“主页”(实际上不是一个工作按钮但它是视觉上的)并且我尝试使用相同的 CSS 在它旁边制作另一个按钮.我使用了不同的类，但它们都有相同的 CSS 代码，为什么该类不适用于第二个按钮而只应用于第一个按钮？

HTML 代码片段:

<div class="menu">
    <div class="HOME_menuButton">
        <p id="menuItem">Home</p>
    </div>
    <div class="LEWIS_menuButton">
        <p id="menuItem">Lewis</p>
    </div>
</div>

CSS:

.menu {
    background-color: #6699ff;
    width: 845px;
    height: 80px;
    margin-left: 305px;
    margin-top: 10px;
    position: absolute;
}

.HOME_menuButton {
    background-color: #ccb3ff;
    width: 160px;
    height: 78px;
    border: 1px solid black;
    border-radius: 5px;
    margin-left: 5px;
    position: absolute;
}

#menuItem {
    font-family: Verdana;
    font-size: 20px;
    font-weight: Bold;
    text-align: center;
    vertical-align: middle;
}

.LEWIS_menuButton {
    background-color: #ccb3ff;
    width: 160px;
    height: 78px;
    border: 1px solid black;
    border-radius: 5px;
    margin-left: 5px;
    position: absolute;
}

Answer 1

HTML/CSS 代码中的 ID 应该是唯一的。如果您想编写正确的代码，您只能使用它一次。

我怀疑您的浏览器不喜欢使用重复的 ID #menuItem(应该是一个类)。尝试将 #menuItem 转换为一个类。