向右方向的二级菜单
制作二级菜单 ......</div>
<div class="content">
<pre class="brush: css;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作二级菜单</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 1.5;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #ccc;
width: 100px;
}
#menu ul li {
background-color: #eee;
height: 26px;
line-height: 26px;
border-bottom: 1px solid #ccc;
}
#menu ul li a {
color: #000;
text-decoration: none;
}
#menu ul li a:hover {
color: #ff0000;
}
#menu ul li ul {
display: none;
position: absolute;
left: 100px;
top: 0px;
}
#menu ul li.current ul {
display: block;
}
</style>
<script type="text/javascript">
startList = function () {
navRoot = document.getElementById("menu");
var allli = navRoot.getElementsByTagName("li");
for (i = 0; i < allli.length; i++) {
node = allli[i];
node.onmouseover = function () {
this.className += "current";
}
node.onmouseout = function () {
this.className = this.className.replace("current", "");
}
}
}
window.onload = startList;
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">PS</a>
<ul>
<li class="current"><a href="#">二级菜单列表1</a></li>
<li class="current"><a href="#">二级菜单列表2</a></li>
</ul>
</li>
<li><a href="#">Jave</a>
<ul>
<li class="current"><a href="#">二级菜单列表5</a></li>
<li class="current"><a href="#">二级菜单列表6</a></li>
<li class="current"><a href="#">二级菜单列表7</a></li>
<li class="current"><a href="#">二级菜单列表8</a></li>
<li class="current"><a href="#">二级菜单列表8</a></li>
</ul>
</li>
<li><a href="#">php</a>
<ul>
<li class="current"><a href="#">二级菜单列表9</a></li>
<li class="current"><a href="#">二级菜单列表10</a></li>
<li class="current"><a href="#">二级菜单列表11</a></li>
<li class="current"><a href="#">二级菜单列表12</a></li>
</ul>
</li>
<li><a href="#">.net</a>
<ul>
<li class="current"><a href="#">二级菜单列表13</a></li>
<li class="current"><a href="#">二级菜单列表14</a></li>
<li class="current"><a href="#">二级菜单列表15</a></li>
<li class="current"><a href="#">二级菜单列表16</a></li>
<li class="current"><a href="#">二级菜单列表15</a></li>
<li class="current"><a href="#">二级菜单列表16</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
</pre> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/767560.html">
C# SqlBulkCopy数据批量入库 </a>
</p>
<p>
下一篇： <a href="/article/767562.html">
PHP常用工具类大全附全部代码下载 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2280857.html" target="_blank" title="iOS的客户端菜单功能仿百度糯米/美团二级菜单">
<h2>
iOS的客户端菜单功能仿百度糯米/美团二级菜单 </h2>
</a>
</li>
<li>
<a href="/article/2279807.html" target="_blank" title="iOS实现简单的二级菜单效果">
<h2>
iOS实现简单的二级菜单效果 </h2>
</a>
</li>
<li>
<a href="/article/2278831.html" target="_blank" title="iOS中的二级菜单及Cell的展开收起示例">
<h2>
iOS中的二级菜单及Cell的展开收起示例 </h2>
</a>
</li>
<li>
<a href="/article/2253195.html" target="_blank" title="Android编程实现二级下拉菜单及快速搜索的方法">
<h2>
Android编程实现二级下拉菜单及快速搜索的方法 </h2>
</a>
</li>
<li>
<a href="/article/2247078.html" target="_blank" title="CSS3 二级导航菜单的制作的示例">
<h2>
CSS3 二级导航菜单的制作的示例 </h2>
</a>
</li>
<li>
<a href="/article/2214029.html" target="_blank" title="Android编程实现二级下拉菜单及快速搜索的方法">
<h2>
Android编程实现二级下拉菜单及快速搜索的方法 </h2>
</a>
</li>
<li>
<a href="/article/2198311.html" target="_blank" title="CSS3 二级导航菜单的制作的示例">
<h2>
CSS3 二级导航菜单的制作的示例 </h2>
</a>
</li>
<li>
<a href="/article/2171788.html" target="_blank" title="vue二级菜单导航点击选中事件的方法">
<h2>
vue二级菜单导航点击选中事件的方法 </h2>
</a>
</li>
<li>
<a href="/article/2154790.html" target="_blank" title="Vue iview-admin框架二级菜单改为三级菜单的方法">
<h2>
Vue iview-admin框架二级菜单改为三级菜单的方法 </h2>
</a>
</li>
<li>
<a href="/article/2077205.html" target="_blank" title="Excel表格中在一级菜单的基础上如何制作二级下拉菜单">
<h2>
Excel表格中在一级菜单的基础上如何制作二级下拉菜单 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>