Comments: The drop-down navigation is often seen when you browse Web pages. Remember that JavaScript is used in the past, but this article will introduce the use of css3 + html5, if you are interested, do not miss it. I hope it will help you learn css3 as follows:
The Code is as follows:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> pure html + css navigation </title>
<! -- Mulder -->
<! -- Qq: 10221408 -->
<! -- Only chrome firefox is supported -->
<Style>
*{
Margin: 0;
Padding: 0;
}
. Clear: after {
Clear: both;
Content :".";
Display: block;
Height: 0;
Visibility: hidden;
}
Nav {
Display: inline-block;
Border: 1px solid #505255;
Border-bottom: 1px solid # 282C2F;
-Moz-border-radius: 5px;
-Webkit-border-radius: 5px;
Margin: 50px;
-Webkit-box-shadow: 1px 1px 3px #292929;
-Moz-box-shadow: 1px 1px 3px #292929;
}
Li {
List-style: none;
Float: left;
Border-right: 1px solid #2E3235;
Position: relative;
/* Background:-moz-linear-gradient (top, # fff, # 555D5F 2%, # 555D5F 50%, #3e00005 100% );
Background:-webkit-gradient (linear, 0 0, 0 100%, from (# fff), color-stop (2%, # 555D5F), color-stop (50%, # 555D5F), to (#3e00005 ));*/
Background: # 555D5F;
}
Li: hover {
/* Background:-moz-linear-gradient (top, # fff, #3e00005 2%, # 555D5F 80%, # 555D5F 100% );
Background:-webkit-gradient (linear, 0 0, 0 100%, from (# fff), color-stop (2%, #3e00005), color-stop (80%, #3e00005), to (# 555D5F ));*/
Background: #3e00005;
-Moz-transition: background 1 s transition-out;
-Webkit-transition: background 1 s transfer-out;
}
Li {
Display: block;
Height: 40px;
Line-height: 40px;
Padding: 0 30px;
Font-size: 12px;
Color: # fff;
Text-shadow: 0px-1px 0px #000;
Text-decoration: none;
White-space: nowrap;
Border-left: 1px solid # 999E9F;
Border-top: 1px solid # 999E9F;
-Moz-border-top-left-radius: 2px;
-Webkit-border-top-left-radius: 2px;
Z-index: 100;
}
Li> {
Position: relative;
}
Li. first {
-Moz-border-radius-topleft: 4px;
-Moz-border-radius-bottomleft: 4px;
-Webkit-border-top-left-radius: 4px;
-Webkit-border-bottom-left-radius: 4px;
}
Li. last {
Border-right: 0 none;
}
Dl {
Position: absolute;
Display: block;
Top: 40px;
Left:-25px;
Width: 165px;
Background: #222222;
-Moz-border-radius: 5px;
-Webkit-border-radius: 5px;
-Webkit-box-shadow: 1px 1px 3px #292929;
-Moz-box-shadow: 1px 1px 3px #292929;
Z-index: 10;
}
Li: hover dl {
Top: 50px;
Display: block;
Width: 145px;
Padding: 10px;
}
Dl {
Background: transparent;
Border: 0 none;
-Moz-border-radius: 5px;
-Webkit-border-radius: 5px;
-Moz-transition: background 0.5 s transition-out;
-Webkit-transition: background 0.5 s transfer-out;
Z-index: 50;
}
Dl a: hover {
Color: # FFF;
Background: # 999E9F;
-Moz-transition: background 0.3 s audio-in-out, color 0.3 s audio-in-out;
-Webkit-transition: background 0.3 s loading-in-out, color 0.3 s loading-in-out;
}
Dd {
Margin-top:-40px;
Opacity: 0;
Width: 145px;
-Webkit-transition-property: all;
/*-Webkit-transition-timing-function: cubic-bezr (5, 0, 5, 0 );*/
-Moz-transition-property: all;
/*-Moz-transition-timing-function: cubic-bezr (5, 0, 5, 0 );*/
/*-Webkit-transition-delay: 5 s;
-Moz-transition-delay: 5 s ;*/
}
Li: hover dd {
Margin-top: 0;
Opacity: 1;
}
Li dd: nth-child (1 ){
-Webkit-transition-duration: 0.1 seconds;
-Moz-transition-duration: 0.1 s;
}
Li dd: nth-child (2 ){
-Webkit-transition-duration: 0.2 seconds;
-Moz-transition-duration: 0.2 s;
}
Li dd: nth-child (3 ){
-Webkit-transition-duration: 0.3 seconds;
-Moz-transition-duration: 0.3 s;
}
Li dd: nth-child (4 ){
-Webkit-transition-duration: 0.4 seconds;
-Moz-transition-duration: 0.4 s;
}
Dt {
Display: none;
Margin-top:-25px;
Padding-top: 15px;
Height: 10px;
}
Li: hover dt {
Display: block;
}
. Darrow {
Float: right;
Margin: 18px 10px 0 0;
Border-width: 5px;
Border-color: # FFF transparent;
Border-style: solid;
Width: 0;
Height: 0;
Line-height: 0;
Overflow: hidden;
Cursor: pointer;
Text-shadow: 0px-1px 0px #000;
-Webkit-box-shadow: 0px-1px 0px #000;
-Moz-box-shadow: 0px-1px 0px #000;
}
. Arrow {
Margin: 0 auto;
Margin-top:-5px;
Display: block;
Width: 10px;
Height: 10px;
Background: #222222;
-Webkit-transform: rotate (45deg );
-Moz-transform: rotate (45deg );
}
</Style>
</Head>
<Body>
<Nav>
<Ul class = "clear">
<Li class = "first"> <a href = "#"> menu 1 </a> </li>
<Li>
<Span class = "Darrow"> </span>
<A href = "#"> menu 2 </a>
<Dl>
<Dt> <span class = "arrow"> </span> </dt>
<Dd> <a href = "#"> sub-menu 1 </a> </dd>
<Dd> <a href = "#"> sub-Menu 2 </a> </dd>
<Dd> <a href = "#"> sub-menu, three sub-menus, and three sub-menus </a> </dd>
</Dl>
</Li>
<Li>
<Span class = "Darrow"> </span>
<A href = "#"> menu 3 </a>
<Dl>
<Dt> <span class = "arrow"> </span> </dt>
<Dd> <a href = "#"> sub-menu 1 </a> </dd>
<Dd> <a href = "#"> sub-Menu 2 </a> </dd>
<Dd> <a href = "#"> sub-menu, three sub-menus, and three sub-menus </a> </dd>
</Dl>
</Li>
<Li>
<Span class = "Darrow"> </span>
<A href = "#"> menu 4 </a>
<Dl>
<Dt> <span class = "arrow"> </span> </dt>
<Dd> <a href = "#"> sub-menu 1 </a> </dd>
<Dd> <a href = "#"> sub-Menu 2 </a> </dd>
<Dd> <a href = "#"> sub-menu 3 </a> </dd>
<Dd> <a href = "#"> sub-menu 4 </a> </dd>
</Dl>
</Li>
<Li> <a href = "#"> menu 5 </a> </li>
<Li> <a href = "#"> menu 6 </a> </li>
<Li> <a href = "#"> menu 7 </a> </li>
<Li class = "last"> <a href = "#"> menu 8 </a> </li>
</Ul>
</Nav>
</Body>
</Html>
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
