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

This article mainly introduces CSS3 how to achieve vertical infinite level navigation special effects related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this CSS3 how to achieve vertical infinite level navigation special effects article will have a harvest, let's take a look at it.

Html Code:

Menu 1

Submenu 1.1

Submenu 1.1.1

Submenu 1.1.2

Submenu 1.1.2.1

Submenu 1.1.2.2

Submenu 1.2

Menu 2

Submenu 2.1

Submenu 2.2

Menu 3

Submenu 3.1

Submenu 3.2

Css3 Code:

. W1-h26 {

Padding: 0

Margin: 0

Border: 0

Line-height: 1

}

. W1-h26 ul

. W1-h26 ul li

. W1-h26 ul ul {

List-style: none

Margin: 0

Padding: 0

}

. W1-h26 ul {

Position: relative

Z-index: 500

Float: left

}

. W1-h26 ul li {

Float: left

Min-height: 0.05em

Line-height: 1em

Vertical-align: middle

Position: relative

}

. W1-h26 ul li.hover

. W1-h26 ul li:hover {

Position: relative

Z-index: 510

Cursor: default

}

. W1-h26 ul ul {

Visibility: hidden

Position: absolute

Top: 100%

Left: 0px

Z-index: 520

Width: 100%

}

. W1-h26 ul ul li {

Float: none

}

. W1-h26 ul ul ul {

Top: 0

Right: 0

}

.W1-h26 ul li:hover > ul {

Visibility: visible

}

. W1-h26 ul ul {

Top: 0

Left: 99%

}

. W1-h26 ul li {

Float: none

}

. W1-h26 ul ul {

Margin-top: 0.05em

}

. W1-h26 {

Width: 13em

Background: # 333333

Font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif

Zoom: 1

}

. W1-h26:before {

Content:''

Display: block

}

. W1-h26:after {

Content:''

Display: table

Clear: both

}

. W1-h26 a {

Display: block

Padding: 1em 1.3em

Color: # ffffff

Text-decoration: none

Text-transform: uppercase

}

.W1-h26 > ul {

Width: 13em

}

. W1-h26 ul ul {

Width: 13em

}

.W1-h26 > ul > li > a {

Border-right: 0.3em solid # 1b9bff

Color: # ffffff

}

.W1-h26 > ul > li > a:hover {

Color: # ffffff

}

.W1-h26 > ul > li a:hover

.W1-h26 > ul > li:hover a {

Background: # 1b9bff

}

. W1-h26 li {

Position: relative

}

.W1-h26 ul li.has-sub > a:after {

Content:'»'

Position: absolute

Right: 1em

}

. W1-h26 ul ul li.first {

-webkit-border-radius: 0 3px 0 0

-moz-border-radius: 0 3px 0 0

Border-radius: 0 3px 0 0

}

. W1-h26 ul ul li.last {

-webkit-border-radius: 0 0 3px 0

-moz-border-radius: 0 0 3px 0

Border-radius: 0 0 3px 0

Border-bottom: 0

}

. W1-h26 ul ul {

-webkit-border-radius: 0 3px 3px 0

-moz-border-radius: 0 3px 3px 0

Border-radius: 0 3px 3px 0

}

. W1-h26 ul ul {

Border: 1px solid # 0082e7

}

. W1-h26 ul ul a {

Color: # ffffff

}

. W1-h26 ul ul a:hover {

Color: # ffffff

}

. W1-h26 ul ul li {

Border-bottom: 1px solid # 0082e7

}

.W1-h26 ul ul li:hover > a {

Background: # 4eb1ff

Color: # ffffff

}

.W1-h26.align-right > ul > li > a {

Border-left: 0.3em solid # 1b9bff

Border-right: none

}

.W1-h26.align-right {

Float: right

}

.W1-h26.align-right li {

Text-align: right

}

.W1-h26.align-right ul li.has-sub > a:before {

Content:'+'

Position: absolute

Top: 50%

Left: 15px

Margin-top:-6px

}

.W1-h26.align-right ul li.has-sub > a:after {

Content: none

}

.W1-h26.align-right ul ul {

Visibility: hidden

Position: absolute

Top: 0

Left:-100%

Z-index: 598

Width: 100%

}

.W1-h26.align-right ul ul li.first {

-webkit-border-radius: 3px 0 0 0

-moz-border-radius: 3px 0 0 0

Border-radius: 3px 0 0 0

}

.W1-h26.align-right ul ul li.last {

-webkit-border-radius: 0 000 3px

-moz-border-radius: 0 000 3px

Border-radius: 0 0 0 3px

}

.W1-h26.align-right ul ul {

-webkit-border-radius: 3px 0 0 3px

-moz-border-radius: 3px 0 0 3px

Border-radius: 3px 0 0 3px

}

This is the end of the article on "how to achieve vertical infinite navigation effects in CSS3". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve vertical infinite navigation effects in CSS3". If you want to learn more, you are welcome to follow the industry information channel.

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.