.nav-main {
background-color:#09F;
width:100%;
height:100px;
color:#FFF;
line-height:40px;
}
.nav-main .logo{
float:left;
padding: 40px 5px;
font-size:1.4em;
line-height: 20px;
}
.nav-main > ul {
margin:0;
padding:0;
float:left;
list-style-type:none;
}
.nav-main > ul > li {
float:left;
}
.nav-item{
display:inline-block;
padding: 40px 15px;
height:20px;
line-height:20px;
text-decoration:none;
color:#FFF;
}
.nav-item:hover {
background-color:#03C;
}
.nav-content {
position:absolute;
top:100px;
overflow:hidden;
background-color:#09F;
opacity: .9;
max-height:0px;
border:1px;
box-shadow: 1px 1px #FFF;
}
.nav-content a{
color:#fff;
text-decoration:none;
}
.nav-content a:hover{
text-decoration:underline;
background-color:#03C;
}
.nav-sub {
padding:20px;
}
.nav-sub ul {
padding:0;
margin:0;
list-style-type:none;
}
.nav-sub ul li a{
display:inline-block;
text-align:center;
}
.nav-item:focus ~ .nav-content{
max-height:400px;
-webkit-transition:max-height 400ms ease-in;
-moz-transition:max-height 400ms ease-in;
}
Greetings, I am encountering an issue where the hover element's background is not filling entirely with #03C as desired. It seems to only cover the length of the text in the unordered list items. I recently began learning HTML5 & CSS, so I am unsure about what may be causing this problem. Your assistance in explaining this matter would be greatly appreciated. Thank you for your guidance.