Heim >Web-Frontend >HTML-Tutorial >最最简单的菜单代码_html/css_WEB-ITnose
最最简单的菜单代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:371280Durchsuche
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等。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：html新闻详情页_html/css_WEB-ITnoseNächster Artikel：纯CSS3实现动画不规则的tab标签切换代码_html/css_WEB-ITnose