Responsive Menu style using CSS Display the dropdown on hover - css

Question

So I have looked at lots of other examples and I still can't figure out what I am missing. The menu works great except when I look at it in phone mode the menu does not drop on the hover. Can you help?
THE CSS code
/*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;
}
}
THE HTML code
<div id="container">
<label for="dropdown" class="dropdown">Show Menu</label>
<input type="checkbox" id="dropdown" role="button">
<div id="menu">
<ul>
<li>Home</li>
<li>
Massage & Spa
<ul class="dropdown-content">
<li>Massage Treatment</li>
<li>Balancing Energies</li>
<li>Signature Massage Treatment</li>
<li>Thai Massage</li>
<li>Signature Spa Treatment</li>
<li>List of Treatments & Rates</li>
</ul>
</li>
<li>Well Being</li>
<li>
About Us
<ul class="dropdown-content">
<li>Richard Davenport</li>
<li>Katrine Dannieu</li>
<li>Beth Drake</li>
<li>Daniel</li>
<li>Ciciely</li>
<li>Ish</li>
<li>Elizabeth</li>
<li>Tyler</li>
<li>Julia</li>
<li>Asley</li>
<li>Sandra</li>
</ul>
</li>
<li>
To Know
<ul class="dropdown-content">
<li>How to prepare for your massage</li>
<li>The right pressure during your Massage</li>
<li>How often should you get a massage?</li>
<li>Here is why you should book your next appointment ASAP</li>
<li>What is Rieki Who can learn</li>
<li>Dr. Oz and the healing power of Reiki</li>
</ul>
</li>
<li>Location</li><li>
Contact</li><li>
Calendar</li><li>
Events</li><li>
Links</li>
</ul>
</div>
</div><!-----End of container----->

Answer 1

Phones don't support the hover action!