html+CSS二级下拉菜单

博主： masy
发布时间：2016 年 11 月 06 日
2224 次浏览
暂无评论
1113字数
分类：代码折腾

html：

<div class="nav">
  <ul>
    <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="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>
    </li>
    <li><a href="#">栏目四</a></li>
    <li><a href="#">栏目五</a></li>
  </ul>
</div>

CSS：

* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }

最后修改：2019 年 06 月 07 日

© 允许规范转载

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

html+CSS二级下拉菜单

masy • 2016 年 11 月 06 日

<p><strong>html：</strong></p><pre><code>&lt;div class=&quot;nav&quot;&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;栏目一&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;栏目二&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;栏目三&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;二级栏目&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;栏目四&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;栏目五&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre><p><strong>CSS：</strong></p><pre><code>* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }</code></pre>