フロント開始 - 二次メニューを作る純粋なCSS

すでに強固な基盤を持っている場合はまず、我々はそれを無視してください、このチュートリアルは初心者の参考のために書かれていることを宣言する必要があります

セカンダリメニューは、Web開発機能モジュールでは非常に一般的ですが、それは私は良いの面でいくつかの一般的な例を取った後、まだ初心者のためのやや困難です。

2つの表示メニューの上にマウス

非常に単純な、李ULタグのネストされた層

<ul class="navs">
    <li class="nav">
        <a class="nav-a" href="#">一级菜单</a>
        <ul class="sub-navs">
            <li class="sub-nav"><a class="sub-nav-a" href="#">二级菜单</a></li>
            <li class="sub-nav"><a class="sub-nav-a" href="#">二级菜单</a></li>
            <li class="sub-nav"><a class="sub-nav-a" href="#">二级菜单</a></li>
        </ul>
    </li>
    <li class="nav">
        <a class="nav-a" href="#">一级菜单</a>
    </li>
</ul>

/*设置一级菜单样式*/

.navs:after{
    position: relative;
    content: '';
    width: 0;
    height: 0;
    visibility: hidden;
    clear: both;
    zoom: 1;
}

.nav {
    position: relative;
    float: left;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.nav-a {
    display: inline-block;
    width: 80px;
    font-size: 14px;
    color: #d8ac00;
}

結果は以下の通りであります：

そして、2つのメニューの設定

/*设置二级样式*/

.sub-navs {
    /*使用绝对定位，在文档流中不占位，免得影响后面的布局*/
    /*注意，因为这里使用了绝对定位，所以它的父元素.nav记得使用相对定位*/
    position: absolute;
    top: 100%;
    width: 100%;
    display: none;
    /*先隐藏起来*/
}

.nav:hover .sub-navs {
    /*鼠标滑过时显示二级菜单*/
    display: block;
}

.sub-nav-a {
    font-size: 12px;
    color: #000; 
}

この時間は、2つの単純なメニューの結果が出てきました。あなたは、時間、およびメニューの背景黄色、白のフォントを越えたい場合は、それ

.nav:hover .nav-a {
    background-color: #d8ac00;
    color: #fff;
}

うまくこの行を追加します。
しかし、私たちのレンダリングはまた、国境を追加しましたあなたはそれを非常にシンプルなああ、プラスborder属性ではないように見つけるかもしれないものを教えてください

.nav:hover .nav-a,
.sub-nav{
    border: 1px solid #ccc;
}

結果ボーダー重複：

私たちは、実際には、二次メニューのborder-topを除去することができる、ことを見出しました

.sub-nav{
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

問題は、最初のレベルのメニュー、メニューが点滅現象の右側に表示されたら、左にマウスのスライドは、ボーダーボックス属性と相まって非常に非友好的な経験では、この問題を解決することができるときもあり、

.nav-a {
    box-sizing: border-box;
}

参照コード：http://runjs.cn/detail/ep0eq85c

---

著者の注意を〜