css+div implementation of navigation bar
Divide the page into two parts and install it with div
<body> <div class="one1"> <h1>SYROS</h1> </div> <div class="one2"> </div>
Use < link rel = "stylesheet" type = "text / CSS" href = "CSS / style. CSS" / > to style a div
If two parts need to share a background map, they need to set a property position: absolute;
Navigation bar section
Use the unordered list to list the columns. The effect is as follows: when the mouse is crossed, it will turn red; when the mouse is crossed over different titles, the content below it will be displayed
<div class="one1"> <h1>SYROS</h1> <ul class="one1_ul"> <li> <a href="">HOME</a> <ul class="Home_ul"> <li> <a href="">HOME Default</a> </li> <li> <a href="">HOME Onepage</a> </li> <li> <a href="">HOME Business</a> </li> <li> <a href="">HOME Agency</a> </li> <li> <a href="">HOME Landing</a> </li> <li> <a href="">HOME Shop</a> </li> </ul> </li> <li> <a href="">PAGES</a> <ul class="Home_ul"> <li> <a href="">Services</a> <ul class="servies_ul"> <li> <a href="">Services1</a> </li> <li> <a href="">Services2</a> </li> </ul> </li> <li> <a href="">About Us</a> <ul class="servies_ul"> <li> <a href="">About Us1</a> </li> <li> <a href="">About Us2</a> </li> </ul> </li> <li> <a href="">Contact</a> <ul class="servies_ul"> <li> <a href="">Contact1</a> </li> <li> <a href="">Contact2</a> </li> </ul> </li> <li> <a href="">404</a> </li> </ul> </li> <li> <a href="">PORTFOLLIO</a> <ul class="Home_ul"> <li> <a href="">Classic</a> <ul class="servies_ul"> <li> <a href="">4 Columns</a> </li> <li> <a href="">3 Columns</a> </li> <li> <a href="">2 Columns</a> </li> </ul> </li> <li> <a href="">Fullwidth</a> <ul class="servies_ul"> <li> <a href="">5 Columns</a> </li> <li> <a href="">4 Columns</a> </li> <li> <a href="">3 Columns</a> </li> <li> <a href="">2 Columns</a> </li> </ul> </li> <li> <a href="">Masonry</a> <ul class="servies_ul"> <li> <a href="">5 Columns</a> </li> <li> <a href="">4 Columns</a> </li> <li> <a href="">3 Columns</a> </li> <li> <a href="">5 Columns</a> </li> </ul> </li> <li> <a href="">With Title</a> <ul class="servies_ul"> <li> <a href="">5 Columns</a> </li> <li> <a href="">4 Columns</a> </li> <li> <a href="">3 Columns</a> </li> <li> <a href="">2 Columns</a> </li> </ul> </li> <li> <a href="">Single Project</a> <ul class="servies_ul"> <li> <a href="">Standard</a> </li> <li> <a href="">Extended</a> </li> </ul> </li> </ul> </li> <li> <a href="">BLOG</a> <ul class="Home_ul"> <li> <a href="">Standard</a> </li> <li> <a href="">Masonry</a> </li> <li> <a href="">Single Post</a> </li> <li> <a href="">No Sidebar</a> </li> </ul> </li> <li> <a href="">SHOP</a> <ul class="Home_ul"> <li> <a href="">Catalog Grid</a> </li> <li> <a href="">Single Product</a> </li> <li> <a href="">Cart</a> </li> <li> <a href="">Checkout</a> </li> </ul> </li> <li> <a href="">FEATURES</a> </li> </ul> </div>
Unordered list needs to use list style type: none; to remove the previous points
Hyperlinks need to use text decoration: none; to remove underscores
Set font weight: bold for font bold;
Here is the full css code of the navigation bar
.one1 {
color: white;
width: 100%;
height: 150px;
position: absolute;
z-index: 1000;
}
.one1 h1 {
float: left;
margin-left: 35px;
}
/*First level nesting*/
.one1_ul {
float: left;
list-style-type: none;
margin-left: 350px;
}
.one1_ul li {
/*Bold font*/
font-weight: bold;
float: left;
padding: 10px 10px 10px 10px;
margin-top: 10px;
}
.one1_ul li a {
text-decoration: none;
color: white;
}
.one1_ul li a:hover {
color: red;
}
/*Second level nesting*/
.Home_ul {
position: absolute;
display: none;
}
.Home_ul li {
width: 150px;
float: none;
list-style: none;
}
.one1_ul li:hover .Home_ul {
display: block;
}
/**
* Third level nesting
*/
.servies_ul {
position: absolute;
display: none;
}
.servies_ul li {
width: 150px;
margin-left: 55px;
margin-top: -15px;
}
.Home_ul li:hover .servies_ul {
display: block;
}