The simplest menu code_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

The simplest menu code_html/css_WEB-ITnose

Jun 24, 2016 am 11:42 AM

 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 5 &lt;title&gt;最简单的菜单&lt;/title&gt; 6 &lt;style&gt; 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 &lt;/style&gt;20 &lt;/head&gt;21 &lt;body&gt;22 &lt;!--代码部分begin--&gt;23 &lt;div class=&quot;moyu&quot;&gt;24 &lt;ul class=&quot;nav1&quot;&gt;25     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;26         &lt;ul class=&quot;nav2&quot;&gt;27             &lt;li class=&quot;li2&quot;&gt;&lt;a href=&quot;#&quot;&gt;二级导航&lt;/a&gt;&lt;/li&gt;28             &lt;li class=&quot;li2&quot;&gt;&lt;a href=&quot;#&quot;&gt;二级导航&lt;/a&gt;29                 &lt;ul class=&quot;nav3&quot;&gt;30                     &lt;li class=&quot;li3&quot;&gt;&lt;a href=&quot;#&quot;&gt;三级导航&lt;/a&gt;&lt;/li&gt;31                     &lt;li class=&quot;li3&quot;&gt;&lt;a href=&quot;#&quot;&gt;三级导航&lt;/a&gt;&lt;/li&gt;32                     &lt;li class=&quot;li3&quot;&gt;&lt;a href=&quot;#&quot;&gt;三级导航&lt;/a&gt;&lt;/li&gt;33                     &lt;li class=&quot;li3&quot;&gt;&lt;a href=&quot;#&quot;&gt;三级导航&lt;/a&gt;&lt;/li&gt;34                 &lt;/ul&gt;35             &lt;/li&gt;36             &lt;li class=&quot;li2&quot;&gt;&lt;a href=&quot;#&quot;&gt;二级导航&lt;/a&gt;&lt;/li&gt;37             &lt;li class=&quot;li2&quot;&gt;&lt;a href=&quot;#&quot;&gt;二级导航&lt;/a&gt;&lt;/li&gt;38         &lt;/ul&gt;39     &lt;/li&gt;40     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;&lt;/li&gt;41     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;&lt;/li&gt;42     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;&lt;/li&gt;43     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;&lt;/li&gt;44     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;&lt;/li&gt;45 &lt;/ul&gt;46 &lt;/div&gt;47 &lt;!--代码部分end--&gt;48 &lt;/body&gt;49 &lt;/html&gt;

Copy after login

The above code can easily understand the concept of menu.

The menu is the opening (display:block;) and closing (display:hidden;) of the small box in the box

The idea is the same, but the implementation method is different. It can be written in pure CSS , JavaScript and jQuery can also be used. Or more complex plug-ins bootstrap, jQuery UI, etc.

Statement of this Website

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