Question

我不确定为什么悬停不适用于此页面，其他工作正常。任何人都可以找到解决方案，因为我试过但由于某些原因我不能让它工作？

我的CSS代码低于我的HTML。

我认为这个问题可能存在，但我似乎无法弄明白。

当我验证它时，一切似乎都很好。

难道我用这个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似乎对我有用：

https://jsfiddle.net/bd2d6jac/

假设您提及nav a:hover

悬停不适用于导航菜单

1 个答案: