div+css竖二级菜单，展开减号，不展开加号的代码
作者&投稿：昌仇 （若有异议请与网页底部的电邮联系）
前几天用非常规方法实现了一个山寨版树形菜单。。。如下。。。
function display(jia,zi) {
if(document.getElementById(jia).innerHTML== '+'){
document.getElementById(zi).style.display="";
document.getElementById(jia).innerHTML= '-';
return;
}
if(document.getElementById(jia).innerHTML== '-'){
document.getElementById(zi).style.display= 'none';
document.getElementById(jia).innerHTML= '+';
return;
}
}
function exit(){
//window.location.href='../ht.jsp';
//alert('您已安全退出');
}
.juli{margin-top:20px; border:none; }
.neijuli{
padding-top:8px;
line-height:1.5em;
font-size:23px;
}
.fuhao { border:1px solid white;
color:#FFFFFF;
}
body {
background-color: #7A99E0;
font-size:25px;
}
.txtc{color:#FFFFFF}
.smalltxt{font-size:17px}
a{text-decoration:none;}
系统后台管理面板
[安全退出] [返回首页]
+
商品管理
添加商品
管理商品
+
新闻管理
添加新闻
管理新闻
+
系统管理
关闭系统
XXX
这要用js的。
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{margin:0;padding:0;list-style-type:none;}
a{ text-decoration:none;}
.mold_open_hover,.mold_open{background-image:url(../image/open.png);background-repeat:none;display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;}
.mold_open{background-position:0 -6px;}
.mold_open_hover{background-position:0 0;}
.mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;}
h1{margin-left:100px;}
.menu-cont-list a:hover{text-decoration:underline;}
.mod-menu .menu-item{width:220px;border-top:solid 1px #d59bb2;border-bottom:solid 2px #d59bb2;position:relative;z-index:22;}
.mod-menu .menu-item li{height:47px;line-height:47px;background:#feebf3;border-top:solid 1px #f0bfd3;}
.mod-menu .menu-item li.mouse-bg{background:url(../image/mouse-menu-bg.jpg) no-repeat #fff;position:relative;z-index:22;margin-right:-4px;}
.mod-menu .menu-item a{color:#c81d61;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;}
.mod-menu .menu-item a:hover{ text-decoration:none;}
.mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:solid 1px #F0BFD3;box-shadow:2px 0 10px rgba(210,33,103,0.25);z-index:20;}
.mod-menu .menu-cont-list{padding:0 30px;}
.mod-menu .menu-cont-list li{border-bottom:dotted 1px #f0bfd3;padding:10px 0;}
.mod-menu .menu-cont-list li:last-child{border-bottom:none;}
.mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;}
.mod-menu .menu-cont-list h3 a{color:#222;}
.mod-menu .menu-list-link a{color:#666;line-height:24px;}
.mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var mod_menu=$(".mod-menu");//导航模块区
var menu=function(){
var menuItem=$(".menu-item li");//选择导航列表
menuItem.each(function(){
var _index=$(this).index();//获取当前选择菜单列表的索引
$(this).mouseenter(function(){
var y = $(this).position().top+1;//获取当前鼠标滑过的列表的顶部坐标
$(".menu-cont").show();
$(".menu-cont").css("top",y);//需要显示的对应索引内容
$(this).addClass("mouse-bg").siblings().removeClass("mouse-bg");
$(".menu-cont>div").eq(_index).show().siblings().hide();
});
});/*导航菜单菜单*/
$(".mod-menu").mouseleave(function(){
$(".menu-cont").hide();
menuItem.removeClass("mouse-bg");
})
}//展开二级菜单
menu();//执行展开二级菜单函
});
</script>
</head>
<body>
<h1>简单的2级菜单导航</h1>
<div class="mod-menu f-l">
<div id="column-left">
<ul class="menu-item">
<li class=""><a href="trade-wedding.html">Wedding</a></li>
<li class=""><a href="trade-occasion-dresses.html">Occasion Dresses</a></li>
<li class=""><a href="trade-women-s-clothing.html">Women's Clothing</a></li>
<li class=""><a href="trade-women-s-shoes.html">Women's Shoes</a></li>
<li class=""><a href="trade-accessories.html">Accessories</a></li>
<li class=""><a href="trade-beauty-health.html">Beauty & Health</a></li>
</ul><!--一级菜单列表-->
<div class="menu-cont hide" style="display: none; top: 241px;">
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="wedding-dresses-c1_2.html">Wedding Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="bridesmaid-dresses-c1_3.html">Bridesmaid Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="wedding-party-dresses-c1_4.html">Wedding Party Dresses</a></h3>
<div class="menu-list-link">
<a title="" href="mother-of-the-brides-dresses-c1_4_36.html">Mother of the Brides Dresses</a>
<span class="long-string">|</span>
<a title="" href="flower-girl-dresses-c1_4_37.html">Flower Girl Dresses</a>
<span class="long-string">|</span>
<a title="" href="wedding-guest-dresses-c1_4_38.html">Wedding Guest Dresses</a>
</div>
</li>
<li>
<h3><a href="wedding-accessories-c1_6.html">Wedding Accessories</a></h3>
<div class="menu-list-link">
<a title="" href="fabric-swatch-c1_6_100.html">Fabric Swatch</a>
<span class="long-string">|</span>
<a title="" href="bridal-lingerie-c1_6_101.html">Bridal Lingerie</a>
<span class="long-string">|</span>
<a title="" href="wedding-veils-c1_6_48.html">Wedding Veils</a>
<span class="long-string">|</span>
<a title="" href="wedding-gloves-c1_6_51.html">Wedding Gloves</a>
<span class="long-string">|</span>
<a title="" href="wedding-shawls-c1_6_47.html">Wedding Shawls</a>
<span class="long-string">|</span>
<a title="" href="wedding-flowers-c1_6_52.html">Wedding Flowers</a>
<span class="long-string">|</span>
<a title="" href="wedding-petticoats-c1_6_120.html">Wedding Petticoats</a>
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="prom-dresses-c103_39.html">Prom Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="military-ball-dresses-c103_118.html">Military Ball Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="evening-dresses-c103_40.html">Evening Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="cocktail-dresses-c103_41.html">Cocktail Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="ball-gowns-c103_43.html">Ball Gowns</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="homecoming-dresses-c103_44.html">Homecoming Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="little-black-dresses-c103_45.html">Little Black Dresses </a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="quinceanera-dresses-c103_46.html">Quinceanera Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="dresses-c7_8.html">Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="clubwear-c7_9.html">Clubwear</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="leggings-c7_12.html">Leggings</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="lingeries-c7_13.html">Lingeries</a></h3>
<div class="menu-list-link">
<a title="" href="bras-c7_13_54.html">Bras</a>
<span class="long-string">|</span>
<a title="" href="babydolls-c7_13_56.html">Babydolls</a>
<span class="long-string">|</span>
<a title="" href="teddies-c7_13_57.html">Teddies</a>
<span class="long-string">|</span>
<a title="" href="panties-c7_13_58.html">Panties</a>
<span class="long-string">|</span>
<a title="" href="hosiery-c7_13_59.html">Hosiery</a>
</div>
</li>
<li>
<h3><a href="bustiers-corsets-c7_102.html">Bustiers & Corsets</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="costumes-c7_53.html">Costumes</a></h3>
<div class="menu-list-link">
<a title="" href="sexy-costumes-c7_53_110.html">Sexy Costumes</a>
<span class="long-string">|</span>
<a title="" href="christmas-costumes-c7_53_119.html">Christmas Costumes</a>
<span class="long-string">|</span>
<a title="" href="halloween-costumes-c7_53_111.html">Halloween Costumes</a>
<span class="long-string">|</span>
<a title="" href="halloween-accessories-c7_53_112.html">Halloween Accessories</a>
<span class="long-string">|</span>
<a title="" href="zentai-c7_53_121.html">Zentai</a>
</div>
</li>
<li>
<h3><a href="swimwear-c7_11.html">Swimwear</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="activewear-c7_10.html">Activewear</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="heels-c116_60.html">Heels</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="pumps-c116_117.html">Pumps</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="dance-shoes-c116_62.html">Dance Shoes</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="boots-c116_63.html">Boots</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="evening-bags-c15_113.html">Evening Bags</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="hats-scarves-c15_16.html">Hats & Scarves</a></h3>
<div class="menu-list-link">
<a title="" href="womens-hats-c15_16_64.html">Womens Hats</a>
<span class="long-string">|</span>
<a title="" href="womens-scarves-c15_16_65.html">Womens Scarves</a>
</div>
</li>
<li>
<h3><a href="jewelry-c15_17.html">Jewelry</a></h3>
<div class="menu-list-link">
<a title="" href="earrings-c15_17_66.html">Earrings</a>
<span class="long-string">|</span>
<a title="" href="necklaces-c15_17_67.html">Necklaces</a>
<span class="long-string">|</span>
<a title="" href="rings-c15_17_68.html">Rings</a>
</div>
</li>
<li>
<h3><a href="watches-c15_18.html">Watches</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: block;">
<ul>
<li>
<h3><a href="wigs-hair-extensions-c19_23.html">Wigs & Hair extensions</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="fascinators-c19_69.html">Fascinators</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="makeup-tools-c19_21.html">Makeup Tools</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="spas-massagers-c19_71.html">Spas & Massagers</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="health-fitness-c19_70.html">Health & Fitness</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
</div>
</div><!--二级菜单内容-->
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("menu").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>
<style type="text/css">
body
a
a:hover
#menu
#menu ul
#menu ul li
#menu ul li a
#menu ul li a:hover
#menu ul li a#current
#menu ul li ul
#menu ul li ul li
#menu ul li ul li a
#menu ul li ul li a:hover
#menu ul li:hover ul
#menu ul li.sfhover ul
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="#">首页</a>
<ul>
<li><a href="#">下拉1</a></li>
<li><a href="#">下拉1</a></li>
</ul>
</li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">下拉2</a></li>
<li><a href="#">下拉2</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">下拉3</a></li>
<li><a href="#">下拉3</a></li>
<li><a href="#">下拉3</a></li>
</ul>
</li>
<li><a href="#">web实例</a>
<ul>
<li><a href="#">下拉4</a></li>
<li><a href="#">下拉4</a></li>
<li><a href="#">下拉4</a></li>
</ul>
</li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>
那个要用javascript写
参考一下这个
http://blog.csdn.net/fironstone/archive/2004/07/14/41191.aspx
http://www.divcss5.com/template/m101.shtml
那个要用javascript写
网页语言HTML css 谁能解释一下这句background:url("data:image\/png;ba...
这段代码应该出现在CSS中 设置了背景图片，只不过图片使用了base64编码来表示的 这种用法常用来在网页上放上很多不一样的图片，但这些图片文件并不真实存在的，例如用来显示不同页面URL的地址二维码图片，一个网站有许多页面，每个页面的URL地址都不同，不可能为每个页面做一张二维码图片，这种情况下就可以...
新手关于CS1.5 CS1.6 CZ CSS的问题
在使用这些枪的时候,很多朋友认为FPS相当重要.我个人并不这么看.我自己的电脑是Intel Pentium IV 1.4 GHz的CPU搭配NVIDIA GeForce 4 Ti 4600的显卡.很倒霉,这种配置不能提供我所希望的FPS值,因此在一些重要比赛中，FPS值能在50以上我就知足了.这种FPS一样能使用以上技巧，与FPS=100下准心收缩快并没...
CSS中超链接前的圆点如何去掉
产生这个圆点可以以下原因：1、是由于li标签默认的标签 例如：链接 默认情况下,li标签会有一个默认的小圆点，此时要去掉这个圆点，可以加上 li{list-style:none} 就可以了 2、另一种就是你在链接中加入了相应的背景，找到相应的这个背景样式，去掉背景即可 3、还有一种可以有，这个加点是链接的一部分...
计算机二级《Web程序设计》试题及答案
A.新浪网B.新浪网C.http：\/\/\/www.sina.Corn.cnD.新浪网 参考答案：B 2下面协议中用于在Web浏览器和服务器之间传输Web文档的是()。A.NFSB.FTPC.HTTPD.DNS 参考答案：C 3在HTTP响应的MIME消息体中，可以同时包含如下类型的数据()。i .文本数据 ii.图片数据 iii.视频数据 iv.音频数据 A.仅iB...
网页设计需要学习哪些技术
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。4、div+css布局 IV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说...
捷郊复方：[答案] html5的details标签在某些浏览器下前面自带展开收缩符号. 要比较保险的让常见浏览器都支持的话见楼上2位答案. Copyright 2011. All pages and graphics on this web site are the property of W3School.
静海县15695124470： 急求div+css竖着的二级导航菜单 - ？
捷郊复方： 后面自己加<style><!--* {margin:0px;padding:0px;} body {overflow:scroll;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;} a {font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;text-decoration:none;}.menu {position:relative...
静海县15695124470： 急求div+css竖着的二级导航菜单？
捷郊复方： 后面自己加 <style> <!-- * {margin:0px;padding:0px;} body {overflow:scroll;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;} a {font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;text-decoration:none;} .menu {...
静海县15695124470： div+css制作一个二级菜单？
捷郊复方： http://www.youku.com/playlist_show/id_2064575.html 教程..拿去看吧..HOHO~
静海县15695124470： DIV+CSS做2级菜单 - ？
捷郊复方： dw cs3 的tab选项卡稍作修改就可以做成这样的效果!
静海县15695124470： 小弟我想用css+div实现一个二级导航菜单.就用float:left,然ul标签变成横着的,但是我的为二级菜单也变 - ？
捷郊复方： 贴代码看看.一般是只给一级菜单的li应用 float:left即可.
静海县15695124470： 求写一个静态的二级菜单,如下图.急求!!!!用div+css就好 - ？
捷郊复方： <style> div ul li{float:left; width:100px;} div ul li div{display:none;} div ul li:hover div{display:block;}</style><title>无标题文档</title></head><body><div> <ul> <li><a>石油</a> <div> <p>原油</p> </div> </li> <li><a>实话</a> <div> <p>wenzi </p> </div> </li> </ul></div> 大概就是这么写的 你丫的就给10分钟,写不完,不过你看看应该会了
静海县15695124470： div+css制作的竖向三级弹出菜单?？
捷郊复方： ttps://wenwen.sogou.com/login/redirect?url=http%3A%2F%2Fwww.w3.org%2FTR%2Fxhtml1%2FDTD%2Fxhtml1-transitional.dtd%22%3E＂ target=＂_blank＂>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd＂> http://www.w3.org/1999/...
静海县15695124470： CSS+DIV 二级导航菜单 - ？
捷郊复方： 这个很简单啊, <div id=＂title＂><ul><li><a href=＂#＂>首页</a></li><li><a href=＂#＂>衬衫</a><ul><li><a href=＂#＂>长袖衬衫</a></li><li><a href=＂#＂>短袖衬衫</a></li><li><a href=＂#＂>无袖衬衫</a></li></ul></li><li><a href...
静海县15695124470： 请问用DIV+CSS怎样实现下面这样的菜单 - ？
捷郊复方： 1、你可以先给整体定一个div,并给该div设置下边框,如border-bottom:1px solid #000000 这样整体定位和下边线就都有了 2、然后里面需要分几行你就并列写几个div来控制就可以了,一般你写多个div它自己就会竖列显示了 3、里面每一项菜单...
