Looking to enhance my HTML skills as a beginner, I've begun building a simple website and am currently focusing on the menu. I created a "home" button (which is visually there but not functional), and then attempted to create another button next to it using different classes but applying the same CSS code. Why is the CSS class not being applied to the second button like it is to the first?
Snippet of HTML Code:
<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;
}