求各大神给个案例,鼠标单击图标出现下拉菜单选项,div+css.... 35
4个回答
展开全部
上面那个是我做的效果。。。。不知道你能看明白了么。
鼠标经过上面的 出来下面的；
离开就隐藏。。。。。。
给你代码 你看看。。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你去懒人图库里找下，这种案例多了去了。下载下来后你结合一楼兄弟给你的解释，自己领悟下。
<!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" >
.nav{ width:980px; height:47px; margin:0 auto;}
.nav_l,.nav_r{ width:7px; height:47px;}
.nav_l{ margin-left:3px; background:url(../templets/images/nav_l.gif) no-repeat;}
.nav_r{ background:url(../templets/images/nav_r.gif) no-repeat;}
.nav_m{ width:960px; height:47px; background:url(../templets/images/nav_m.gif) repeat-x;}
.nav_m ul li{ float:left; width:113px; height:47px; text-align:center; position:relative; margin:0; padding:0; list-sytle:none;}
.nav_m ul li ul { display:none; background:url(../images/nav_m.gif) repeat-x;}
.nav_m ul li:hover ul { display:block; width:110px; height:47px; position:absolute; left:-30px;}
.nav_m ul li:hover ul li{ display:block; clear:both;text-align:left;font-size:12px;}
.nav_m ul li ul li a{ width:107px; height:47px; line-height:47px; color:#000; font-size:14px; font-weight:bold; display:block; text-align:center;}
.nav_m ul li ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div class="nav">
<div class="nav_l fl"></div>
<div class="nav_m fl">
<ul>
<li><a href="/index.html">首页</a>
<ul>
<li><a href="/gsjj/dtjs/index.html">公司简介</a></li>
<li><a href="/xwzx/index.html">新闻中心</a></li>
<li><a href="/cpzx/index.html" >产品中心</a></li>
<li><a href="/jjfa/index.html">解决方案</a></li>
<li><a href="/qdgl/qdzc/index.html">渠道管理</a></li>
<li><a href="/zczx/index.html">支持中心</a></li>
<li><a href="/lxwm/lxfs/index.html">联系我们</a></li>
</ul>
</li>
</ul>
</div>
</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=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
.nav{ width:980px; height:47px; margin:0 auto;}
.nav_l,.nav_r{ width:7px; height:47px;}
.nav_l{ margin-left:3px; background:url(../templets/images/nav_l.gif) no-repeat;}
.nav_r{ background:url(../templets/images/nav_r.gif) no-repeat;}
.nav_m{ width:960px; height:47px; background:url(../templets/images/nav_m.gif) repeat-x;}
.nav_m ul li{ float:left; width:113px; height:47px; text-align:center; position:relative; margin:0; padding:0; list-sytle:none;}
.nav_m ul li ul { display:none; background:url(../images/nav_m.gif) repeat-x;}
.nav_m ul li:hover ul { display:block; width:110px; height:47px; position:absolute; left:-30px;}
.nav_m ul li:hover ul li{ display:block; clear:both;text-align:left;font-size:12px;}
.nav_m ul li ul li a{ width:107px; height:47px; line-height:47px; color:#000; font-size:14px; font-weight:bold; display:block; text-align:center;}
.nav_m ul li ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div class="nav">
<div class="nav_l fl"></div>
<div class="nav_m fl">
<ul>
<li><a href="/index.html">首页</a>
<ul>
<li><a href="/gsjj/dtjs/index.html">公司简介</a></li>
<li><a href="/xwzx/index.html">新闻中心</a></li>
<li><a href="/cpzx/index.html" >产品中心</a></li>
<li><a href="/jjfa/index.html">解决方案</a></li>
<li><a href="/qdgl/qdzc/index.html">渠道管理</a></li>
<li><a href="/zczx/index.html">支持中心</a></li>
<li><a href="/lxwm/lxfs/index.html">联系我们</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
给你找了个例子，你把文字换成按钮图片就成。希望采纳哦。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
写一个ul
<ul>
<li>test1</li>
<li>test2</li>
</ul>
给这个ul进行绝对定位，z-index设置稍微高点，就可以看到放在了上层；至于点击的当然是用js了
<ul>
<li>test1</li>
<li>test2</li>
</ul>
给这个ul进行绝对定位，z-index设置稍微高点，就可以看到放在了上层；至于点击的当然是用js了
更多追问追答
追问
兄弟，能给个祥细点的div+css吗
追答
例如上个例子：
test1
test2
其中div为：
position:relative;//这个必须，否则定位会出现某些你想不到的问题，具体原因自己看文档；
background:url(路径为你的图片背景);
此处可以给width和height，但是不要写overflow：hidden；否则ul出不来；
然后是ul:
position:absolute;
z-index:5;//可以在高，看你其他层的高度；不过一般看你这样的需求够了；
width:xx;height:xxx;
display:none;
list-style:none;
其他的很简单了；用js
onclick的时候给ul把display：none改为display:block;
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
