server:apache
IDE:DW
2019/4/9
一个非常简单的下拉菜单1.0版本，有一点html css基础的可以更好的修改一下样式。大概的框架很简单，就是用ul元素作为下拉菜单的主要载体，然后配合伪类，修改ul元素的overflow属性，让超出ul元素范围的隐藏li元素显示
index.html
<style type="text/css">
/*放置下拉菜单的div，以及div中下拉菜单的横向布局*/
.menuDiv{
width:190px;
height:25px;
margin:0;}
.menuDiv ul{
display:inline;
float:left;}
/*下拉菜单用无序列表作为载体*/
ul{
list-style-type:none;
border:solid 1px blue;
background:#09F;
width:60px;
height:24px;
padding:0;
margin:0;
overflow:hidden;}
ul:hover{
overflow:visible;}
li{
border:dotted blue 1px;
width:60px;
height:25px;
margin:0;}
/*a标签让下拉菜单能够有跳转网页的能力*/
a{
text-decoration:none;}
a:link{
color:black;}
a:hover{
color:red;}
</style>
<body>
<div class="menuDiv">
<ul><a href="#">主菜单1</a>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
<ul><a href="#">主菜单2</a>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
<ul><a href="#">主菜单3</a>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</div>
<div style="background-color:red; border:1px red solid;">
网页内容
</div>
</body>
3963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
