How to use CSS3 to implement a navigation drop-down menu (complete code attached)

坏嘻嘻
Release: 2018-09-26 17:54:31
Original
5458 people have browsed it

In the current web page structure, the navigation menu bar occupies a very important position, because it can not only display examples, but also give you the most intuitive impression of the content. As we all know, in HTML

    < ;li>
The menu can be graded, then we can cooperate with css3 to implement the navigation drop-down menu. What this article brings to you is about how to use CSS3 to implement a navigation drop-down menu. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The principle of using css3 to implement navigation drop-down menu

First, use the

  • > in HTML ;
To make the menu, we will use a hover statement, that is, when the mouse hovers in a certain area, it will trigger the display of the lower-level menu. What we need to know is the display attribute. We will The properties of block and none will be used to appear and hide the drop-down menu. Then we will define position for each menu to determine the location of the menu, and finally use the ::after pseudo-element selector to clear the float.

Steps to use css3 to implement navigation drop-down menu

##Step 1: Use HTML to create a menu style

<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></li>
            <li><a href="#">导航三</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a>
                        <ul>
                            <li><a href="#">三级导航</a></li>
                            <li><a href="#">三级导航</a></li>
                            <li><a href="#">三级导航</a></li>
                        </ul>
                    </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>
                </ul>
            </li>
            <li><a href="#">导航五</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul> 
            </li>
            <li><a href="#">导航六</a></li>
        </ul>
    </nav>
Copy after login

Step 2: Use css3 to implement the drop-down menu triggered by mouse hover

nav {
    margin:100px auto;
    text-align:center;
}
nav ul {
    border-radius:10px;
    background:linear-gradient(to bottom,#efefef,#bbbbbb);
    padding:0 20px;
    display:inline-table;
    position:relative;  
    box-shadow:1px 1px 3px #666;
}
nav ul ul {
    display:none;
}
nav ul li {
    float:left; 
}
nav ul::after {
    content:"";
    display:block;
    clear:both;
}
nav ul li a {
    display:block;
    padding:25px 40px;
    color:#000;
    text-decoration:none;
    font-family:"微软雅黑";
}
nav ul li:hover > ul {
    display:block;
}
nav ul li:hover {
    background:linear-gradient(to bottom,#4f5964,#5f6975);
}
nav ul li:hover a {
    color:#FFF;
}
nav ul ul {
    background:#5f6975;
    border-radius:0;
    position:absolute;
    top:100%;
    padding:0;
}
nav ul ul li {
    float:none;
    border-top:1px solid #6b727c;
    border-bottom:1px solid #575f6a;
}
nav ul ul li a {
    color:#FFF;
}   
nav ul ul li a:hover {
    background:#4b545f;
}
nav ul ul ul {
    width:100%;
    position:absolute;
    left:100%;
    top:50%;
}
Copy after login

Step 3: Beautify according to the requirements of the menu style

The drop-down menu style is as shown in the picture

How to use CSS3 to implement a navigation drop-down menu (complete code attached)

The above is the detailed content of How to use CSS3 to implement a navigation drop-down menu (complete code attached). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template