61,129
社区成员
发帖
与我相关
我的任务
分享帮忙做一个简单的导航菜单
类似这样的，只是把画框的部分显示在左边，我现在的是别人做好的，不会改
我现在用的下载链接
http://www.56gee.com/Detail/2013/03/11/8AE973E320/
...全文
请发表友善的回复…
发表回复
QPQ_ 2018-02-11
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
line-height: 40px;
}
ul.main > li {
position: relative;
width: 300px;
height: 40px;
border: 1px solid #333;
}
ul.main > li:hover {
background-color: #333;
color: #fff;
}
ul.main > li:hover ul.child {
display: block;
color: #333;
}
ul.child {
position: absolute;
display: none;
top: 0;
right: -202px;
}
ul.child li {
width: 200px;
height: 40px;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul class="main">
设计素材
<li>one
<ul class="child">
<li>who</li>
<li>who</li>
<li>who</li>
<li>who</li>
</ul>
</li>
<li>two
<ul class="child">
<li>are</li>
<li>are</li>
<li>are</li>
<li>are</li>
</ul>
</li>
<li>three
<ul class="child">
<li>you</li>
<li>you</li>
<li>you</li>
<li>you</li>
</ul>
</li>
<li>four
<ul class="child">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</li>
</ul>
</body>
</html>
这里有个简单版的你可以参考一下。
原理就是：
（1）你把主菜单用一个ul.parent->li包裹起来，然后再在每个ul.parent中的li里边创建子ul.child->li放置右边的菜单栏。
（2）将每个ul.child相对于ul.parent中的li定位，这个很简单，ul.parent li{position:relative} ul.child { position: absolute;}然后调整每个ul.child的left,top或right、bottom位置到相应位置。布局到这里基本结束。
（3）剩下的你可以设置一些hover样式控制右边子菜单的显示或不显示、背景颜色、字体颜色等大到一些比较舒服的效果
导言：本文一步一步手把手教你打造一个极酷的三层分离的标准滑动门导航菜单，从思路、原理、步骤，手段可谓“无所不用其极”，即便你是菜鸟，相信你看了本文后，也能打造出属于自己的超级漂亮的标准导航菜单。...
