下拉菜單，二級橫向走動代碼
這網上搜索一段代碼，方便之後學習 並對代碼加以實驗，對與IE6不能實現下代碼的功能，應加以特定的修改
下拉菜單，二級橫向走動代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>生成首頁</title>
<link rel="stylesheet" href="style/css.css" type="text/css"/>
<style type="text/css">
#top_2_2{ margin:5px; padding:0px; z-index:1000 ; height:40px;}
* { font-size:12px;
font-family:Arial, Helvetica, sans-serif,"宋體"；}
ul,li { list-style:none;}
#nav {
height: 25px;
list-style-type: none;
line-height:25px;
overflow:hidden;
color:#1791AE;
font-weight:bold;
}
#nav a {
display: block;
width: 111px;
text-align:center;
}
#nav a:link {
color:skyblue;
text-decoration:none;
}
#nav a:visited {
color:skyblue;
text-decoration:none;
}
#nav a:hover {
color:#FFF;
text-decoration:none;
font-weight:bold;
background:#FF0000;
}
#nav li {
float: left;
width: 80px;
padding-left:30px;
}
#nav li ul {
line-height: 24px;
list-style-type: none;
text-align:left;
left: -999px;
width:650px; /*注意,這裏必定要設置寬度,這是二級菜單的寬度，若是不設置，a:hover 時會消失*/;
position: absolute;
background:skyblue;
}
#nav li ul li{
float: left;
text-align:center;
padding-left:30px;
width: 100px; /*float就是子菜單橫向的關鍵,能夠繼承父菜單而省略float*/
}
#nav li ul a{
display: block;
width: 65px;
text-align:center;
padding-left:30px;
}
#nav li ul a:link {
color:#F1F1F1;
text-decoration:none;
font-weight:bold;
padding-left:30px;
}
#nav li ul a:visited {
color:#F1F1F1;
text-decoration:none;
padding-left:30px;
}
#nav li ul a:hover {
color:#FFF;
text-decoration:none;
font-weight:bold;
text-align:center;
padding-left:30px;
}
#nav li:hover ul {
left:10%;/*設定二級菜單的位置*/
}
#nav li.sfhover ul {
left:10%;
}
#content {
clear: left;}
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i]. {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i]. {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
下拉菜單，二級橫向走動代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>生成首頁</title>
<link rel="stylesheet" href="style/css.css" type="text/css"/>
<style type="text/css">
#top_2_2{ margin:5px; padding:0px; z-index:1000 ; height:40px;}
* { font-size:12px;
font-family:Arial, Helvetica, sans-serif,"宋體"；}
ul,li { list-style:none;}
#nav {
height: 25px;
list-style-type: none;
line-height:25px;
overflow:hidden;
color:#1791AE;
font-weight:bold;
}
#nav a {
display: block;
width: 111px;
text-align:center;
}
#nav a:link {
color:skyblue;
text-decoration:none;
}
#nav a:visited {
color:skyblue;
text-decoration:none;
}
#nav a:hover {
color:#FFF;
text-decoration:none;
font-weight:bold;
background:#FF0000;
}
#nav li {
float: left;
width: 80px;
padding-left:30px;
}
#nav li ul {
line-height: 24px;
list-style-type: none;
text-align:left;
left: -999px;
width:650px; /*注意,這裏必定要設置寬度,這是二級菜單的寬度，若是不設置，a:hover 時會消失*/;
position: absolute;
background:skyblue;
}
#nav li ul li{
float: left;
text-align:center;
padding-left:30px;
width: 100px; /*float就是子菜單橫向的關鍵,能夠繼承父菜單而省略float*/
}
#nav li ul a{
display: block;
width: 65px;
text-align:center;
padding-left:30px;
}
#nav li ul a:link {
color:#F1F1F1;
text-decoration:none;
font-weight:bold;
padding-left:30px;
}
#nav li ul a:visited {
color:#F1F1F1;
text-decoration:none;
padding-left:30px;
}
#nav li ul a:hover {
color:#FFF;
text-decoration:none;
font-weight:bold;
text-align:center;
padding-left:30px;
}
#nav li:hover ul {
left:10%;/*設定二級菜單的位置*/
}
#nav li.sfhover ul {
left:10%;
}
#content {
clear: left;}
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i]. {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i]. {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
</style>
<div id="top_2_2"> <ul id="nav"> <li><a href="#">生成首頁</a></li> <li><a href="/sort/list_1_1.shtml">關於生成</a> <ul> <li><a href="/sort/list_1_11_1.shtml">咱們簡介</a></li> <li><a href="/sort/list_1_12_1.shtml">品牌中心</a></li> <li><a href="/sort/list_1_13_1.shtml">企業文化</a></li> </ul> </li> <li><a href="/sort/list_2_1.shtml">產品服務</a> <ul> <li><a href="#">寵物</a></li> <li><a href="#">我的護理</a></li> <li><a href="#">家庭園林</a></li> <li><a href="#">其餘</a></li> </ul> </li> <li><a href="/sort/list_5_1.shtml">新聞事件</a></li> <li><a href="/sort/list_7_1.shtml">人力資源</a></li> <li><a href="/sort/list_8_1.shtml">聯繫生成</a> <ul> <li> </li> <li> </li> <li><a href="/sort/list_8_163_1.shtml">聯繫生成</a></li> <li><a href="/sort/list_8_161_1.shtml">分公司</a></li> </ul> </li> </ul> </div>
相關文章
- 1. js練習7(橫向下拉菜單)
- 2. 動畫導航菜單,下拉菜單,多級下拉菜單
- 3. Excel 二級下拉菜單
- 4. js二級下拉菜單
- 5. php之二級聯動下拉菜單
- 6. Android-----------橫向滑動菜單
- 7. html+css3實現二級下拉菜單
- 8. js導航二級下拉菜單
- 9. jquery之二級下拉菜單
- 10. 下拉菜單，多級菜單
- 更多相關文章...
- • ionic 上拉菜單(ActionSheet) - ionic 教程
- • Markdown 代碼 - Markdown 教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA安裝代碼格式化插件
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js練習7(橫向下拉菜單)
- 2. 動畫導航菜單,下拉菜單,多級下拉菜單
- 3. Excel 二級下拉菜單
- 4. js二級下拉菜單
- 5. php之二級聯動下拉菜單
- 6. Android-----------橫向滑動菜單
- 7. html+css3實現二級下拉菜單
- 8. js導航二級下拉菜單
- 9. jquery之二級下拉菜單
- 10. 下拉菜單，多級菜單