Home > Developer > JavaScript
Implement drop-down menus and drop-down containers with pure CSS (implement navigation bar and navigation drop-down container with pure CSS) and css navigation bar
Although there are many similar and even the same cases on the internet, I still write down the notes for your reference.
I hope you can guide the criticism ~~
First, we start with ul li in the list. We can also say that the navigation bar is created:
On the page, we first construct the following XHTML structure:
<Body> <ul id = "navWrapper"> <li> <a href = "#"> Menu A </a> <ul> <li> <a href = "# "> Menu, item 1 </a> </li> <a href = "#"> Menu, item 2 </a> </li> <a href = "#"> Menu, item 3 </a> </li> <a href = "#"> Menu, item 4 </a> </li> <a href = "#"> Menu, item 5 </a> </li> <a href = "#"> Menu, item 6 </a> </li> </ul> </li> <a href = "#"> Menu B </a> <div id =" test "> <a href =" # "> Menu B, item 1 </a> </div> </li> </ul> <div id = "banner"> </div> <div id = "content"> <p> Page content here. </p> </div> </body>View CodeEffect:
Next, let's design the style and functions step by step (add a border for each element to facilitate the subsequent style design differences ):
Style code:
<Style> ul {border: 1px solid red;} li {border: 1px solid lightgreen;} div {border: 1px solid black;} </style>View CodeEffect:
In this way, we can differentiate and design well ~~
Remove the slide line of the link and the "." "in the list below.", In addition, the parent-Level list is arranged horizontally, and the Child-Level list is arranged vertically, just like the drop-down menu ~~ (Two levels of list nesting, one parent and one child)
Style code:
<Style> ul {border: 1px solid red;} li {border: 1px solid lightgreen;} div {border: 1px solid black;} a {text-decoration: none ;} ul # navWrapper li {float: left; list-style: none;} ul # navWrapper li ul li {float: none;} div # banner {clear: both ;} </style>View CodeEffect:
To hide the Sub-Level list and sub-level container (here, sub-level container refers to the div container whose id is test ), when you move the cursor to the parent list, the corresponding CHILD List is displayed. It is implemented through ": hover" to hide the display by using "none" and "block" of display, note that the "den" and "visibility" of visibility are not needed here. For the difference, you can change the corresponding attribute to visibility to see the effect. This will not be implemented here.
Style code:
<Style> ul {border: 1px solid red;} li {border: 1px solid lightgreen;} div {border: 1px solid black;} a {text-decoration: none ;} ul # navWrapper li {float: left; list-style: none;} ul # navWrapper li ul li {float: none;} div # banner {clear: both ;} ul # navWrapper ul, ul # navWrapper div # test {display: none; position: absolute;} ul # navWrapper li: hover ul, ul # navWrapper li: hover div # test {display: block;} </style>View CodeEffect:
Note that when the position of the child level is not set to "absolute", move the cursor to the parent level and the child level appears to occupy a certain position on the page, so "Page content here" will produce movement, which is very bad. So we can set the sub-level "position: absolute;" so that they can be separated from the normal process without affecting the subsequent content location!
Then, slightly offset the parent location and align the first parent list to the left with the parent border, in addition, a certain volume is assigned to the div container under the second parent level"
Style code:
<Style> ul {border: 1px solid red;} li {border: 1px solid lightgreen;} div {border: 1px solid black;} a {text-decoration: none ;} ul # navWrapper li {float: left; list-style: none;} ul # navWrapper li ul li {float: none; margin-left:-41px ;} div # banner {clear: both; height: 50px; margin-top: 30px;} ul # navWrapper ul, ul # navWrapper div # test {display: none; position: absolute ;} ul # navWrapper li: hover ul, ul # navWrapper li: hover div # test {display: block;} ul # navWrapper {margin-left:-41px ;} ul # navWrapper div # test {height: 200px; width: 600px; background: lightgray;} </style>View CodeEffect:
After removing all borders, the most basic structure is designed. other styles can be adjusted as needed ~~
For example:
Remove all borders and design them as a whole
Style code:
<Style> body, div, ul, li {padding: 0; margin: 0;} a {text-decoration: none;} ul # navWrapper li {float: left; list-style: none; height: 45px; line-height: 45px;} ul # navWrapper li ul li {float: none;} div # banner {clear: both; height: 50px; margin-top: 50px; margin-left: 50px;} div # content {margin-left: 50px;} ul # navWrapper ul {display: none; position: absolute; background: # CCC;} ul # navWrapper div # test {display: none; position: absolute; height: 200px; width: 600px; background: # cde6c7;} ul # navWrapper li: hover ul, ul # navWrapper li: hover div # test {display: block;} ul # navWrapper {background: # CCC; height: 45px; width: 960px; margin: 0 auto; margin-top: 30px;} li a {font-size: 24px; color: #333; display: block; height: 45px; padding: 0 20px;} li: hover {color: # fff; background: #000 ;}</style>View CodeEffect:
Figure 1:
Figure 2:
OK! This is an example of the above basic structure design. If you still need to design, you only need to design the above basic structure ~~
References: Microsoft Official Document "How to Create a CSS drop-down menu"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
