How to add drop down menu using CSS?

问题:

I have an existing website with the menu code below and I want to add more stuff to my site but users need to nevigate to those pages please help me to add a sub menu to the code I have. Please help?

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);
}

回答1:

Working menu:

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 {
}

回答2:

Better to use jQuery plugin like 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>

回答3:

Well, first add your submenu in the markup, for example:

<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>

....

Position your list items:

#menu li{
  position: relative;
}

Style your sub menu:

#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;
}

Try http://jsfiddle.net/9LcfX/