I'm encountering difficulties with the a:hover element not functioning as expected. As a beginner, I would appreciate some guidance... I've attempted using #menubar:hover but it's also not producing the desired outcome.
This code is intended to be inserted into the header of another application. My motivation for delving into this was to ensure the header of this application matches the website design. Below is the code snippet for the header:
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow;
}<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li><a href="http://www.losmariachisga.com">Home</a></li>
<li><a href="http://www.losmariachisga.com/meet-the-team">About Us</a></li>
<li><a href="http://www.losmariachisga.com/photo-galleries">Photos</a></li>
<li><a href="http://www.losmariachisga.com/calendar">Events</a></li>
<li><a href="http://www.losmariachisga.com/214-2">Specials</a></li>
</ul>Seeking assistance!