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

This article mainly introduces how to use pure css3 to achieve vertical secondary navigation, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand 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:

CSS Code copies content to the clipboard

. 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

Rightright: 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-h16:before {

Content:''

Display: block

}

. W1-h16: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

Rightright: 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-rightright > ul > li > a {

Border-left: 0.3em solid # 1b9bff

Border-right: none

}

.W1-h26.align-rightright {

Float: rightright

}

.W1-h26.align-rightright li {

Text-align: rightright

}

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

Content:'+'

Position: absolute

Top: 50%

Left: 15px

Margin-top:-6px

}

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

Content: none

}

.W1-h26.align-rightright ul ul {

Visibility: hidden

Position: absolute

Top: 0

Left:-100%

Z-index: 598

Width: 100%

}

.W1-h26.align-rightright 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-rightright 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-rightright ul ul {

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

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

Border-radius: 3px 0 0 3px

}

Thank you for reading this article carefully. I hope the article "how to use the vertical secondary navigation realized by pure css3" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.