二级水平菜单导航

时间：2020-11-26 22:23:23 阅读：30 评论：0 收藏：0 [点我收藏+]

Markdown在线编辑器 - www.MdEditor.com

二级水平导航导航菜单

想知道效果，你来实现！！！

HTML的布局

<ul>
 <li><a href="">首页</a></li>
 <li><a href="">课程</a>
 <ul>
 <li><a href="">语文</a></li>
 <li><a href="">数学</a></li>
 <li><a href="">英语</a></li>
 <li><a href="">政治</a></li>
 </ul>
 </li>
 <li><a href="">活动</a>
 <ul>
 <li><a href="">读书</a></li>
 <li><a href="">睡觉</a></li>
 <li><a href="">睡觉</a></li>
 <li><a href="">游戏</a></li>
 </ul>
 </li>
 <li><a href="">生活</a>
 <ul>
 <li><a href="">好好学习</a></li>
 <li><a href="">Do it !</a></li>
 </ul>
 </li>
 </ul>

CSS样式

ul{
 margin: 0;
 padding: 0px;
 }
 ul li{
 height: 30px;
 width:115px;
 list-style:none;
 float:left;
 display:inline;
 text-align:center;
 font:0.9em Arial, Helvetica, sans-serif;
 }
 ul li a {
 color:#fff;
 width:113px;
 margin:0px;
 padding:0px 0px 0px 8px;
 text-decoration:none;
 display:block;
 background:pink;
 line-height:29px;
 border-right:1px solid green;
 border-bottom:1px solid green;
 }
 ul li ul li{
 height:25px;
 }
 ul li ul li a{
 background:pink;
 line-height:24px;
 }
 ul li a:hover{
 background:yellow;
 border-bottom:1px dashed #ff0000;
 }
 ul li ul{
 visibility:hidden;
 }
 ul li:hover ul{
 visibility:visible;
 }
 ul li ul li a:hover{
 background:pink;
 }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 ul{
 margin: 0;
 padding: 0px;
 }
 ul li{
 height: 30px;
 width:115px;
 list-style:none;
 float:left;
 display:inline;
 text-align:center;
 font:0.9em Arial, Helvetica, sans-serif;
 }
 ul li a {
 color:#fff;
 width:113px;
 margin:0px;
 padding:0px 0px 0px 8px;
 text-decoration:none;
 display:block;
 background:pink;
 line-height:29px;
 border-right:1px solid green;
 border-bottom:1px solid green;
 }
 ul li ul li{
 height:25px;
 }
 ul li ul li a{
 background:pink;
 line-height:24px;
 }
 ul li a:hover{
 background:yellow;
 border-bottom:1px dashed #ff0000;
 }
 ul li ul{
 visibility:hidden;
 }
 ul li:hover ul{
 visibility:visible;
 }
 ul li ul li a:hover{
 background:pink;
 }
 </style>
</head>
<body>
 <ul>
 <li><a href="">首页</a></li>
 <li><a href="">课程</a>
 <ul>
 <li><a href="">语文</a></li>
 <li><a href="">数学</a></li>
 <li><a href="">英语</a></li>
 <li><a href="">政治</a></li>
 </ul>
 </li>
 <li><a href="">活动</a>
 <ul>
 <li><a href="">读书</a></li>
 <li><a href="">睡觉</a></li>
 <li><a href="">睡觉</a></li>
 <li><a href="">游戏</a></li>
 </ul>
 </li>
 <li><a href="">生活</a>
 <ul>
 <li><a href="">好好学习</a></li>
 <li><a href="">Do it !</a></li>
 </ul>
 </li>
 </ul>
</body>
</html>

VQ小结

第一次写博客园，不是很懂，请多多指教！！！

if（konw==false）
{
 Read my blog!
}
else
{
 Your advice are most welcome!!
}

二级水平菜单导航

原文：https://www.cnblogs.com/VQchongchong/p/webxuexi.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)