For some reason, when I hover over the menu item "support," the text doesn't show up in the drop-down menu. I've double-checked my CSS multiple times, but I can't seem to pinpoint where the issue lies.
HTML Code
<body>
<div class="site_header">
<div class="header_container">
<div class="header_logo">
</div>
<nav>
<ul class="header_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Support</a>
<ul class="header_sub_menu">
<li><a href="#">Lorum ipsum</a></li>
<li><a href="#">Anime</a></li>
<li><a href="#">Gundam Seed</a></li>
<li><a href="#">Fairytail</a></li>
</ul>
</li>
<li><a href="#">Forums</a></li>
<li><a href="#">Ask Question</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
</div>
</div>
CSS Code
body {
line-height: 1;
background-color: brown;
font-family: Century Gothic;
}
ol, ul {
list-style: none;
}
.site_header{ background-color: black; height: 50px; position: relative; }
.header_container{
height: 50px;
width: 1100px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.header_menu {
left: 90px;
position: relative;
cursor: pointer;
}
li a {
color: #f2f2f2;
display: inline;
float: left;
padding: 12px 10px 22px 11px;
margin: 0px 0px 0px 6px;
font-size: 0.831em;
text-decoration: none;
}
li a:visited{
color: #f2f2f2;
}
ul li a:hover {
background-color: #dadada;
color: black;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block;
position: absolute;
color: green;
}
ul li:hover ul li a{
background-color: #f2f2f2;
color: red;
display: block;
width: 200px;
}
ul li:hover ul li a:hover {
background-color: #989898;
}