Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to set up and beautify the secondary navigation of the website". In the daily operation, I believe that many people have doubts about how to set up and beautify the secondary navigation of the website. The editor consulted all kinds of materials and sorted out the simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to set and beautify the secondary navigation of the website". Next, please follow the editor to study!

Many websites are no longer satisfied with the display of first-level titles, and there may be second-level titles, third-level titles and so on.

So how to set the second-level title and how to make it look good.

Note in the following code:

1. In order to make the secondary title fade away, the transition style is used.

two。 The positioning of the second-level title has always been a difficult problem that has perplexed me for a long time.

To ensure that the first-level title has a position attribute (cannot be absent and cannot be set to static), only if the first-level title (parent title) has set the position attribute, can the position attribute of the second-level title have the effect of positioning relative to the first-level title, otherwise who will the second-level title be positioned relative to?! How can we ensure that the location is accurate?!

The question about position here is really hard to figure out, and my other blog post is devoted to how to use the position attribute and the difference between static,relative,absoulte,fixed.

Well, after talking about the above notes, the following is to paste the code, I also wrote a lot of comments in the code, easy to understand and read.

The code is as follows:

Second-level title special effects

.menu a {color: # 999; text-decoration:none; font-family:'Droid Serif', serif; font-style:italic; font-size:18px}

.menu ul {list-style:none;}

/ * the style of the first-level title stipulates li*/

.menu ul li {float:left; position: relative; / * you can see here that the position attribute is set for the first-level title, with a value of relative*/

Margin-left:0px; width:80px; text-align:left

Padding:5px 10px 5px 10px

Border:0px # FF0000 solid;}

/ * the style of the second-level title specifies ul*/

.menu ul li ul {

Visibility: hidden

-webkit-backface-visibility:hidden

/ * you can see here that the position attribute is set to the first-level title with a value of absoulte, so that it can be located. This is still due to the fact that the parent title also defines the position attribute * /

Position: absolute

Padding-top: 8px

Left:-41px

Opacity: 0

-webkit-opacity:0

Border:0px solid # 000

Transition: all .5s ease-in-out

}

/ * the style of the second-level title specifies li*/

.menu ul li ul li {

Margin-left: 0px

Width:180px

Color:#999

Background-color:#FFF

}

/ * first-level title mouse over the first-level title to specify the style * /

.menu li:hover a

.menu li:hover {color:#FFF; background-color:#00F}

/ * the first-level title mouse is up to display the second-level title * /

.menu ul li:hover ul

.menu ul a:hover ul {visibility:visible;opacity: 1;}

/ * first-level title mouse over the second-level title to specify the style * /

.menu ul li:hover li

.menu ul li:hover li a {color:#999; background-color:#FFF;}

/ * the second-level title mouse is put on the effect * /

.menu ul li ul li:hover a

.menu ul li ul li:hover {color:#FFF; background-color:#00F}

Home

Pages

Buttons

List Styles

Alert Boxes

Feature

Typography

Shortcodes

At this point, the study on "how to set up and beautify the secondary navigation of the website" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.