Home > Article > Web Front-end > 最最简单的菜单代码_html/css_WEB-ITnose
最最简单的菜单代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:371222browse
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>最简单的菜单</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 .moyu ul a{font-family: '微软雅黑';font-size: 14px;color: #333;text-decoration: none;} 9 .moyu ul a:hover{color: #000;text-decoration: none;}10 .moyu ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;position: relative;}11 .moyu ul li:hover{background: #c1c1c1;}12 .moyu ul{width: 100px;height: auto;position: absolute;background: #DADADA;list-style: none;}13 14 .moyu ul.nav2{left: 99px;top: 0;display: none;}15 .moyu ul.nav3{left: 99px;top: 0;display: none;}16 .moyu .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;}17 .moyu .nav2 .li2:hover ul.nav3{display: block;background: #c1c1c1;}18 .moyu .nav2 ,.moyu .nav2 li:hover {background:#ccc;}19 </style>20 </head>21 <body>22 <!--代码部分begin-->23 <div class="moyu">24 <ul class="nav1">25 <li class="li1"><a href="#">一级导航</a>26 <ul class="nav2">27 <li class="li2"><a href="#">二级导航</a></li>28 <li class="li2"><a href="#">二级导航</a>29 <ul class="nav3">30 <li class="li3"><a href="#">三级导航</a></li>31 <li class="li3"><a href="#">三级导航</a></li>32 <li class="li3"><a href="#">三级导航</a></li>33 <li class="li3"><a href="#">三级导航</a></li>34 </ul>35 </li>36 <li class="li2"><a href="#">二级导航</a></li>37 <li class="li2"><a href="#">二级导航</a></li>38 </ul>39 </li>40 <li class="li1"><a href="#">一级导航</a></li>41 <li class="li1"><a href="#">一级导航</a></li>42 <li class="li1"><a href="#">一级导航</a></li>43 <li class="li1"><a href="#">一级导航</a></li>44 <li class="li1"><a href="#">一级导航</a></li>45 </ul>46 </div>47 <!--代码部分end-->48 </body>49 </html>
以上代码可以很好理解菜单的概念。
菜单就是盒子中小盒子的开启(display:block;)与关闭（display:hidden;）
想法都是一样的，实现的方法不同，可以用纯CSS来写，也可以用JavaScript，jQuery。或是更复杂的插件bootstrap，jQuery UI等。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html新闻详情页_html/css_WEB-ITnoseNext article：纯CSS3实现动画不规则的tab标签切换代码_html/css_WEB-ITnose