制作三级菜单

来源：互联网发布：freebsd python 编辑：程序博客网时间：2024/06/07 04:00

先用HTML打好结构

<ul>//一级菜单

<li><ahref="">Three</a></li>

<ul>//二级菜单

<li><ahref="">Four.three</a>

<ul>//三级菜单

<li><ahref="">Four.three.one</a></li>

<li><ahref="">Four.three.two</li>

<li><ahref="">Four.three.three</a></li>

<li><ahref="">Four.three.four</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

让菜单起作用的关键在于先把它藏起来：

/*隐藏二级菜单*/

li ul {display:none;}

然后，再在父元素悬停时把它显示出来：

/*显示二级菜单*/

li:hover > ul {display:block;}

用Css增添样式

//一级菜单水平摆放

.menu li{

float:left;

list-style-type:none;

padding:10px;

}

//二级菜单不显示

.menu li ul{

display:none;

}

//点击一级菜单中的li元素时，二级菜单显示并隐藏三级菜单

.menu li:hover ul{

display:block;

}

.menu li:hover li ul{

display:none;

}

//点击二级菜单中的li元素时，显示三级菜单

.menu li li:hover ul{

display:block;

position:absolute;

left:120%;

top:0%;

}

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三栏布局P80</title><style>  .menu li{  float: left;  list-style-type: none;  padding:10px;  }  .menu li a{  text-decoration: none;  }  .menu li ul{  display: none;  }  .menu li:hover ul{  display: block;  }  .menu li li{  float: none;  position: relative;  left: -50%;  top: 0%;  }   .menu li:hover li ul{  display: none;  } .menu li li:hover ul{ display: block;  position: absolute;  left: 120%;  top: 0%;  }</style></head><body><div class="menu"><ul><li><a href="">One</a></li><li><a href="">Tow</a></li><li><a href="">Three</a></li><li><a href="">Four</a><ul><li><a href="">Four.one</a></li><li><a href="">Four.two</a></li><li><a href="">Four.three</a><ul><li><a href="">Four.three.one</a></li><li><a href="">Four.three.two</li><li><a href="">Four.three.three</a></li><li><a href="">Four.three.four</a></li></ul></li><li><a href="">Four.four</a></li></ul></li></ul></div></body></html>

0 0