1 introduction
Beginners CSS, using unordered lists, div tags and selectors to achieve a simple navigation bar with a drop down list, I found AMD official website navigation bar as a template, a simple copy of it:
2 Core function implementation
2.1 Basic element Settings
Due to the classification of the drop-down menu is too much, workload is bigger, so the drop-down “processor” implementation, “desktop” to realize the side of the directory, as shown in the above, the first thing to do is to put all the text information to create good, convenience to all links in the replace with #, at the same time also need to find a AMD logo, specific code is as follows:
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>Navigation Bar Example</title>
</head>
<body>
<ul>
<li><img src="AMD-LOGO.png" alt="amdlogo" height="50" width="160"></li>
<li><a href="#">The processor ▾</a>
<ul>
<li><a href="#">desktop</a>
<div>
<a href="#">Consumer processors:</a>
<a href="#">Sharp dragon THREADRIPPER</a>
<a href="#">Sharp dragon</a>
<a href="#">The Ryzen comes with a graphics card</a>
<a href="#">Velocirons carry graphics cards</a>
<a href="#">Business users:</a>
<a href="#">Sharp dragon PRO</a>
<a href="#">Velociraptor PRO</a>
<a href="#">AMD PRO technology</a>
<a href="#">Business computer</a>
</div>
</li>
<li><a href="#">Laptop</a></li>
<li><a href="#">The workstation</a></li>
<li><a href="#">The server</a></li>
<li><a href="#">Embedded solutions</a></li>
<li><a href="#">Half a custom</a></li>
<li><a href="#">Product specification</a></li>
<li><a href="#">technology</a></li>
</ul>
</li>
<li><a href="#">Graphics ▾</a></li>
<li><a href="#">The game is ▾</a></li>
<li><a href="#">Enterprise Solutions ▾</a></li>
<li><a href="#">Buy ▾</a></li>
<li><a href="#">Drive and support</a></li>
<li><a href="#">Industry Solutions ▾</a></li>
</ul>
<h1>AMD at Chinajoy 2021</h1>
<h2>Speed to win the game</h2>
<p>The specific content</p>
</body>
</html>
Copy the codeThe display effect in the webpage is as follows:
The main body of the code is an unordered list, the processor’s drop-down list is nested with an unordered list (in theory, it should be possible to nest a div+a here), and the desktop’s side-drop list is nested with a div+ A. Use both methods again, it is still very good for deeper understanding
2.2 Drop-down list Settings
Hover selector to determine whether to display the two drop-down lists.
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>Navigation Bar Example</title>
<style>
.navigation>li {
display: inline-block;
position: relative;
}
.list_down {
display: none;
/* Display the menu with the hover selector, where */ is hidden by default
position: absolute;
/* Causes the drop-down list to overwrite */
list-style-type: none;
/* Unstyle ul */
padding: 0;
/* Remove ul padding*/
}
.list_down li {
display: block;
}
.list_right {
display: none;
/* Display the menu with the hover selector, where */ is hidden by default
position: absolute;
}
.list_right a {
display: block;
}
.list_down .button2:hover .list_right {
display: inline-block;
/* makes the drop-down list appear on the right side of the desktop for demo purposes. This will be changed to block*/
}
.navigation .button1:hover .list_down {
display: block;
/* Display the drop-down menu */
}
</style>
</head>
<body>
<ul class="navigation">
<li><img src="AMD-LOGO.png" alt="amdlogo" height="50" width="160"></li>
<li class="button1"><a href="#">The processor ▾</a>
<ul class="list_down">
<li class="button2"><a href="#">desktop</a>
<div class="list_right">
<a href="#">Consumer processors:</a>
<a href="#">Sharp dragon THREADRIPPER</a>
<a href="#">Sharp dragon</a>
<a href="#">The Ryzen comes with a graphics card</a>
<a href="#">Velocirons carry graphics cards</a>
<a href="#">Business users:</a>
<a href="#">Sharp dragon PRO</a>
<a href="#">Velociraptor PRO</a>
<a href="#">AMD PRO technology</a>
<a href="#">Business computer</a>
</div>
</li>
<li><a href="#">Laptop</a></li>
<li><a href="#">The workstation</a></li>
<li><a href="#">The server</a></li>
<li><a href="#">Embedded solutions</a></li>
<li><a href="#">Half a custom</a></li>
<li><a href="#">Product specification</a></li>
<li><a href="#">technology</a></li>
</ul>
</li>
<li><a href="#">The graphics card</a></li>
<li><a href="#">The game</a></li>
<li><a href="#">Enterprise solutions</a></li>
<li><a href="#">buy</a></li>
<li><a href="#">Drive and support</a></li>
<li><a href="#">Industry solutions</a></li>
</ul>
<h1>AMD at Chinajoy 2021</h1>
<h2>Speed to win the game</h2>
<p>The specific content</p>
</body>
</html>
Copy the codeThe display effect in the page is as follows, you can see that the core function has been realized, but there is still a little beautification ~
3 Page beautification
According to the template page to do a billion points of beautification:
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>Navigation Bar Example</title>
<style>
* {
padding: 0;
margin: 0;
}
.navigation {
background-color: black;
/* Background color of navigation bar */
}
.navigation>li {
display: inline-block;
position: relative;
padding: 10px;
vertical-align: middle;
/* Causes lists in the navigation bar to be centered */
}
.navigation>li>a {
text-decoration: none;
color: white;
padding: 15px;
}
.navigation>li:hover {
background-color: rgba(255.255.255.0.9) /* Mouse hover color */}.navigation>li:hover>a {
color: black;
/* Mouse hover color */
}
.logo {
display: block;
}
.list_down {
display: none;
/* Display the menu with the hover selector, where */ is hidden by default
position: absolute;
/* Causes the drop-down list to overwrite */
list-style-type: none;
/* Unstyle ul */
margin-top: 10px;
margin-left: -10px;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0.0.0.0.2);
/* Add shadow */
}
.list_down li {
display: block;
background-color: rgba(255.255.255.0.9)}.list_down li:hover {
background-color: black;
/* Mouse hover color */
}
.list_down li:hover>a {
color: white;
/* Mouse hover color */
}
.list_right {
display: none;
/* Display the menu with the hover selector, where */ is hidden by default
position: absolute;
margin-left: 150px;
margin-top: -51px;
background-color: rgba(255.255.255.0.9);
width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0.0.0.0.2);
/* Add shadow */
}
.list_right a..list_down li a {
display: block;
text-decoration: none;
color: black;
padding: 15px;
}
.list_right a:hover {
background-color: black;
color: white;
/* Mouse hover color */
}
.list_down .button2:hover .list_right {
display: block;
}
.navigation .button1:hover .list_down {
display: block;
/* Display the drop-down menu */
}
.text {
margin: 20px;
/ * * / text
}
</style>
</head>
<body>
<ul class="navigation">
<li><img class="logo" src="AMD-LOGO.png" alt="amdlogo" height="50" width="160"></li>
<li class="button1"><a href="#">The processor</a>
<ul class="list_down">
<li class="button2"><a href="#">desktop</a>
<div class="list_right">
<a href="#">Consumer processors:</a>
<a href="#">Sharp dragon THREADRIPPER</a>
<a href="#">Sharp dragon</a>
<a href="#">The Ryzen comes with a graphics card</a>
<a href="#">Velocirons carry graphics cards</a>
<a href="#">Business users:</a>
<a href="#">Sharp dragon PRO</a>
<a href="#">Velociraptor PRO</a>
<a href="#">AMD PRO technology</a>
<a href="#">Business computer</a>
</div>
</li>
<li><a href="#">Laptop</a></li>
<li><a href="#">The workstation</a></li>
<li><a href="#">The server</a></li>
<li><a href="#">Embedded solutions</a></li>
<li><a href="#">Half a custom</a></li>
<li><a href="#">Product specification</a></li>
<li><a href="#">technology</a></li>
</ul>
</li>
<li><a href="#">The graphics card</a></li>
<li><a href="#">The game</a></li>
<li><a href="#">Enterprise solutions</a></li>
<li><a href="#">buy</a></li>
<li><a href="#">Drive and support</a></li>
<li><a href="#">Industry solutions</a></li>
</ul>
<div class="text">
<h1>AMD at Chinajoy 2021</h1>
<h2>Speed to win the game</h2>
<p>The specific content</p>
</div>
</body>
</html>
Copy the codeThe end result is like this, or quite similar ~
AMD YES!