Implement drop down navigation bar

1, html+css

1. Use display attribute in css

value describe
none This element will not be displayed.
block This element will appear as a block level element with a line break before and after it.

Source code:

html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpage</title>
<link rel="stylesheet" type="text/css" href="Various function summary experiment webpage.css">
</head>


<body>
	<div id="wrapper">
    
    	<div id="header">
        </div>
        
        <div id="nav">
        	<ul>
                <li><a href="#"> love Encyclopedia</a></li>
                <li class="drop-down"><a href="#"> constellation query</a>
                    <ul class="drop-down-content">
                        <li><a href="#"> Aries</a></li>
                        <li><a href="#"> Taurus</a></li>
                        <li><a href="#"> Gemini</a></li>
                        <li><a href="#"> cancer</a></li>
                        <li><a href="#"> Leo</a></li>
                        <li><a href="#"> Virgo</a></li>
                        <li><a href="#"> Libra</a></li>
                        <li><a href="#"> Scorpio</a></li>
                        <li><a href="#"> Sagittarius</a></li>
                        <li><a href="#"> Capricorn</a></li>
                        <li><a href="#"> Aquarius</a></li>
                        <li><a href="#"> Pisces</a></li>
                    </ul>
                </li>  
                <li><a href="#"> games</a></li>
                <li><a href="#"> questionnaire</a></li>
			</ul>
        </div>
       
    </div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */


body{
	font-family:Song style,Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background:#F6F9F9;
}


a{
	text-decoration:none;
	color:#000000;
}


ul{
	list-style-type:none;
}


#wrapper{
	width:1000px;
	margin:0px auto;
}


#header{
	width:100%;
	background:#0099FF;
}


#nav{
	width:100%;
	height:50px;
	background-color:#41B4F6;
	float:left;
	margin-top:70px;
}


#nav ul .drop-down{
	float:left;
}


#nav>ul>li>a{
	float:left;
	font-size:20px;
	color:#ff;
	width:150px;
	margin-top:5px;
	background:url(%E6%B5%8B%E8%AF%95%E7%BD%91%E9%A1%B5%EF%BC%8C%E6%96%B0%E5%8A%9F%E8%83%BD%E5%AD%A6%E4%B9%A0/%E5%9B%BE%E7%89%87/%E5%9B%BE%E7%89%871.png) no-repeat right top;
	text-align:center;
}


#nav ul .drop-down .drop-down-content a{
	float:left;
	font-size:20px;
	color:#ff;
	background-color:#00CCFF;
	width:150px;
	height:30px;
	text-align:center;
}


#nav>ul>li:hover a{
	background-color:#0B9EF4;
	border-radius:20px 20px 20px 20px;
}


#nav ul .drop-down-content{
	display:none;
	padding:0px;
}


#nav ul .drop-down:hover .drop-down-content{
	display:block;
	
	
}

Effect


2. Use the overflow property of CSS

value describe
visible Default. The content is not trimmed and appears outside the element box.
hidden The content is trimmed and the rest is invisible.

html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpage</title>
<link rel="stylesheet" type="text/css" href="Various function summary experiment webpage.css">
</head>

<body>
	<div id="wrapper">
    
    	<div id="header">
        </div>
        
        <div id="nav">
        	<ul>
                <li><a href="#"> love Encyclopedia</a></li>
                <li class="drop-down"><a href="#"> constellation query</a>
                    <ul class="drop-down-content">
                        <li><a href="#"> Aries</a></li>
                        <li><a href="#"> Taurus</a></li>
                        <li><a href="#"> Gemini</a></li>
                        <li><a href="#"> cancer</a></li>
                        <li><a href="#"> Leo</a></li>
                        <li><a href="#"> Virgo</a></li>
                        <li><a href="#"> Libra</a></li>
                        <li><a href="#"> Scorpio</a></li>
                        <li><a href="#"> Sagittarius</a></li>
                        <li><a href="#"> Capricorn</a></li>
                        <li><a href="#"> Aquarius</a></li>
                        <li><a href="#"> Pisces</a></li>
                    </ul>
                </li>  
                <li><a href="#"> games</a></li>
                <li><a href="#"> questionnaire</a></li>
			</ul>
        </div>
        
        
    <h3>There's nothing else I'm waiting for the wind to wait for you</h3>
        
    </div>
    
    
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

body{
	font-family:Song style,Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background:#F6F9F9;
}

a{
	text-decoration:none;
	color:#000000;
}

ul{
	list-style-type:none;
}

#wrapper{
	width:1000px;
	margin:0px auto;
}

#header{
	width:100%;
	background:#0099FF;
}

#nav{
	width:100%;
	height:50px;
	background-color:#41B4F6;
	float:left;
	margin-top:70px;
}



#nav ul .drop-down{
	float:left;
	overflow:hidden;
	height:27px;
}

#nav>ul>li>a{
	float:left;
	font-size:20px;
	color:#ff;
	width:150px;
	margin-top:5px;
	background:url(%E6%B5%8B%E8%AF%95%E7%BD%91%E9%A1%B5%EF%BC%8C%E6%96%B0%E5%8A%9F%E8%83%BD%E5%AD%A6%E4%B9%A0/%E5%9B%BE%E7%89%87/%E5%9B%BE%E7%89%871.png) no-repeat right top;
	text-align:center;
}

#nav ul .drop-down .drop-down-content a{
	float:left;
	font-size:20px;
	color:#ff;
	background-color:#00CCFF;
	width:150px;
	height:30px;
	text-align:center;
}

#nav>ul>li:hover a{
	background-color:#0B9EF4;
	border-radius:20px 20px 20px 20px;
}

#nav ul .drop-down-content{
	padding:0px;
}

#nav ul .drop-down:hover{
	overflow:visible;
	
}

h3{
	clear:both;
	font-size:50px;
}


This overflow is different from the first display. It is to fix the navigation column to a certain height. When the mouse touches it, it will display the contents hidden by the fixed height.

Effect

The drop-down box here is transparent, and it will disappear if you touch the following word drop-down box. It is not recommended.








Tags: Attribute REST

Posted on Thu, 30 Apr 2020 03:48:48 -0700 by jamesflynn