左侧固定，右侧是竖着的子菜单样式

最新推荐文章于 2023-07-18 17:56:34 发布

中情

最新推荐文章于 2023-07-18 17:56:34 发布

阅读量375

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/zhongqing_fzq/article/details/51848969

版权

Web前端专栏收录该内容

37 篇文章 0 订阅

订阅专栏

body {
font-family:"微软黑体";
background-color:white;
}
* {
margin:0;
padding:0;
list-style:none;
}
a {
text-decoration:none;
color:red;
}
a:link {
text-decoration:none;
}
a:active {
text-decoration:none;
}
a:hover {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
div {
position:absolute;
top:10px;
left:10px;
bottom:10px;
width:80%;
height:auto;
}
.nav_left {
width:100px;
height:30px;
line-height:30px;
position:relative;/*注意：要让子标签和该父标签top在同一个位置，则必须设置该属性值为relation*/
background-color:blue;
color:white;
left:10px;
top:10px;
}
.nav_right {
width:100px;
height:auto;
line-height:30px;
position:absolute;/*注意:这个属性也不能少*/
top:0px;
left:100px;
display:none;
background-color:#b6ff00;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden;

}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>右侧二级菜单二</title>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<link href="/CSS/basecss1.css" rel="stylesheet"/>

<script>
$(function () {
$(".nav_left").hover(function () {

$(".nav_right", this).show();

});
$(".nav_left").mouseleave(function () {
$(".nav_right", this).hide();
});
})
</script>
</head>
<body>
<div>
<ul>
<li class="nav_left">
<a>第一页</a>
<ul class="nav_right">
<li>1</li>
<li>2</li>
</ul>
</li>
<li class="nav_left">
<a>第二页</a>
<ul class="nav_right">
<li>21</li>
<li>22</li>
</ul>
</li>
<li class="nav_left">
<a>第三页</a>
<ul class="nav_right">
<li>3</li>
</ul>

</li>
</ul>
</div>
</body>
</html>