如何使“当前CSS”下拉菜单变得自适应和移动友好？

Question

I am having trouble with this, I have looked through other peoples questions and answers I have found some helpful info however I am struggling to apply it to my menu. I am looking for my current menu which is pure CSS and HTML no other scripts or code to become fully responsive and mobile friendly. ie I want to make sure when the browser window size is reduced that the menu also gets smaller then to the point where it turns into the mobile button that you tap to expand.

I am hoping someone can show me the exact code I need to add to it with the correct class names etc. I have already tried and failed at this by trying to adapt other peoples answers. I am aware there are various places that will "build" one for free and give me the code however I want the desktop version of my menu to be 100% the same I just need it to scale properly to smaller screens.

I also do not want to use jquery javascript or anything else that is not HTML5 or CSS3, the code is inserted into my index.php and css into my external css file,

From my index page:

     <!-- NAV-BAR-START --> 

  <div id="navbar"><div id='cssmenu'>
     <ul>
       <li><a href='/?p=home'><span>Home</span></a></li>
   <li class='has-sub'><a href='/?p=gallery'><span>Gallery</span></a>
  <ul>
     <li><a href='/?p=photos'><span>Photos</span></a></li>
     <li><a href='/?p=videos'><span>Videos</span></a></li>
     <li><a href='/?p=audio'><span>Audio</span></a></li>
   </ul>
 </li>
 <li class='has-sub'><a href='/?p=ian-milne'><span>Ian Milne</span></a>
  <ul>
      <li><a href='/?p=about'><span>About Ian</span></a></li>
      <li><a href='/?p=testimonials'><span>Testimonials</span></a></li>
     <li class='last'><a href='/?p=location'><span>Location</span></a></li>
   </ul>
 </li>
  <li><a href='/?p=events'><span>Events</span></a></li>
   <li><a href='/?p=bookings'><span>Bookings</span></a></li>
<li class='last'><a href='/?p=contact'><span>Contact</span></a></li>
< /ul> 
 </div></div>

  <!-- NAV-BAR-END -->

And the associated CSS:

/* CSS DROPDOWN MENU */

#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
  text-align:center;

}
#cssmenu ul {
  background: #000dfa;
  height: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 8px 8px 0px 0px;
  -moz-border-radius: 8px 8px 0px 0px;
  border-radius: 8px 8px 0px 0px;
  -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
}
#cssmenu li {
  float: none;
  padding: 0px 0px 0px 15px;
  display: inline-block;
}
#cssmenu li a {
  color: #ffffff;
  display: block;
  font-weight: normal;
  line-height: 50px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#cssmenu li a:hover {
  background: #000894;
  color: #ff8400;
  text-decoration: none;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}
#cssmenu ul li:hover a {
  background: #000894;
  color: #ff8400;
  text-decoration: none;
}
#cssmenu li ul {
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 200px;
  z-index: 200;
}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 200px;
  background: #000dfa;
  /*this is where the rounded corners for the dropdown disappears*/

}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 50px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover a {
  border: 0px;
  color: #ff8400;
  text-decoration: none;
  background: #000894;
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}

I have now put this into jsfiddle aswell for those who were asking

http://jsfiddle.net/GregTimeassistant/WLP8h/

Answer 1

You can style for each media query. Just copy/paste all your styles for each case. You can resize your browser window so you can see the result for each media query. Just experiment a lot, you will see that it is easy to customize your design for each aspect ratio.

@media (max-width: 600px) {
 #cssmenu {
  /*
  copy styles here
  */
 }
}

Check this example that covers a lot of devices (but needs some updating for new HD smartphones and tablets). https://gist.github.com/marcobarbosa/798569