使用 CSS 的响应式菜单样式在悬停时显示下拉菜单

Question

所以我看了很多其他的例子，但我仍然无法弄清楚我错过了什么。菜单效果很好，除非我在 phone 模式下查看它，菜单不会在悬停时掉落。你能帮忙吗？

CSS代码

/*Strip the ul of padding and list styling*/
#menu ul {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    float: left;
    background: #645565;
    font-size: 1em;
}
/*Create a horizontal list with spacing*/
#menu li {
    float: left;
    position: relative;
    display: inline-block;
}
/*Style for menu link*/
#menu li a {
    display: block;
    line-height: 3em;
    font-family: Trebuchet MS, Verdana, Arial, sans-serif;
    font-size:  0.95em;
    color: #BFA877;
    text-decoration: none;
    padding: 0 0.9em;
}
/*Hover over text upper*/
#menu li:hover > a {
    color: #FFF6D6;
}
/*Displays dropdown*/
#menu ul li:hover > ul {
    display: block;
}
/*Hide dropdown links until they are needed*/
#menu li ul {
    display: none;
    position: absolute;
}
/*Display the dropdown on hover*/
.dropdown:hover .dropdown-content {
    display: block;
}

/*Style "show menu' label button and hide it by default*/
.dropdown{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #FFF6D6;
    background: #645565;
    text-align: center;
    padding: 10px 0;
    display: none;
    z-index: 1;
}
/*Hide checkbox*/
input[type=checkbox] {
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
    display: block;
}

/*==========MOBILE===========*/ 
    /*Responsive Styles*/
@media screen and (max-width: 768px){

/*Make dropdown links appear inline*/
    #menu ul {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    #menu li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    #menu ul li, li a {
        width: 100%;
    }
    /*Display "show menu" link*/
    .dropdown {
        display: block;
    }

}

HTML代码

<div id="container">
<label for="dropdown" class="dropdown">Show Menu</label>
    <input type="checkbox" id="dropdown" role="button">
    <div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Massage & Spa</a>
                    <ul class="dropdown-content">
                        <li><a href="#">Massage Treatment</a></li>
                        <li><a href="#">Balancing Energies</a></li>
                        <li><a href="#">Signature Massage Treatment</a></li>
                        <li><a href="#">Thai Massage</a></li>
                        <li><a href="#">Signature Spa Treatment</a></li>
                        <li><a href="#">List of Treatments & Rates</a></li>
                    </ul>
               </li>

                <li><a href="#">Well Being</a></li>
                <li>
                    <a href="#">About Us</a>
                    <ul class="dropdown-content">
                        <li><a href="#">Richard Davenport</a></li>
                        <li><a href="#">Katrine Dannieu</a></li>
                        <li><a href="#">Beth Drake</a></li>
                        <li><a href="#">Daniel</a></li>
                        <li><a href="#">Ciciely</a></li>
                        <li><a href="#">Ish</a></li>
                        <li><a href="#">Elizabeth</a></li>
                        <li><a href="#">Tyler</a></li>
                        <li><a href="#">Julia</a></li>
                        <li><a href="#">Asley</a></li>
                        <li><a href="#">Sandra</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">To Know</a>
                    <ul class="dropdown-content">
                        <li><a href="#">How to prepare for your massage</a></li>
                        <li><a href="#">The right pressure during your Massage</a></li>
                        <li><a href="#">How often should you get a massage?</a></li>
                        <li><a href="#">Here is why you should book your next appointment ASAP</a></li>
                        <li><a href="#">What is Rieki Who can learn</a></li>
                        <li><a href="#">Dr. Oz and the healing power of Reiki</a></li>
                    </ul>
                </li>
                <li><a href="#">Location</a></li><li>
                    <a href="#">Contact</a></li><li>
                    <a href="#">Calendar</a></li><li>
                    <a href="#">Events</a></li><li>
                    <a href="#">Links</a></li>
            </ul>
        </div> 
</div><!-----End of container----->

Answer 1

手机不支持悬停动作！

使用 CSS 的响应式菜单样式在悬停时显示下拉菜单

Responsive Menu style using CSS Display the dropdown on hover

css

menu

hover

dropdown