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

Source: Internet
Author: User

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 Code

Effect:

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 Code

Effect:

 

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 Code

Effect:

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 Code

Effect:

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 Code

Effect:

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 Code

Effect:

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"

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.