hover not working for navigation menu

Question

I'm not sure why hover isn't working for this page, the other work fine. Can anybody find a solution to this, because I tried but for some reason I can't get it to work?

My CSS code is below my HTML.

I think it the issue may lie here but I can't seem to figure it out.

Everything seems fine to me when I validated it.

Could it be I used too many hover for this CSS?

HTML

<body>
     <input type="checkbox" id="menutoggle">
     <label for="menutoggle" class="menu-icon">&#9776;</label>
    <header>
        <div id="brand"><img src="http://www.grazinburger.com/images/menu_icon.png" alt="menu"></div>
    </header>
        <nav class="menu">
                <ul>
                <li id="video"><a href="index2.html">Favorites</a></li>
                  <li id="portfolio"><a href="#">Portfolio</a></li>
                 <li id="blog"><a href="#">Blog</a></li>  
                 </ul>
             </nav>

</body>

CSS

body {
    font-family: sans-serif;

}

a { color: red;
 text-decoration: none;
}

li {
    list-style: none;
}

ul {
    padding: 0;
    margin: 0;
}

header {
    width: 100%;
    height: 50px;
    margin: auto;
    color: red;
}

#brand {
    float: left;
    line-height: 50px;
    color: #EEE;
    font-size: 25px;
    font-weight: bolder;
    font-family: 'Anonymous Pro', ;


}

#brand img {
    max-width: 12%;

}

nav { width:100%; 
    text-align:center;
}

nav a:hover {
    background-color: black;
    opacity: .4;
}

nav a {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid gray;
    color: antiquewhite;
    font-family: 'Anonymous Pro', ;
    font-weight: bold;
    font-size: 1.25em;
}

nav li:last-child a {
    border-bottom: none;
}

.menu li {
 border-left: none;
}

#video {
    background-image: url(http://clearancebinreview.com/wp-content/uploads/2011/01/1-30-11_news_video_game_backgrounds1.jpg);
}

#portfolio {
    background-image: url(http://www.digitalgov.gov/files/2015/01/600-x-400-Composite-image-of-file-transfer-background-Wavebreakmedia-Ltd-Wavebreak-Media-Thinkstock-488641549.jpg);
    background-position: center;
}

#blog {
    background-image:url(../img/Anime-Panti-Ando-with-Gun-and-Sword-600x375.jpg);
    background-position: top;
}



.menu {
 width: 240px;
height: 210px;
position: absolute;
    left: -240px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;

}

.menu-icon {
    padding: 10px 20px;

    color: aquamarine;
    cursor:pointer;
    float: right;
}

#menutoggle {
    display: none;
}

#menutoggle:checked ~ .menu {

    position:absolute; left: 0; }

Answer 1

Hover appears to work for me:

https://jsfiddle.net/bd2d6jac/

Assuming your referring to nav a:hover

hover not working for navigation menu

Question

1 answers

solution1
1 2015-08-10 23:38:20

hover not working for navigation menu

Question

1 answers

solution1 1 2015-08-10 23:38:20

solution1
1 2015-08-10 23:38:20