横向二级导航菜单(html+css+js)

最新推荐文章于 2024-02-21 19:33:38 发布

LindenTao

最新推荐文章于 2024-02-21 19:33:38 发布

阅读量1.1w

点赞数 3

分类专栏： web 文章标签：导航 css html jquery js

本文链接：https://blog.youkuaiyun.com/u011845833/article/details/25995921

版权

web 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*基本信息*/
body
{
    margin: 0;
    padding: 0;
    background: #FFFFFF;
}
/*导航*/
#navigation
{
    font: 12px bolder "Lucida Grande" ,Helvetica,Arial,Verdana,sans-serif; /* 设置文字大小和字体样式 */
    height: 32px;
    background: #999999;
}
.ul1
{
    list-style-type: none; /* 将默认的列表符号去掉 */
    margin: 0;
    padding: 0;
}

.li1
{
    /*: block;display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。*/
    border-right: 0; /* 去掉左侧边框 */
    float: left;
    padding: 7px 0;
    color: #fff;
    border-right-width: 1px;
    border-right-style: solid;
    min-width: 120px;
    width: auto;
    text-align: center;
}
.li1:hover
{
    background: #323232; /* 变换背景色 */
    color: #fff; /* 变换文字颜色 */
    text-decoration: none;
    border-right: 1px solid #000;
}
.a1
{
    /* 如果是中英文混排的文字，建议用固定宽度  width:150px;  height:30px;  line-height:30px;  text-align:center;  */ /* padding: 5px 5px; 设置内边距 */ /*background: #999999;  设置背景色 */ /*border-right: 1px solid #000;  在左侧加上分隔线 */
    color: #fff; /* 设置文字颜色 */
    text-decoration: none; /* 去掉下划线 */
}

#sunnav
{
    
}
.ul2
{
    display:none;
    position: absolute;
    top: 32px;
    left: 81px;
}
.li2
{
    position: relative;
    padding: 5px 14px;
    display: block;
    background: #999999;
    color: #fff;
    border: 1px solid #999999;
}
.a2
{
    padding: 5px 13px;
    text-decoration: none;
    border-right: 1px solid #000;
    margin: 0;
    border-right: 0;
    color: #fff;
}
.li2:hover
{
    background: #323232;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #000;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#basic_info").mouseover(function () {
        $(".ul2").show();
    });
    $("#basic_info").mouseout(function () {
        $(".ul2").hide();
    });
});
</script>
</head>
<body>
    <div id="navigation">
            <ul class="ul1">
                <li class="li1"><a class="a1" href="#" title="index">首页</a></li>
                <li class="li1" id="basic_info"><a class="a1" href="#" title="basic_info" >基本信息</a>
                    <div id="subnav">
                        <ul class="ul2">
                            <li class="li2"><a class="a2" href="#" title="index">专业设置</a></li>
                            <li class="li2"><a class="a2" href="#" title="index">课程设置</a></li>
                            <li class="li2"><a class="a2" href="#" title="index">班级设置</a></li>
                        </ul>
                    </div>
                </li>
                <li class="li1" id="student_manager"><a class="a1" href="#" title="basic_info">学生管理</a></li>
                   
                <li class="li1" id="teacher_manager"><a class="a1" href="#" title="basic_info">教师管理</a></li>
                <li class="li1" id="system_maintain"><a class="a1" href="#" title="basic_info">系统维护</a></li>
            </ul>
        </div>
</body>
</html>