How to convert a Horizontal Menu with vertical sub

问题:

I want to make my menu so that when I am at a certain window size, like on mobile, my menu will convert to a vertical drop down accordion menu. I am familiar with media queries and responsive/adaptive designs, but I can't get my submenu to vertically drop/slide down, either on hover or click.

Here is my Fiddle

HTML:

<!--MENU UNDER HEADER BEGINS-->
<table id="menubar" width="0" border="0" align="center" cellpadding="0" cellspacing="0"> 
  <tr>
     <td> 

     <div id="navmenu"> <!--#navmenu DIV menu contents start here-->
     <ul> 

<li>    
    <a href="index.php" class="mainlist">HOME</a>
</li>

<li>
    <a href="about.php" class="mainlist">ABOUT ME</a>
</li>




<li class="slidedown">    
    <a href="graphicdesign.php" class="mainlist">GRAPHIC DESIGN</a>
    <ul>
    <li><a href="graphicdesign/hobbyist-independent.php">Hobbyist/Independent</a></li>    
    <li><a href="graphicdesign/job&amp;freelance.php">Job & FreeLance</a></li>
    <li><a href="graphicdesign/universityatbuffalo.php">University At Buffalo</a></li>
    </ul>
</li>


<li class="slidedown"> 
    <a href="webdesign.php" class="mainlist">WEB DESIGN</a>
    <ul>
    <li>Hobbyist/Independent</li>
    <li>Job & FreeLance</li>
    <li>University At Buffalo Website</a></li> 
    </ul>
</li>


<li class="slidedown">
    <a href="photography.php" class="mainlist">PHOTOGRAPHY</a>
    <ul>
    <li><a href="photography/hobbyist-independent.php">Hobbyist/Independent</a></li>
    <li><a href="photography/job&amp;freelance.php">Job & Freelance</a></li>
    <li><a href="photography/studentprojects.php">Student Projects</a></li>
    </ul>
</li>


<li>
    <a href="contactme.php" class="mainlist">CONTACT ME</a>
</li>

    </ul>
    </div> <!--#navmenu DIV menu contents end here-->

    </td>
  </tr>
</table> 
<!--menu under header ends-->

CSS:

html, body {
  height: 100%;
  overflow-x:hidden;
  overflow-y:hidde;
  margin:auto;
}
#wrap {
  margin:auto;
  min-height: 100%;
  background-image: url(style/flourish-bg.png);
  background-repeat:no-repeat; 
  background-position: top center;
  z-index:0;
}
#header {
    width:1024px; 
    height:160px;
    background-repeat: no-repeat;
}
#bgheader {
  background-image: url(style/bgheader.jpg);
  background-repeat:repeat-x;
  height:160px;
}   
body {
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  background-repeat: no-repeat;
  background:#000;
}

/*----------MENU-----------*/


/*main menu*/

a:link {color:#fff; text-decoration:none;}
a:visited {color: #868D65;}
a:hover {color:#000;}
a:active {color: #868D65;}

#navmenu {
  width:100%;
  height:80px;
  margin-right:auto;
  margin-left:auto;
}

/*holds the listed items on main menu*/
#navmenu ul {
  width:100%;
  margin:0;
  padding: 0;
  list-style:none;
  text-decoration:none;
}

/*keeps main menu horiztonal, and effects the actualy list items, overrides any other menu float*/
#navmenu li {
  float:left;   
  padding: 30px 7px; 
  position:relative;
  list-style:none; 
  text-decoration:none;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size:12px;
  text-decoration: none;
  border-top: 2px solid  #868D65;
  border-bottom: 2px solid  #868D65;
  transition: border-radius 1s, background 1s;
  -moz-transition: -moz-border-radius 1s, background 1s;
  -webkit-transition: -webkit-border-radius 1s, background 1s;
  z-index:200;
}

/*menu styling for hover, WHEN IMAGE IS ADDED, IT APPLIES TO ALL HOVER ACTIONS ON EVERY MENU*/
#navmenu li:hover {
  background: #eee;
  background-image: url(style/bgheader.jpg); 
  transition: border-radius 1s, background 1s;
 -moz-transition: -moz-border-radius 1s, background 1s;
 -webkit-transition: -webkit-border-radius 1s, background 1s;
 z-index:200;
}
/*SUB MENU STARTS*/


/*this hides the submenu*/
#navmenu  li ul {
  position: absolute;
  top:75px;
  visibility:hidden;
  padding-left:0px;
}
/*this shows the submenu on hover over main menu*/
#navmenu  li:hover ul {visibility:visible;}

/*sub menu styling*/
#navmenu li ul li {
  float:none;
  width: 160px;
  font-size:12px;
  text-align:center;
  padding: 15px 5px 10px 5px;
  background: #222222;
  border: 1px solid #FFF; 
  color: #FFF;
  position:relative;
  margin-left: -6px;
}

/*sub menu styling for hover*/
#navmenu li ul li:hover {
  font-size:12px; 
  color: #000; 
  background-color: #868D65;
}

回答1:

Here you go

@media (max-width:600px) {
  tr td #navmenu li {
    width:100%; // makes each item takes up the whole screen
  }
  tr td #navmenu li ul {
    position:relative !important; // removes the position absolute so that it doesn't overlap the higher up menu items
    top:0; // puts it right next to the menu item
    display:none; // so there is no unnecessary white space when the `li` isn't being hovered over
  }
  tr td #navmenu li:hover ul {
    display:block; // shows the submenu when you hover over the higher `li`s
  }
}

回答2:

put something like this in your mobile layout's media query

#navmenu li {
  display: block;
  text-align: center;
  float:none;   
}

#navmenu  li ul {
  display: none;
  position: relative;
  top:0;
  visibility:hidden;
}

since your technique on how to show submenu is purely css (:hover on parent and visibility:visible), we need js/jquery because our child menu is display:none now

$('li.slidedown').hover(function() {
  $(this).find('ul').slideDown();
}, function() {
  $(this).find('ul').slideUp();
});

havent checked my codes, byt i hope you got my point