栏目问题 如何实现鼠标移到导航栏之后,相应的就在这个栏目下面显示它所对应的子目录? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!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" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-CN" /><title>横向下拉菜单---技术教程网</title><style type="text/css"><!--* {margin:0;padding:0;border:0;}body {font-family: arial, 宋体, serif;font-size:12px;}#nav {height: 24px; list-style-type: none; padding-left:200px;line-height:24px;overflow:hidden;background:#999;}#nav a {display: block; width: 80px; text-align:center;}#nav a:link {color:#EEE; text-decoration:none;}#nav a:visited {color:#EEE;text-decoration:none;}#nav a:hover {color:#FFF;text-decoration:none;font-weight:bold;background:#CCC;}#nav li {float: left; width: 80px;}#nav li ul {line-height: 24px;list-style-type: none;text-align:left;left: -999px;width: 520px; //注意,这里一定要设置宽度;position: absolute;background:#CCC;}#nav li ul li{float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float}#nav li ul a{display: block; width: 65px;text-align:left;padding-left:15px;}#nav li ul a:link {color:#F1F1F1; text-decoration:none;}#nav li ul a:visited {color:#F1F1F1;text-decoration:none;}#nav li ul a:hover {color:#FFF;text-decoration:none;font-weight:normal;background:#C00;}#nav li:hover ul {left:25%;}#nav li.sfhover ul {left:25%;}#content {clear: left;}--></style><script type=text/javascript><!--//--><![CDATA[//><!--function menuFix() {var sfEls = document.getElementById("nav").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {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].onmouseout=function() {this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");}}}window.onload=menuFix;//--><!]]></script></head><body><ul id="nav"><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><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><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><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><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><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></body></html> <!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>用css实现网页下拉菜单</title></head><style type="text/css">body{background-color:white;font-size:12px;font-family:Arial, Helvetica, sans-serif;margin:0px;padding:0px;color:white;}ul,li{margin:0px;padding:0px;}li{display:inline;list-style:none;list-style-position:outside;text-align:center;font-weight:bold;float:left;}a:link{color:#336601;text-decoration:none;float:left;width:100px;padding:3px 5px 0px 5px;}a:visited{color:#336601;text-decoration:none;float:left;padding:3px 5px 0px 5px;width:100px;}a:hover{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none;background-color:#539D26;}a:active{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none;background-color:#BD06B4;}#nav{width:600px;height:30px;border-bottom:0px;padding:0px 5px;position:absolute;z-index:1;left: 198px;top: 25px;}.list{line-height:20px;text-align:left;padding:4px;font-weight:normal;}.menu1{width:120px;height:auto;margin:6px 4px 0px 0px;border:1px solid #9CDD75;background-color:#F1FBEC;color:#336601;padding:6px 0px 0px 0px;cursor:hand;overflow-y:hidden;filter:Alpha(opacity=70);-moz-opacity:0.7;}.menu2{width:120px;height:18px;margin:6px 4px 0px 0px;background-color:#F5F5F5;color:#999999;border:1px solid #EEE8DD;padding:6px 0px 0px 0px;overflow-y:hidden;cursor:hand;}</style><body><div id="nav"><ul><li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Home Page<div class="list"><a href="http://www.webjx.com/">网页教学网</a><br /><a href="#">我的首页</a><br /><a href="#">我的日志</a><br /><a href="#">我的日志</a><br /><a href="#">我的相册</a><br /><a href="#">我的收藏</a><br /></div></li><li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Connection<div class="list"><a href="http://www.webjx.com/">网页教学网</a><br /><a href="#">我的首页</a><br /><a href="#">我的日志</a><br /><a href="#">我的相册</a><br /><a href="#">我的收藏</a><br /></div></li><li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">My Files<div class="list"><a href="http://www.webjx.com/">网页教学网</a><br /><a href="#">我的相册</a><br /><a href="#">我的收藏</a><br /></div></li><li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Management<div class="list"><a href="http://www.webjx.com/">网页教学网</a><br /><a href="#">我的首页</a><br /><a href="#">我的日志</a><br /><a href="#">我的相册</a><br /><a href="#">我的收藏</a><br /><a href="#">我的日志</a><br /><a href="#">我的相册</a><br /><a href="#">我的收藏</a><br /></div></li></ul></div></body></html> 用什么开发聊天室比较好? 安装PHP出现numeric key detected这个错误? 老生常谈,关于数据库乱码 源码安装php后,没有看到php.ini只找到了php.ini.default文件,居然能够正常运行 大家好,问个小事儿? 高人请入!急! 求救!为什么我这里用表单输入的变量php不认??? 为何 图片的文件名中有中文的不能显示? php登录 想散分!! php正则中的变量如何默认为纯字符? PHP上传文件强制转换文件名
<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>横向下拉菜单---技术教程网</title>
<style type="text/css">
<!--
* {margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
height: 24px; list-style-type: none; padding-left:200px;
line-height:24px;overflow:hidden;background:#999;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#EEE; text-decoration:none;
}
#nav a:visited {
color:#EEE;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;background:#CCC;
}
#nav li {
float: left; width: 80px;
}
#nav li ul {
line-height: 24px;
list-style-type: none;
text-align:left;
left: -999px;
width: 520px; //注意,这里一定要设置宽度;
position: absolute;
background:#CCC;
}
#nav li ul li{
float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float
}
#nav li ul a{
display: block; width: 65px;text-align:left;padding-left:15px;
}
#nav li ul a:link {
color:#F1F1F1; text-decoration:none;
}
#nav li ul a:visited {
color:#F1F1F1;text-decoration:none;
}
#nav li ul a:hover {
color:#FFF;text-decoration:none;font-weight:normal;background:#C00;
}
#nav li:hover ul {
left:25%;
}
#nav li.sfhover ul {
left:25%;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
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].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
</head>
<body>
<ul id="nav">
<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>
<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>
<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>
<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>
<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>
<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>
</body>
</html>
<!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>用css实现网页下拉菜单</title>
</head>
<style type="text/css">
body{
background-color:white;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
a:visited{
color:#336601;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
left: 198px;
top: 25px;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}
</style>
<body>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Home Page
<div class="list">
<a href="http://www.webjx.com/">网页教学网</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Connection
<div class="list">
<a href="http://www.webjx.com/">网页教学网</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">My Files
<div class="list">
<a href="http://www.webjx.com/">网页教学网</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Management
<div class="list">
<a href="http://www.webjx.com/">网页教学网</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
</ul>
</div>
</body>
</html>