本文主要是介绍横向二级导航菜单(html+css+js)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!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>
这篇关于横向二级导航菜单(html+css+js)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
