Как добавить раскрывающееся меню с помощью CSS?

Question

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

HTML

<div id="menu"> 
      <ul> 
       <li><a href="index.html" accesskey="1" title="">Home</a></li> 

       <li><a href="services.html.html" accesskey="2" title="">Services</a></li> 
       <li><a href="faq.html" accesskey="3" title="">FAQ</a></li> 
       <li class="active"><a href="about.html" accesskey="4" title="">About</a></li> 
       <li><a href="contact.html" accesskey="5" title="">Contact Us</a></li> 
      </ul> 
</div> 

CSS

/** HEADER */ 

#header-wrapper 
{ 
overflow: none; 
height: 100px; 
margin-bottom: 20px; 
background: rgba(0,0,0,0.70); 
} 

#header { 
overflow: none; 
} 

/** LOGO */ 

#logo { 
float: left; 
width: 10px; 
height: 100px; 
} 

#logo h1, #logo p { 
margin: 0px; 
line-height: normal; 
} 

#logo h1 a { 
padding-left: 1px; 
text-decoration: none; 
font-size: 1.50em; 
font-weight: 600; 
font-family: 'Archivo Narrow', sans-serif; 
color: #FFFFFF 
} 

/** MENU */ 

#menu { 
float: right; 
height: 110px; 
} 

#menu ul { 
margin: 0px; 
padding: 0px; 
list-style: none; 
line-height: normal; 
} 

#menu li { 
float: left; 
margin-right: 1px; 
} 

#menu a { 
display: block; 
height: 100px; 
padding: 0px 30px; 
line-height: 100px; 
text-decoration: none; 
text-transform: uppercase; 
color: #FFFFFF; 
} 

#menu a:hover { 
text-decoration: none; 
background: rgba(0,0,0,0.70); 
} 

#menu .active 
{ 
background: rgba(0,0,0,0.70); 
} 

Answer 1

Рабочее меню:

a quick fiddle for you

// HTML

<div id="menu"> 
<ul> 
    <li><a href="index.html" accesskey="1" title="">Home</a> 

    </li> 
    <li><a href="services.html.html" accesskey="2" title="">Services</a> 

     <ul> 
      <li><a href="#">Something You do</a> 

      </li> 
      <li><a href="#">TODO</a> 

      </li> 
     </ul> 
    </li> 
    <li><a href="faq.html" accesskey="3" title="">FAQ</a> 

    </li> 
    <li class="active"><a href="about.html" accesskey="4" title="">About</a> 

    </li> 
    <li><a href="contact.html" accesskey="5" title="">Contact Us</a> 

    </li> 
</ul> 
</div> 

// CSS

/** MENU */ 
#menu { 
    position:relative; 
    height: 110px; 
} 
#menu ul { 
    margin: 0px; 
    padding: 0px; 
    float:left; 
    line-height: 110px; 
} 
#menu li { 
    list-style:none; 
} 
#menu>ul>li { 
    float: left; 
    margin-right: 1px; 
    position:relative; 
} 
#menu>ul>li ul { 
    height:100%; 
    position:absolute; 
    bottom:-100% 
} 
#menu>ul>li ul>li { 
    bottom:0px; 
    display:none; 
    width:15em; 
    float:left; 
} 
#menu>ul>li:hover ul>li { 
    display:block 
} 
#menu a { 
    display:block; 
    padding: 0px 30px; 
    text-decoration: none; 
    text-transform: uppercase; 
    color: #FFFFFF; 
    background:rgba(200, 200, 200, 0.5); 
} 
#menu a:hover { 
    text-decoration: none; 
    cursor:pointer; 
    background:rgba(200, 200, 200, 1); 
} 
#menu .active { 
} 

Answer 2

Лучше использовать JQuery плагин, как Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/

//link to the CSS files for this menu type 
<link rel="stylesheet" media="screen" href="superfish.css"> 

// link to the JavaScript files (hoverIntent is optional) 
// if you use hoverIntent, use the updated r7 version (see FAQ) 
<script src="hoverIntent.js"></script> 
<script src="superfish.js"></script> 

// initialise Superfish 
<script> 

    jQuery(document).ready(function(){ 
    jQuery('#menu ul').superfish(); 
    }); 

</script> 

Answer 3

Ну, первый добавить подменю в разметке, например:

<li><a href="services.html.html" accesskey="2" title="">Services</a> 
    <ul> 
     <li> <a href="..."> sub menu item 1 </a> </li> 
     <li> <a href="..."> sub menu item 2 </a> </li> 
    </ul> 
</li> 

.... 

Позиция ваши элементы списка:

#menu li{ 
    position: relative; 
} 

Стиль меню суб:

#menu ul ul{ 
    position:absolute; 
    left: 0; 
    top: 100px;   /* height of the parent list item */ 
    display: none;  /* hide it */ 
} 

#menu li:hover > ul{ /* show it when mouse is over the parent list item */ 
    display:block; 
} 

Попробуйте http://jsfiddle.net/9LcfX/