The front Started - pure css making secondary menu - Code World

First, we need to declare that this tutorial is written for beginners reference, if you already have a solid foundation please ignore it

Secondary menu is very common in web development function module, but it is still somewhat difficult for beginners, the following I took a few common cases in terms of good.

Mouse over two display menu

Very simple, li ul tag nested layer

<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;
}

Results are as follows:

Then two menu Settings

/*设置二级样式*/

.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; 
}

This time two simple menu results came out. If you want across time, and a menu background yellow, white font it

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

Add this line just fine.
But our renderings also added a border, Tell me what you may find it very simple ah, plus the border attribute not to like

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

Results border overlap:

We found that, in fact, the secondary menu border-top can be removed

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

There is also a problem, when the mouse slide to the left when the first-level menu, a menu appears to the right of the flashing phenomenon, very unfriendly experience, coupled with border-box attributes can solve this problem

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

Reference Code: http://runjs.cn/detail/ep0eq85c

Author attention it ~

The front Started - pure css making secondary menu

Guess you like