横向导航BUG修复版

<style type="text/css">
#nav { background-image: url(../images/tupian_14.jpg); }
#nav ul { width: 900px; height: 32px; list-style-type: none; margin: 0px auto; padding: 0px; }
#nav ul li { float: left; width: 127px; line-height: 32px; font-weight: normal; font-size: 14px; text-align: left; border-left: 1px solid #ccc; }
#nav ul li a { padding-left: 30px; color: #fff; }
#nav ul li div ul { float: left; width: 127px; position: absolute; background-color: #ccc; }
#nav ul li ul li { line-height: 28px; border: solid 1px #ccc; font-size: 12px; font-weight: normal; }
#nav ul li ul li a { color: #666666; }
</style>
<div id="nav">
<ul>
    <li><a href="http://www.cnblogs.com/solomon_Blog/admin/index.aspx">动力首页</a> </li>
    <li onmousemove="omu('ul')" onmouseout="omv('ul')"><a href="http://www.cnblogs.com/solomon_Blog/admin/about.aspx">了解动力</a>
    <div>
    <ul style="display: none" id="ul">
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/about.aspx">关于我们</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/rongyu.aspx">荣誉资质</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/jiagou.aspx">组织架构</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/jiayuan.aspx">家园天地</a> </li>
    </ul>
    </div>
    </li>
    <li onmousemove="omu('ul1')" onmouseout="omv('ul1')"><a href="http://www.cnblogs.com/solomon_Blog/admin/New01.aspx">新闻中心</a>
    <div>
    <ul style="display: none" id="ul1">
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/New01.aspx">关于我们</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/New02.aspx">荣誉资质</a> </li>
    </ul>
    </div>
    </li>
    <li onmousemove="omu('ul2')" onmouseout="omv('ul2')"><a href="http://www.cnblogs.com/solomon_Blog/admin/zhiliang.aspx">服务体系</a>
    <div>
    <ul style="display: none" id="ul2">
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/zhiliang.aspx">质量管理</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/fangan.aspx">服务承诺 </a></li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/xiazai.aspx">资料下载</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/liucheng.aspx">服务流程</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/wangluo.aspx">服务网络</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/fangan.aspx">服务范围</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/fwneirong.aspx">服务内容</a> </li>
    </ul>
    </div>
    </li>
    <li onmousemove="omu('ul3')" onmouseout="omv('ul3')"><a href="http://www.cnblogs.com/solomon_Blog/admin/Question.aspx">会员社区</a>
    <div>
    <ul style="display: none" id="ul3">
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/Question.aspx">社区问答</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/SendQuestion.aspx">发表问题 </a></li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/zhuce.aspx">会员注册 </a></li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/zhaohui.aspx">密码找回 </a></li>
    </ul>
    </div>
    </li>
    <li onmousemove="omu('ul4')" onmouseout="omv('ul4')"><a href="http://www.cnblogs.com/solomon_Blog/admin/zhaoping.aspx">人才招聘</a>
    <div>
    <ul style="display: none" id="ul4">
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/zhaoping.aspx">人才招聘</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/daiyu.aspx">福利待遇</a> </li>
    </ul>
    </div>
    </li>
    <li onmousemove="omu('ul5')" onmouseout="omv('ul5')"><a href="http://www.cnblogs.com/solomon_Blog/admin/lianxi.aspx">联系我们</a>
    <div>
    <ul style="display: none" id="ul5">
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/lianxi.aspx">联系我们</a> </li>
        <li><a href="http://www.cnblogs.com/solomon_Blog/admin/lianxi.aspx">网站地图</a> </li>
    </ul>
    </div>
    </li>
</ul>
</div>
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf 这里要注意在IE6浏览器下如果下拉列表的背景没有渲染的话,会出现点不着的现象。
<script type="text/javascript">
    function omu(id) {
        document.getElementById(id).style.display = "block";
    }
    function omv(id) {
        document.getElementById(id).style.display = "none";
    }
</script>
posted @ 2011-03-30 14:32  solomon_Blog  阅读(165)  评论(0编辑  收藏  举报