純CSS(無JS)實現(xiàn)的二級彈出菜單效果代碼
發(fā)布時間：2015-09-10 14:44:58 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了純CSS(無JS)實現(xiàn)的二級彈出菜單效果代碼,基于純css控制鼠標hover樣式實現(xiàn)二級彈出菜單的效果,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了純CSS(無JS)實現(xiàn)的二級彈出菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款采用純CSS(無JS)制作的二級彈出菜單，你會發(fā)現(xiàn)這款菜單并沒有使用JavaScript代碼，也沒有引用外部文件，但是它卻產(chǎn)生了類似JS菜單一樣的效果。呵呵，這是用純CSS代碼實現(xiàn)的，不相信的話自己看代碼吧。
運行效果如下圖所示：
在線演示地址如下：
http://demo.jb51.net/js/2015/css-2lelvel-alert-menu-style-codes/
具體代碼如下：
復制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二級彈出菜</title>
<style type="text/css">
*{ margin:0; padding:0;}
.menu { display:block; font-family: arial, sans-serif; width:940px; position:relative; height:auto; background: #06F;}
.menu ul { padding:0; margin:0; list-style-type: none;}
.menu ul li { float:left; width:102px; background: #03F;}
.menu ul li.end { height:35px; float:right; width:10px; background: #03F;}
.menu ul li a,
.menu ul li a:visited {display:block; text-align:center; text-decoration:none; width:104px; height:35px; color:#fff; line-height:34px; font-size:14px;background: #03F;}
.menu ul li.first a,
.menu ul li.first a:visited {display:block; text-align:center; text-decoration:none; width:110px; height:35px; color:#fff; line-height:34px; font-size:14px;background: #03F;}
.menu ul li ul {display: none;}
.menu ul li:hover a {color:#000; background: #03F; }
.menu ul li:hover.first a {color:#000; background: #03F; }
.menu ul li:hover ul {display:block; position:absolute;left:0;top:35px; width:805px;}
.menu ul li:hover ul li a { float:left;display:block; background:#faeec7; color:#000;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li class="first"><a href="#">首頁</a></li>
<li><a class="hide" href="#">關于我們</a>
<ul>
<li><a href="#">二級菜單內(nèi)容</a></li>
<li><a href="#">二級菜單內(nèi)容</a></li>
<li><a href="#">二級菜單內(nèi)容</a></li>
<li><a href="#">二級菜單內(nèi)容</a></li>
<li><a href="#">二級菜單內(nèi)容</a></li>
</ul>
</li>
<li><a class="hide" href="#">產(chǎn)品展示</a>
<ul class="right_side">
<li><a href="#">三級菜單內(nèi)容</a></li>
<li><a href="#">三級菜單內(nèi)容</a></li>
<li><a href="#">三級菜單內(nèi)容</a></li>
</ul>
</li>
<li><a class="hide" href="#">聯(lián)系你們</a>
<ul>
<li><a href="#">四級菜單內(nèi)容</a></li>
<li><a href="#">四級菜單內(nèi)容</a></li>
<li><a href="#">四級菜單內(nèi)容</a></li>
<li><a href="#">四級菜單內(nèi)容</a></li>
<li><a href="#">四級菜單內(nèi)容</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二級彈出菜</title>
<style type="text/css">
*{ margin:0; padding:0;}
.menu { display:block; font-family: arial, sans-serif; width:940px; position:relative; height:auto; background: #06F;}
.menu ul { padding:0; margin:0; list-style-type: none;}
.menu ul li { float:left; width:102px; background: #03F;}
.menu ul li.end { height:35px; float:right; width:10px; background: #03F;}
.menu ul li a,
.menu ul li a:visited {display:block; text-align:center; text-decoration:none; width:104px; height:35px; color:#fff; line-height:34px; font-size:14px;background: #03F;}
.menu ul li.first a,
.menu ul li.first a:visited {display:block; text-align:center; text-decoration:none; width:110px; height:35px; color:#fff; line-height:34px; font-size:14px;background: #03F;}
.menu ul li ul {display: none;}
.menu ul li:hover a {color:#000; background: #03F; }
.menu ul li:hover.first a {color:#000; background: #03F; }
.menu ul li:hover ul {display:block; position:absolute;left:0;top:35px; width:805px;}
.menu ul li:hover ul li a { float:left;display:block; background:#faeec7; color:#000;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li class="first"><a href="#">首頁</a></li>
<li><a class="hide" href="#">關于我們</a>
<ul>
<li><a href="#">二級菜單內(nèi)容</a></li>
<li><a href="#">二級菜單內(nèi)容</a></li>
<li><a href="#">二級菜單內(nèi)容</a></li>
<li><a href="#">二級菜單內(nèi)容</a></li>
<li><a href="#">二級菜單內(nèi)容</a></li>
</ul>
</li>
<li><a class="hide" href="#">產(chǎn)品展示</a>
<ul class="right_side">
<li><a href="#">三級菜單內(nèi)容</a></li>
<li><a href="#">三級菜單內(nèi)容</a></li>
<li><a href="#">三級菜單內(nèi)容</a></li>
</ul>
</li>
<li><a class="hide" href="#">聯(lián)系你們</a>
<ul>
<li><a href="#">四級菜單內(nèi)容</a></li>
<li><a href="#">四級菜單內(nèi)容</a></li>
<li><a href="#">四級菜單內(nèi)容</a></li>
<li><a href="#">四級菜單內(nèi)容</a></li>
<li><a href="#">四級菜單內(nèi)容</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
希望本文所述對大家的div+css程序設計有所幫助。
相關文章
- 這篇文章主要為大家介紹了純CSS實現(xiàn)的菱形導航菜單效果代碼,采用純css實現(xiàn)菱形效果的導航菜單效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-10
- 這篇文章主要為大家介紹了純CSS實現(xiàn)多級半透明效果菜單代碼,通過純css實現(xiàn)多級菜單效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-01
- 這篇文章主要為大家介紹了CSS3實現(xiàn)銀灰色動畫效果的導航菜單代碼,采用純css3技術實現(xiàn)的導航效果,鼠標滑過有背景變換的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-01
- 這篇文章主要為大家介紹了css3實現(xiàn)的多級漸變下拉菜單導航效果代碼,通過純css3技術實現(xiàn)圓角圖形及漸變按鈕的模擬效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-31
- 這篇文章主要為大家介紹了CSS3實現(xiàn)可關閉的下拉手風琴菜單效果,采用純css3技術實現(xiàn)了手風琴折疊與展開效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-31
- 這篇文章主要為大家介紹了純CSS實現(xiàn)酷黑風格三級下拉菜單效果代碼,通過css的hover屬性控制鼠標滑過效果,非常美觀大方,需要的朋友可以參考下2015-08-27
純CSS3實現(xiàn)飄逸灑脫帶有飛行效果的三級下拉菜單
這篇文章主要為大家介紹了純CSS3實現(xiàn)飄逸灑脫帶有飛行效果的三級下拉菜單,鼠標滑過可見對應菜單項列表漸進層疊彈出的效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-27div+css實現(xiàn)藍色vista風格css導航菜單效果
這篇文章主要為大家介紹了div+css實現(xiàn)藍色vista風格css導航菜單效果,是一款非常美觀大方的藍色導航菜單效果,鼠標滑過可顯示對應的背景圖片,需要的朋友可以參考下2015-08-26div+css實現(xiàn)仿淘寶的產(chǎn)品分類菜單效果代碼
這篇文章主要為大家介紹了div+css實現(xiàn)仿淘寶的產(chǎn)品分類菜單效果代碼,通過div+css實現(xiàn)仿淘寶布局效果的功能,非常簡單實用,需要的朋友可以參考下2015-08-26