Выпадающее меню в html

Question

У меня возникла проблема с кодом выпадающего меню. Я просто хочу, чтобы в моем портфолио появилось выпадающее меню, поэтому я могу разместить на нем другой подъярус. Может кто-нибудь мне помочь?

Вот мой пример кода:

HTML

<div id="wrap"> 
    <div class="top_corner"></div> 
    <div id="main_container"> 

     <div id="header"> 
      <div id="logo"><a href="index.html"><img src="images/cc.gif" alt="" title="" border="0" /></a></div> 

      <div id="menu"> 
       <ul> 
        <li><a href="index.html" title="">Home</a></li> 
        <li><a href="about.html" title="">AboutMe</a></li> 
        <li><a class="current" href="gallery.html" title="">Portfolio</a></li> 
        <li><a href="forum.html" title="">What Do I Do</a></li> 
        <li><a href="contact.html" title="">Contact Me</a></li> 
       </ul> 
      </div> 
     </div> 

     <div class="center_content_pages"> 
      <center> 
       <table id = "models"> 
        <tr> 
         <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td> 
         <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td> 
         <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td> 
        </tr> 
        <tr> 
         <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td> 
         <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td> 
         <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td> 
        </tr> 
        <tr> 
         <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td> 
         <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td> 
         <td><a href="images/meee.gif"><img src="images/meee.gif" alt="Dumbledore" /></a></td> 
        </tr> 
       </table> 
      </center> 
     </div> 

     <div class="footer"> 
      <div class="copyright">Copyright 2015, Chriselle Cristobal</div> 
     </div> 

     <footer> 
      <ul> 
       <li><a href="https://www.facebook.com/chrisellecristobal?fref=ts">Facebook</a></li> 
       <li><a href="https://twitter.com/LolaSeeelya">Twitter</a></li> 
       <li><a href="https://instagram.com/chrcrstbl/">Instagram</a></li> 
      </ul> 
     </footer> 

    </div> 

Answer 1

Вот полный пример:

#menu li:hover ul { 
 
    display: block; 
 
} 
 
#menu { 
 
    display: block; 
 
    position: relative; 
 
} 
 
#menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#menu ul li { 
 
    position: relative; 
 
    float: left; 
 
    list-style-type: none; 
 
    padding: 10px; 
 
    background-color: #DDD; 
 
} 
 
#menu ul ul { 
 
    position: absolute; 
 
    display: none; 
 
    left: 0; 
 
    width: 0; 
 
}

<div id="menu"> 
 
    <ul> 
 
    <li><a href="index.html" title="">Home</a></li> 
 
    <li><a href="about.html" title="">AboutMe</a></li> 
 
    <li><a class="current" href="gallery.html" title="">Portfolio</a> 
 
     <ul> 
 
     <li><a href="#">item1</a></li> 
 
     <li><a href="#">item2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">last one</a></li> 
 
    </ul> 
 
</div>

Answer 2

положить <ul> в <li> для достижения этой

<div id="menu"> 
     <ul>                        
      <li><a href="index.html" title="">Home</a></li> 
      <li><a href="about.html" title="">AboutMe</a></li> 
      <li><a class="current" href="gallery.html" title="">Portfolio</a> 
       <ul> 
        <li><a href="proj1.html" title="">Project1</a></li> 
        <li><a href="proj2.html" title="">Project2</a></li> 
        <li><a href="proj3.html" title="">Project3</a></li> 
       </ul> 
      </li> 
      <li><a href="forum.html" title="">What Do I Do</a></li> 
      <li><a href="contact.html" title="">Contact Me</a></li> 
     </ul> 
</div>