二级菜单不同方法的实现

之前面试的时候被问到过一次，后来，在笔试的时候又遇到了，为了长点记性，就决定把这个好好写写。

第一种：

第一种是采用css来控制的；主要采用float，和position,display，hover来完成的。具体看以参看后面的源代码。

第二种：

主要采用hover,和display来实现的。

第三种：

采用的是js来控制的，mouseover，mouseout来控制显示的。当然也利用了css.

第四种：

这种也是纯css的形式，主要利用display:inline-block;和vertical-align:top;来实现的。如果不用vertical-align的话，就会导致一级菜单被二级菜单顶起来，使得上面无法对其，因此才需要设置。

每一种对应的源码如下：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>横排二级下拉菜单</title><style type="text/css">*{margin: 0;padding: 0;list-style: none;text-decoration: none;color: #333;
}
.nav{width: 400px;height: 150px;background: Gray;margin: 10px;overflow: hidden;
}
.nav   ul li{float :left;width: 100px;clear: right;
}
.nav ul li a:hover{color:red;
}
.nav ul li ul { display:none;
}
.nav ul li:hover ul{ display:block; position: absolute;
}
.nav ul li:hover ul li{ float:none;/**/
}/********************************************************/
.nav2{width: 400px;height: 200px;background: Gray;margin: 10px;
}
.nav2  ul li{width: 100px;
}
.nav2 ul li li{margin-left:20px;
}
.nav2 a:hover{color: red;
}
.nav2 ul li ul {display: none;
}
.nav2 ul li:hover ul {display: block;
}/********************************************************/.nav3{width: 400px;height: 150px;background: Gray;margin: 10px;
}
.nav3  ul li{width: 100px;float: left;
}
.nav3 ul li ul{display: none;position: absolute;
}
.nav3 ul li ul li{float: none;
}
.nav3 ul li a:hover{color:red;
}
/********************************************************/
.nav4{width: 400px;height: 200px;
}
.nav4 ul li{width:100px;display: inline-block;vertical-align: top;
}
.nav4 ul ul{display: none;
}
.nav4 ul li:hover ul{display: block;
}
.nav4 ul li a:hover{color:red;
}
</style>
</head>
<body>
<!--*****************111111111111111111111111111111111111***************/-->
<div class="nav"><ul><li><a href="#">栏目一</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="#">栏目二</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="#">栏目三</a><ul><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目</a></li></ul></li></ul>
</div>
<!--*****************22222222222222222222222222222222222***************/-->
<hr>
<div class="nav2"><ul><li><a href="#">栏目一</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="#">栏目二</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="#">栏目三</a><ul><li><a href="#">二级栏目1</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目3</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目</a></li></ul></li></ul>
</div>
<!--*****************333333333333333333333333333333333333***************/-->
<hr>
<div class="nav3"><ul><li class="row"><a href="#">栏目一</a><ul><li><a href="#">二级栏目1</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目3</a></li><li><a href="#">二级栏目</a></li></ul></li><li class="row"><a href="#">栏目二</a><ul><li><a href="#">二级栏目1</a></li><li><a href="#">二级栏目2</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目</a></li></ul></li><li class="row"><a href="#">栏目三</a><ul><li><a href="#">二级栏目1</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目3</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目</a></li></ul></li></ul>
</div>
<!--*****************44444444444444444444444444444444***************/-->
<hr>
<div class="nav4"><ul><li><a href="#">栏目一</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="#">栏目二</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="#">栏目三</a><ul><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目</a></li><li><a href="#">二级栏目</a></li></ul></li></ul>
</div>
<script>var row=document.getElementsByClassName("row");var length=row.length;for(var i=0;i<length;i++){row[i].onmouseover=function(i){var that=row[i];return function(i){child=that.childNodes;child[2].style.display="block";}}(i);row[i].onmouseout=function(i){var that=row[i];return function(i){child=that.childNodes;child[2].style.display="none";}}(i);}console.log(row);
</script>
</body>
</html>

二级菜单不同方法的实现相关推荐

[j2me]类似于OperaMini二级菜单界面演练[1]
拜朋友所赐,今日开始尝试如何绘制类似于Opera Mini的二级菜单,如下图所示: 我自己的练习,还很幼稚,姑且记录如下: 点击左软键,即可选中界面左下角的"选择"命令,二级菜 ...
php微信级联菜单,php微信公众号开发之二级菜单
本文实例为大家分享了php微信公众号二级菜单的具体代码,供大家参考,具体内容如下核心代码: $postObj = simplexml_load_string($postStr, 'SimpleXML ...
html二级菜单的自动宽度,如何使用CSS控制二级导航菜单宽度？_html/css_WEB-ITnose
New Document 首页新闻国际新闻国内新闻体育新闻财经股票市场证券行情基金保险联系我们回复讨论(解决方案) .menu li ul a{ display:block; font ...
python制作二级菜单_python实现二级登陆菜单及安装过程
python实现二级登陆菜单的代码如下所示: """ 1.三级菜单注册登陆注销 2.进入每一个一级菜单,都会有下一级的菜单 """ u ...
jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果
html: <div class="col-sm-3 col-md-2 sidebar"><div class="totalt">< ...
dedecms二级菜单中判断子菜单标签的方法
这篇文章将为大家详细讲解有关dedecms二级菜单中判断子菜单标签的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获. 虚拟接口是用户本地数据中心通过海外专线访问V ...
document操作例题1-延迟注册与二级菜单
一.倒计时10秒后可以注册 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http ...
关于expanded一级二级菜单数据的分组排序
最新再弄关于expandedlistview相关的东西,所以需求是需要对一级菜单根据时间排序,同时二级菜单也需要根据时间排序,距离现在最近的时间显示在最前面. 效果就是如下: --group2 -- ...
二级菜单--竖排---HTML
二级菜单–竖排这是作为回顾之前学习的东西大家也可以康康作为一种回顾二级菜单 -竖排不足的地方请大家指出来代码照常都有详细解释效果图 <!DOCTYPE html> < ...