61,112
社区成员
发帖
与我相关
我的任务
分享帮忙做一个简单的导航菜单
类似这样的，只是把画框的部分显示在左边，我现在的是别人做好的，不会改
我现在用的下载链接
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样式控制右边子菜单的显示或不显示、背景颜色、字体颜色等大到一些比较舒服的效果
