css 實現(xiàn)動態(tài)二級菜單
發(fā)布時間：2020-06-30 14:23:34 作者：西門-吹發(fā) 
我要評論
我要評論這篇文章主要介紹了css 實現(xiàn)動態(tài)二級菜單效果，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
動態(tài)實現(xiàn)簡單的二級菜單
當(dāng)鼠標(biāo)放到一級標(biāo)簽上時，鼠標(biāo)會變成小手的形狀 展示二級菜單，源碼如下，復(fù)制即可直接使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {margin: 0; padding: 0;}
ul { list-style: none;}
div {
width: 100%;
height: 50px;
background-color: #ccc;
}
.first {
width: 100px;
height: 50px;
float: left;
margin-right: 70px;
/* background-color: pink; */
cursor: pointer;
text-align: center;
line-height: 50px;
border-radius: 15px;
}
.second li{
width: 80px;
height: 50px;
background-color: blue;
border-radius: 50%;
margin-top: 10px;
}
.second {
display: none;
}
.first:hover .second{
display: block;
cursor: pointer;
}
.first:hover {
background-color: pink;
}
</style>
<body>
<div>
<ul>
<li class="first">
<p>一級標(biāo)簽</p>
<ul class="second">
<li>二級標(biāo)簽</li>
<li>二級標(biāo)簽</li>
</ul>
</li>
<li class="first">
<p>一級標(biāo)簽</p>
<ul class="second">
<li>二級標(biāo)簽</li>
<li>二級標(biāo)簽</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
總結(jié)
到此這篇關(guān)于css 實現(xiàn)動態(tài)二級菜單的文章就介紹到這了,更多相關(guān)css 動態(tài)二級菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
使用HTML+CSS實現(xiàn)鼠標(biāo)劃過的二級菜單欄的示例
本篇文章主要介紹了使用HTML+CSS實現(xiàn)鼠標(biāo)劃過的二級菜單欄的示例，非常具有實用價值，需要的朋友可以參考下2017-09-14純CSS實現(xiàn)鼠標(biāo)滑過顯示子菜單的二級菜單效果
這篇文章主要為大家介紹了純CSS實現(xiàn)鼠標(biāo)滑過顯示子菜單的二級菜單效果,通過簡單的css針對hover設(shè)置實現(xiàn)鼠標(biāo)滑過顯示二級菜單的功能,具有一定參考借鑒價值,需要的朋友可以參2015-09-14HTML+CSS+JavaScript通過嵌套u(yù)l li實現(xiàn)簡單的二級菜單
通過嵌套的ul li 實現(xiàn)簡單的二級菜單兼容IE6-9,谷歌火狐等主流瀏覽器，示例代碼如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-07
css實現(xiàn)圓角下拉菜單,可以自定義個數(shù),兼容主流瀏覽器. "廣州網(wǎng)聚信息傳播有限公司"提供2010-06-07- 這個菜單效果挺好，使用了jQuery+CSS配合實現(xiàn)，完美兼容多種瀏覽器，鼠標(biāo)滑過主菜單，分顯示出對應(yīng)的二級菜單，橫排布局，莊重藍(lán)色風(fēng)格，適合大部分網(wǎng)站做主導(dǎo)航菜單。當(dāng)2009-08-04
