html - 如何在 HTML 网页的列表菜单中添加下拉菜单

Question

我有网页我想在参考按钮上添加下拉菜单我正在使用以下 css 代码我想要这个网站给定模板我是 css 新手请帮忙

http://www.psdgraphics.com/templates/black-horizo​​ntal-html-and-css-dropdown-menu/

这是 CSS 文件

   .menu {
float:right;
margin: 39px 18px 0 0;
height:47px;
background-repeat:no-repeat;
   }



    .menu ul li {
list-style:none;
float:left;
    }



   menu.sub-menu {
visibility: hidden;
position: absolute;
padding:10px;
top: 48px;
left: 0;
z-index: 598;
background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
 }

    .menu ul li a {
text-decoration:none;
display:block;
    }


    .menu .active {
text-decoration:none;
background-image:url();
    }

   .menu .stix {
width:2px;
font-size:0px;
background-image:url(image/seperator.gif);
background-repeat:no-repeat;
padding:0;
height:47px;
    }

下面是我的 HTML 代码

<div class="menu">
    <ul>
        <li class="stix"></li>
        <li><a href="#page_one"><img src="image/overview_active.png" /></a></li>
        <li class="stix"></li>
        <li><a href="#page_two"><img src="image/strategy.gif"/></a></li>
        <li class="stix"></li>
        <li><a href="#"><img src="image/draxxin.gif"/></a></li> 
        <li class="stix"></li>
        <li><a href="#"><img src="image/excede.gif"/></a></li>
        <li class="stix"></li>
        <li><a href="#"><img src="image/results.gif"/></a></li>
        <li class="stix"></li>
        <li><a href="#"><img src="image/reference.gif"/></a></li> 
        <li class="sub-menu">DRAXXIN</li>
        <li class="stix"></li>
    </ul>
</div>

Answer 1

HTML

<div id="wrapper">
    <div id="navMenu">
    <ul style="height: 30px; width: 308px">
    <li id="wrapper1" style="left: 0px; top: 0px; width: 150px; height: 31px"><a style="color:black" href="#">Products</a>
    <ul>
    <li id="wrapper3"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    </ul>
    </li>
    <li id="wrapper4"><a style="color:black" href="#">Products</a>
    <ul>
    <li id="wrapper3"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>

CSS

#navMenu{
    margin:0;
    padding:0;
}
#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
}
#navMenu li{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    background:#3A4956;
}
#navMenu ul li a{
    text-align:center;
    color:black;
    text-decoration:none;
    font-family:"Comic Sans MS";
    height:30px;
    width:150px;
    display:block;
    border-bottom:1px black solid;
}
#navMenu ul li a:hover{
    color:white;
}
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
} 
#navMenu ul li:hover ul{
    visibility:visible
}
#wrapper1{
    border-radius:8px 0 0 0;
    border-right:1px black solid

}
#wrapper4{
    border-radius:0 8px 0 0;
}