css code to implement responsive drop-down menu-CSS Tutorial-php.cn

css code to implement responsive drop-down menu

不言

Release： 2018-07-24 10:36:12

Original

1867 people have browsed it

The content shared with you in this article is about the css code to implement responsive drop-down menus. The content is of great reference value. I hope it can help friends in need.

1. Introduction

The responsive drop-down menu can be displayed on multiple mobile terminals with different effects.

2. The code is as follows

nbsp;html>

    
        <meta>
        <meta>
        <title>响应式下拉菜单</title>
        <link>
        <link>
        <link>
    
    
        <p>
            </p><p>
                <img  alt="css code to implement responsive drop-down menu" >
                <i></i>
            </p>    
            <p></p>

Copy after login

First
Second
Third
Fourth
Fifth

body{

margin:0;

Copy after login

}
.nav{

width:100%;
background-color:#00316b;
position:relative;

Copy after login

}
ul{

padding:0px;
margin:0px;
width:80%;
margin:0 auto;
background:#00316b;

Copy after login

}
ul>li{

list-style:none;
float:left;

Copy after login

}
ul>li>a{

color:#fff;
text-decoration:none;
display:block;
padding:20px 30px;

Copy after login

}
ul>li:hover {

background-color:red;

Copy after login

}
.clearfix:after{

display:block;
content:"";
height:0px;
visibility:hidden;
clear:both;

Copy after login

}
.clearfix{

zoom:1;

Copy after login

}
.toggle{

text-align:right;
color:#fff;
padding:20px;
font-size:20px;
background:black;
/* background-color:#001r44; */
display:none;
overflow:hidden;

Copy after login

}
.tu{

float:left;

Copy after login

}
.bb{

position:absolute;
background-image:url(shitu2.png);
background-repeat:no-repeat;
background-size:100px;
width:100px;
height:40px;
left:20px;
top:10px;

Copy after login

}

----------
body{
    margin:0;
}
.nav{
    width:100%;
    background-color:#00316b;

}
ul{
    padding:0px;
    margin:0px;
    width:100%;
    margin:0 auto;
    background:#00316b;
}
ul>li{
    text-align:center;
    list-style:none;
    /* float:left; */
}
ul>li>a{
    color:#fff;
    text-decoration:none;
    display:block;
    padding:20px 30px;
}
ul>li:hover{
    background-color:red;
}
.clearfix:after{
    display:block;
    content:"";
    height:0px;
    visibility:hidden;
    clear:both;
}
.clearfix{
    zoom:1;
}
.toggle{
    text-align:right;
    color:#fff;
    padding:20px;
    background:yellow;
    font-size:20px;
    overflow:hidden;
    display:block;
}

.tu{
    float:left;
    width:100px;
}

Copy after login

Third, the renderings are as follows

css code to implement responsive drop-down menu

##This is the content displayed when the viewport is larger than 1024px

min-width:1024px

css code to implement responsive drop-down menu

This is the content displayed when the viewport is less than 1024px

max-width:1024px
This It is a rendering on a mobile phone and an iPad

css code to implement responsive drop-down menu

Related recommendations:

How to implement responsiveness in css and js Navigation menu

css how to customize the scroll bar (code)

The above is the detailed content of css code to implement responsive drop-down menu. For more information, please follow other related articles on the PHP Chinese website!