向右方向的二级菜单
制作二级菜单 ......</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/2393093.html">
虚拟机安装 RHEL后，中文显示乱码的解决方法 </a>
</p>
<p>
下一篇： <a href="/article/2393095.html">
MySQL 字符集utf8和utf-8的关系 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2393094.html" target="_blank" title="向右方向的二级菜单">
<h2>
向右方向的二级菜单 </h2>
</a>
</li>
<li>
<a href="/article/2363690.html" target="_blank" title="jQuery实现有动画淡出效果的二级折叠菜单代码_jquery">
<h2>
jQuery实现有动画淡出效果的二级折叠菜单代码_jquery </h2>
</a>
</li>
<li>
<a href="/article/2348337.html" target="_blank" title="实现列表无限加载与二级下拉菜单选项的Ajax（附代码）">
<h2>
实现列表无限加载与二级下拉菜单选项的Ajax（附代码） </h2>
</a>
</li>
<li>
<a href="/article/2327523.html" target="_blank" title="php+mysql实现的二级联动菜单效果详解">
<h2>
php+mysql实现的二级联动菜单效果详解 </h2>
</a>
</li>
<li>
<a href="/article/2294344.html" target="_blank" title="一级菜单控制二级菜单的变化">
<h2>
一级菜单控制二级菜单的变化 </h2>
</a>
</li>
<li>
<a href="/article/2288170.html" target="_blank" title="iOS的客户端菜单功能仿百度糯米/美团二级菜单">
<h2>
iOS的客户端菜单功能仿百度糯米/美团二级菜单 </h2>
</a>
</li>
<li>
<a href="/article/2287554.html" target="_blank" title="iOS中的二级菜单及Cell的展开收起示例">
<h2>
iOS中的二级菜单及Cell的展开收起示例 </h2>
</a>
</li>
<li>
<a href="/article/2287346.html" target="_blank" title="php+mysql实现的二级联动菜单效果详解">
<h2>
php+mysql实现的二级联动菜单效果详解 </h2>
</a>
</li>
<li>
<a href="/article/2286933.html" target="_blank" title="iOS实现简单的二级菜单效果">
<h2>
iOS实现简单的二级菜单效果 </h2>
</a>
</li>
<li>
<a href="/article/2280857.html" target="_blank" title="iOS的客户端菜单功能仿百度糯米/美团二级菜单">
<h2>
iOS的客户端菜单功能仿百度糯米/美团二级菜单 </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>