Hi, I’m just learning CSS and I’m having an issue with my dropdown menu if you hover over the “Games” tab. I am trying to remove the black border under handheld gaming, but keep the ones under PC and Console. I’ve tried creating a separate div and removing the border, but it doesn’t seem to overwrite the CSS code in the header. What do I need to do? Any help would be appreciated. Here is the code you can copy and paste.
<!DOCTYPE html>
<html>
<head>
<title> Assignment 4 - NavBar 2 </title>
<style type="text/css">
body{
background-color:#39F;
}
#container{
width:800px;
padding:0px;
margin:20px auto;
}
#links {
margin:0px;
margin-bottom:50px;
width:800px;
padding:0px;
}
#links li {
list-style:none;
float:left;
background-color:#FF0;
width:160px;
position:relative;
margin:0px;
}
#links li a {
display:block;
color:#F00;
font-size:20px;
font-weight:bold;
text-align:center;
text-decoration:none;
line-height:40px;
border:5px solid #333;
border-bottom:0px;
border-top:0px;
border-right:0px;
}
#links2 li a{
border-left:none;
}
#links li:hover{
background:#6FF;
}
#links li ul{
display:none;
list-style:none;
position:absolute;
top:40px;
left:3px;
list-style:none;
padding:0px;
}
#links li:hover ul{
display:block;
}
#links li ul li a{
height:25px;
line-height:25px;
text-align:center;
color:#F00;
font-size:12pt;
font-weight:bold;
text-decoration:none;
border-bottom:3px solid #000;
border-left:0px;
}
</style>
</head>
<body>
<div id="container">
<ul id="links">
<div id="links2">
<li> <a href="#"> Home </a> </li>
</div>
<li> <a href="#"> Games </a>
<ul>
<li> <a href="#"> PC Gaming </a> </li>
<li> <a href="#"> Console Gaming </a> </li>
<li> <a href="#"> Handheld Gaming </a> </li>
</ul>
</li>
<li> <a href="#"> Forums </a> </li>
<li> <a href="#"> Advertising </a> </li>
<li> <a href="#"> Contact </a> </li>
</ul>
</div>
</body>
</html>
thank you