css3如何實現下拉菜單效果

本文小編為大家詳細介紹“css3如何實現下拉菜單效果”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css3如何實現下拉菜單效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

首先來看核心的HTML片斷代碼：

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Language</a>
<ul>
<li><a href="#">Java</a></li>
<li><a href="<a href="https://www.xieniao.com/wintersun">CSharp</a></li">https://www.xieniao.com/wintersun">CSharp</a></li</a>>
<li><a href="#">Script</a>
<ul>
<li><a href="#">Ruby</a></li>
<li><a href="#">Python</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="<a href="https://www.xieniao.com/wintersun">.net</a></li">https://www.xieniao.com/wintersun">.net</a></li</a>>
<li><a href="<a href="https://www.xieniao.com/wintersun">Database</a></li">https://www.xieniao.com/wintersun">Database</a></li</a>>
<li><a href="<a href="https://www.xieniao.com/wintersun">WebDev</a></li">https://www.xieniao.com/wintersun">WebDev</a></li</a>>
</ul>
</li>
<li><a href="<a href="http://wintersun.jb51.net">About</a></li">http://wintersun.jb51.net">About</a></li</a>>
</ul>
</nav>

接下來定義樣式,使用CSS選擇器我們可以特異性和先進目標單個元素深埋的HTML結構,而不需要額外的id或類。第一個隱藏子菜單通過瞄準任何UL的在一個UL和 display:block;為了使這些菜單再現他們需要兌換成塊元素在懸停的李。這個 >子選擇符確保只有孩子UL的李在目標上空盤旋,而不是所有的子菜單出現在一次。然后使用CSS3屬性如梯度,盒陰影和邊界半徑。

<style type="text/css">
body 
{
 background: #efefef;
font-family:Verdana;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}</p>
<p>nav ul
{
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after
{
content: "";
clear: both;
display: block;
}</p>
<p>nav ul li
{
float: left;
}
nav ul li:hover
{
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a
{
color: #fff;
}
nav ul li a
{
display: block;
padding: 5px 40px;
color: #757575;
text-decoration: none;
}</p>
<p>nav ul ul
{
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li
{
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a
{
padding: 5px 40px;
color: #fff;
}
nav ul ul li a:hover
{
background: #4b545f;
}
nav ul ul ul
{
position: absolute;
left: 100%;
top: 0;
}
</style>

讀到這里，這篇“css3如何實現下拉菜單效果”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。