當前位置:首頁 » 操作系統 » css導航菜單源碼

css導航菜單源碼

發布時間: 2024-09-03 15:54:11

1. css 二級導航橫向菜單的核心代碼是什麼

<style>
*{margin:0px;padding:0px;}
li{list-style:none;width:100px;height:30px;font-size:14px;text-align:left;line-height:30px;border:1pxsolid#000;position:relative;}
.box>li{float:left;position:relative;}
.son{position:absolute;top:30px;left:-1px;}
.grason{position:absolute;top:-1px;left:100px;}
.son,.grason{display:none;}
.active{display:block;background:#FF0;}
</style>
<script>
window.onload=function(){
varaLi=document.getElementsByTagName('li');

for(vari=0;i<aLi.length;i++)
{
aLi[i].onmouseover=function(){
this.className='active';
varoSon=this.getElementsByTagName('ul')[0];
if(oSon)
{
oSon.style.display='block';
}
};
aLi[i].onmouseout=function(){
this.className='';
varoSon=this.getElementsByTagName('ul')[0];
if(oSon)
{
oSon.style.display='none';
}
};
}
};
</script>
</head>
<body>
<ulclass="box">
<li>首頁</li>
<li>公司簡介
<ulclass="son">
<li>大事件</li>
<li>領導致辭
<ulclass="grason">
<li>2013年
<ulclass="grason">
<li>10月份</li>
<li>9月份</li>
<li>8月份</li>
</ul>
</li>
<li>2014年
<ulclass="grason">
<li>10月份</li>
<li>9月份</li>
<li>8月份</li>
</ul>
</li>
</ul>
</li>
<li>企業文化</li>
</ul>
</li>
<li>聯系我們</li>
<li>產品顯示</li>
</ul>
</body>

2. 如何利用純CSS製作二級或多級導航菜單

本人親測下面這些代碼是可以實現二級或多級導航菜單的。

<style>

<!--

* {margin:0px;padding:0px;}

body {overflow:scroll;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;}

a {font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;text-decoration:none;}


.menu {position:relative;width:1000px;background-color:#360;}

.menu ul {list-style-type:none;}

.menu li {float:left;position:relative;}

.menu ul ul {visibility:hidden;position:absolute;left:3px;top:22px;border:1px solid #000;}

.menu table {position:absolute; top:0; left:0;}

.menu ul li:hover ul,

.menu ul a:hover ul{visibility:visible;}

.menu a{display:block;background:#360;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #360;}

.menu a:hover{background:#690;color:#000;}

.menu ul ul,

.menu ul ul li {clear:both;text-align:left;}

.menu ul ul li a{display:block;width:100px;height:15px;}

.menu ul ul li a:hover{background:#690;}

-->

</style>

<body>

<div class="menu">

<ul>

<li><a href="#">一級菜單_01

<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#">二級菜單_01</a></li>

<li><a href="#">二級菜單_02</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

</div>

</body>

熱點內容
網易我的世界官方開伺服器 發布:2025-03-16 08:16:57 瀏覽:42
王者榮耀密碼怎麼改 發布:2025-03-16 08:16:24 瀏覽:571
安卓隱藏的游戲在哪裡 發布:2025-03-16 08:05:31 瀏覽:332
嵌入式伺服器搭建 發布:2025-03-16 07:53:28 瀏覽:684
安卓系統微信登錄設備管理在哪裡 發布:2025-03-16 07:44:55 瀏覽:510
青少兒編程品牌 發布:2025-03-16 07:43:24 瀏覽:633
江西電商存儲設備怎麼樣 發布:2025-03-16 07:32:10 瀏覽:310
中信電話密碼是多少 發布:2025-03-16 07:32:08 瀏覽:373
怎麼樣學好編程 發布:2025-03-16 07:31:24 瀏覽:576
python輸出素數 發布:2025-03-16 07:31:21 瀏覽:431