cuclife.com > IT > CSS > 0

CSS定义的下拉菜单代码

网络整理 - 07-27

下面是用CSS定义的下拉菜单的代码，大家可以看一下。
<div id="menu">
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="Products.html">产品 </a></li>
<li><a href="about_Us.html">关于我们 </a></li>
<li><a href="contact_us.html">联系我们 </a></li>
<li><a href="customer_Service.html">客户服务 </a></li>
<li> <a href="FAQ.html">常见问题解答</a></li>
<li> <a href="news.html">家具知识</a></li>
<li> <a href="en/index.html">English</a></li></ul>
</div>
这个是菜单栏的代码,以下是CSS样式
#menu {
    background: #FFFFFF url(images/img01.gif) repeat-x;
 width: 960px;
 height: 45px;
 margin: 0 auto;
 padding: 0px 0;
 font-size:16px;
}

#menu ul {
   
 height: 45px;
 margin: 0;
 padding: 0;
 background: url(images/img03.gif) no-repeat;
 list-style: none;
}

#menu li {
 float: left;
 height: 45px;
 background: url(images/img03.gif) no-repeat right top;
}

#menu a {
 float: left;
 height: 20px;
 margin: 0px;
 text-decoration: none;
 text-transform: uppercase;
 font-size: smaller;
 font-weight: bold;
 color: #000000;
 padding-top: 10px;
 padding-right: 15px;
 padding-bottom: 10px;
 padding-left: 15px;
 
}

#menu a:hover {
 background: url(images/img02.gif) repeat-x;
 color: #FFFFFF;
 height: 45px;
}

#menu .current_page_item a {
 height: 45px;
 color: #FFFFFF;
}

请问我想添加下拉菜单栏在CSS和代码中要如何改? 最佳答案
参考一下这个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><!--定义过渡型DOCTYPE-->
<html xmlns="" lang="gb2312"><!--定义名字空间-->
<head>
<title>二级菜单</title><!--标题栏-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--定义语言编码-->
<meta http-equiv="Content-Language" content="gb2312" /><!--针对老版浏览器定义语言编码-->
<<meta name="description" content="下拉菜单,CSS,布局" /><!--简介-->
<meta content="下拉,菜单,CSS,布局" name="keywords" /><!--关键词-->
<!--CSS样式开始-->
<style type=text/css>
*{
  margin:0;
  padding:0;
  border:0;
}
html{
  background:#bfc4c7;/*背景颜色*/
}
body{
  font:12px/150% '宋体';
  margin:0 auto;
  width:770px;
  text-align:center;
}
#menu,#nav,#footer{
  clear:both;
}
#nav{
  padding-left:20px;
  text-align:left;
  background:#a60;
}
#footer{
  background:#a30;
}
#logo,#banner,#mail,#left,#middle,#right{
  float:left;
  width:180px;
  background:#f00;
}
#logo,#banner,#mail{
  height:60px;
}
#banner{
  width:468px;
  background:#f60;
}
#mail{
  width:122px;
  background:#f90;
}
#left,#right{
  width:200px;
}
#left{
  background:#093;
}
#middle{
  width:370px;
  background:#063;
}
#right{
  background:#033;
}
/*menu部分*/
#menu{
  margin:0;
  position:relative;
  width:770px!important;
}
#menu ul{
  list-style:none;
}
#menu li {
  float:left;
  position:relative;
}  
#menu ul ul {
  visibility:hidden;
  position:absolute;
  left:0px;
  top:30px;
}
#menu table{
  position:absolute;
  left:0;
  top:0;
}
#menu ul li:hover ul,#menu ul a:hover ul{
  visibility:visible;
}
#menu a{
  display:block;
  text-align:center;
  text-decoration:none;
  width:77px;
  height:30px;
  color:#000;
  line-height:30px;
  background:#c9c9a7;
}
#menu a:hover{
  color:#fff;
  background:#b3ab79;
}
#menu ul ul li {
  clear:both;
  text-align:left;
}
#menu ul ul li a{
  display:block;
  width:77px;
  height:30px;
  background:#faeec7;
  color:#000;
}
#menu ul ul li a:hover{
  background:#dfc184;
  color:#000;
}
</style><!--CSS样式结束-->
</head><!--网页头部结束-->
<body><!--网页主体开始-->
      <div id="menu"> 
  <ul> 
    <li>
      <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
        <table>
          <tr>
            <td><![endif]--> 
              <ul> 
                <li><a href="">XHTML</a></li> 
                <li><a href="">CSS</a></li> 
                <li><a href="">PHP</a></li> 
                <li><a href="">MySQL</a></li> 
                <li><a href="">Fireworks</a></li>
                <li><a href="">Photoshop</a></li> 
                <li><a href="">Flash</a></li> 
                <li><a href="">Illustrator</a></li> 
              </ul><!--[if lte IE 6]>
            </td>
          </tr>
        </table>
      </a><![endif]--> 
    </li>
    <li>
      <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
        <table>
          <tr>
            <td><![endif]--> 
              <ul> 
                <li><a href="">XHTML</a></li> 
                <li><a href="">CSS</a></li> 
                <li><a href="">PHP</a></li> 
                <li><a href="">MySQL</a></li> 
                <li><a href="">Fireworks</a></li>
                <li><a href="">Photoshop</a></li> 
                <li><a href="">Flash</a></li> 
                <li><a href="">Illustrator</a></li> 
              </ul><!--[if lte IE 6]>
            </td>
          </tr>
        </table>
      </a><![endif]--> 
    </li>
    <li>
      <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
        <table>
          <tr>
            <td><![endif]--> 
              <ul> 
                <li><a href="">XHTML</a></li> 
                <li><a href="">CSS</a></li> 
                <li><a href="">PHP</a></li> 
                <li><a href="">MySQL</a></li> 
                <li><a href="">Fireworks</a></li>
                <li><a href="">Photoshop</a></li> 
                <li><a href="">Flash</a></li> 
                <li><a href="">Illustrator</a></li> 
              </ul><!--[if lte IE 6]>
            </td>
          </tr>
        </table>
      </a><![endif]--> 
    </li>
    <li>
      <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
        <table>
          <tr>
            <td><![endif]--> 
              <ul> 
                <li><a href="">XHTML</a></li> 
                <li><a href="">CSS</a></li> 
                <li><a href="">PHP</a></li> 
                <li><a href="">MySQL</a></li> 
                <li><a href="">Fireworks</a></li>
                <li><a href="">Photoshop</a></li> 
                <li><a href="">Flash</a></li> 
                <li><a href="">Illustrator</a></li> 
              </ul><!--[if lte IE 6]>
            </td>
          </tr>
        </table>
      </a><![endif]--> 
    </li>
    <li>
      <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
        <table>
          <tr>
            <td><![endif]--> 
              <ul> 
                <li><a href="">XHTML</a></li> 
                <li><a href="">CSS</a></li> 
                <li><a href="">PHP</a></li> 
                <li><a href="">MySQL</a></li> 
                <li><a href="">Fireworks</a></li>
                <li><a href="">Photoshop</a></li> 
                <li><a href="">Flash</a></li> 
                <li><a href="">Illustrator</a></li> 
              </ul><!--[if lte IE 6]>
            </td>
          </tr>
        </table>
      </a><![endif]--> 
    </li>
    <li>
      <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
        <table>
          <tr>
            <td><![endif]--> 
              <ul> 
                <li><a href="">XHTML</a></li> 
                <li><a href="">CSS</a></li> 
                <li><a href="">PHP</a></li> 
                <li><a href="">MySQL</a></li> 
                <li><a href="">Fireworks</a></li>
                <li><a href="">Photoshop</a></li> 
                <li><a href="">Flash</a></li> 
                <li><a href="">Illustrator</a></li> 
              </ul><!--[if lte IE 6]>
            </td>
          </tr>
        </table>
      </a><![endif]--> 
    </li>
    <li>
      <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
        <table>
          <tr>
            <td><![endif]--> 
              <ul> 
                <li><a href="">XHTML</a></li> 
                <li><a href="">CSS</a></li> 
                <li><a href="">PHP</a></li> 
                <li><a href="">MySQL</a></li> 
                <li><a href="">Fireworks</a></li>
                <li><a href="">Photoshop</a></li> 
                <li><a href="">Flash</a></li> 
                <li><a href="">Illustrator</a></li> 
              </ul><!--[if lte IE 6]>
            </td>
          </tr>
        </table>
      </a><![endif]--> 
    </li>
    <li>
      <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
        <table>
          <tr>
            <td><![endif]--> 
              <ul> 
                <li><a href="">XHTML</a></li> 
                <li><a href="">CSS</a></li> 
                <li><a href="">PHP</a></li> 
                <li><a href="">MySQL</a></li> 
                <li><a href="">Fireworks</a></li>
                <li><a href="">Photoshop</a></li> 
                <li><a href="">Flash</a></li> 
                <li><a href="">Illustrator</a></li> 
              </ul><!--[if lte IE 6]>
            </td>
          </tr>
        </table>
      </a><![endif]--> 
    </li>
    <li>
      <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
        <table>
          <tr>
            <td><![endif]--> 
              <ul> 
                <li><a href="">XHTML</a></li> 
                <li><a href="">CSS</a></li> 
                <li><a href="">PHP</a></li> 
                <li><a href="">MySQL</a></li> 
                <li><a href="">Fireworks</a></li>
                <li><a href="">Photoshop</a></li> 
                <li><a href="">Flash</a></li> 
                <li><a href="">Illustrator</a></li> 
              </ul><!--[if lte IE 6]>
            </td>
          </tr>
        </table>
      </a><![endif]--> 
    </li>
    <li>
      <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
        <table>
          <tr>
            <td><![endif]--> 
              <ul> 
                <li><a href="">XHTML</a></li> 
                <li><a href="">CSS</a></li> 
                <li><a href="">PHP</a></li> 
                <li><a href="">MySQL</a></li> 
                <li><a href="">Fireworks</a></li>
                <li><a href="">Photoshop</a></li> 
                <li><a href="">Flash</a></li> 
                <li><a href="">Illustrator</a></li> 
              </ul><!--[if lte IE 6]>
            </td>
          </tr>
        </table>
      </a><![endif]--> 
    </li>
  </ul> 
</div>
</body><!--网页主体结束-->
</html>

▪ 一行代码解决iframe挂马
▪ 二行代码解决全部网页木马
▪ 闭合浮动元素让CSS代码更规范
▪ 更有效率地编写CSS代码
▪ 使网页变灰的代码（包括FLASH等所有网页元素）
▪ CSS代码的一些规范
▪ 支持IE和Firefox的分页代码
▪ css垂直树形下拉菜单_css教程