常用的css下拉菜单

JavaScript

function displaySubMenu(li)
 {
    var subMenu = li.getElementsByTagName("ul")[0];
    subMenu.style.display = "block";
}
    function hideSubMenu(li) 
{
    var subMenu = li.getElementsByTagName("ul")[0];
    subMenu.style.display = "none";
}

Html

<ul>
      <li><a href="#">网站首页</a> </li>
      <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">关于我们</a>
             <ul>
                <li><a href="#">公司掠影</a></li>
                <li><a href="#">公司简介</a></li>
                <li><a href="#">标志释义</a></li>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">组织架构</a></li>
                <li><a href="#">董事长致辞</a></li>
                <li><a href="#">战略规划</a></li>
                <li><a href="#">资质荣誉</a></li>
                <li><a href="#">员工天地</a></li>
            </ul>
      </li>
</ul>

CSS

.menu ul li{float:left;padding:0 16px;font-size:14px;position:relative;cursor:pointer;text-align:center;}
.menu ul li ul{display:none;margin-top:14px;margin-left:-3px;position:absolute;top:0px;left:0px;}
.menu ul li ul li{font-size:12px;line-height:22px;padding:0;width:80px;}
.menu ul li ul li a{color:#333;display:block;}
.menu ul li ul li a:hover{color:#ff0000;background:#e8e8e8;display:block;}

 

转载于:https://www.cnblogs.com/hm21/archive/2012/09/20/2695157.html