2.8w+
社区成员
- 主页
求帮忙修改导航下拉菜单
有一段导航条的代码
我想在"酷炫产品"下加一个下拉菜单的功能,
说来惭愧,上次经"理上网来"帮助下可以做出效果了,
但我套回自己原来的CSS文件,
导航条又变形了,
麻烦朋友们帮帮忙好吗?
先谢谢啦
我想在"酷炫产品"下加一个下拉菜单的功能,
说来惭愧,上次经"理上网来"帮助下可以做出效果了,
但我套回自己原来的CSS文件,
导航条又变形了,
麻烦朋友们帮帮忙好吗?
先谢谢啦
<html>
<head>
<title>菜单测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<link href="images/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>
<body>
<div id="toper">
<div class="left"><img src="images/logo.jpg" width="166" height="79" /></div>
<div class="right">
<div id="menu">
<ul>
<li class="menu_on"><a href="default.htm"><span>首页</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)">
<a href="p.html"><span>酷炫产品</span></a>
<ul>
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
<li><a href="#">产品4</a></li>
<li><a href="#">产品5</a></li>
</ul>
</li>
<li><img src="images/menu_li_sp.gif" /></li>
<li ><a href="#" ><span>关于我们</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li><a href="#"><span>信息中心</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li><a href="#"><span>销售代理</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li><a href="#"><span>技术支持</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li><a href="#"><span>信息反馈</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li><a href="#"><span>联系我们</span></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
vigoryouth 2009-08-20
toury,真不知道怎样感谢你才好,
谢谢了!!!
谢谢了!!!
床上等您 2009-08-19
帮顶
vigoryouth 2009-08-19
所需图片 http://www.godn.com.cn/menu/menu.rar
why_java 2009-08-19
前台技术不行帮顶下！
vigoryouth 2009-08-19
main.css
/* CSS Document */
*{ margin:0px; padding:0px}
body {
font-family: "宋体";
font-size: 12px;
line-height: 22px;
background:#fff;
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
img{border:0px;}
.clear{ clear:both}
#toper{ width:1001px; height:144px; margin:auto; background:url(../images/top_bg.gif)}
#toper .left{ width:220px; float:left; text-align:right}
#toper .left img{padding-top:29px;}
#toper .right{ width:690px; height:70px; background:url(../images/menu_bg.gif); overflow:hidden; margin-top:74px;float:right; margin-right:15px; color:#171717}
/*头部导航开始*/
#menu{ margin-top:1px;}
#menu ul {
list-style:none;
}
#menu ul li {
float:left;
background-repeat: repeat-x;
height: 35px;
}
#menu li a span{ display:block; padding:8px 10px 5px 15px; background:url(../images/menu_li_bg.gif)}
#menu a:link,#menu a:visited{ color:#171717; text-decoration:none}
#menu a:hover,#menu a:active,#menu a.on,#menu a.on:link,#menu a.on:visited{ color:#FFFFFF}
#menu a:link span,#menu a:visited span{ color:#171717; text-decoration:none}
#menu a:hover span,#menu a:active span,#menu a.on span,#menu a.on:link span,#menu a.on:visited span{ display:block; background:url(../images/menu_li_on.gif) repeat-x;color:#fff; background-position: -35px;}
#menu .menu_on a:link span, #menu .menu_on a:visited span{ background:url(../images/menu_li_on.gif) repeat-x;color:#FFFFFF; text-decoration:none;}
#content{ width:1001px; margin:auto;background:url(../images/mid_bg.gif) bottom no-repeat;}
#content_mid
{
width:898px; margin:auto;
}
#content_mid .box-01{ float:left; margin-top:10px; display:inline;}
#content_mid .box-01 ul{ list-style:none}
#content_mid .box-01 li{ line-height:25px; }
#content_mid .box-01 li a{ color:#383838; text-decoration:none}
#content_mid .box-01 .more{ padding:15px 0; }
#content_mid .left{ width:282px; float:left;}
#content_mid .lefttop {padding-left:6px;}
#content_mid .right{width:570px; float:right}
#content_mid .right .context{ width:583px;}/*background:url(../images/txt_bg.gif) no-repeat;*/
#content_mid .right .title{ width:510px; margin-left:22px; font-weight:bold; font-size:14px; color:#1a1a1a}
#content_mid .right .txt{ width:510px; margin:10px 0px 10px 42px;color:#8c8c8c}
#content_mid .img{ padding-top:6px;}
/*footer*/
#footer{ width:1001px; height:200px; margin:auto; background:url(../images/foot_bg.gif) no-repeat}
#footer a{ color:#565656; text-decoration:none}
#footer .txt{margin:auto;text-align:center; padding-top:70px;width:1001px}
#footer .copyright{ margin:auto; padding-top:2px; text-align:center; color:#969595; font-family:Arial, Helvetica, sans-serif}
#footer .link{width:1001px; margin:auto;padding-top:10px; text-align:center; color:#7f7f7f;}
#footer .link a{width:1001px; margin:auto; text-align:center; color:#7f7f7f;}
/*左边菜单样式*/
.left_menu_out1{
background-image: url(../images/left_menu_out_1.jpg);
background-repeat: no-repeat;
background-position: left center;
}
.left_menu_out2{
background-image:url(../images/left_menu_out_2.jpg);
background-repeat: no-repeat;
background-position: left center;
}
.left_menu_out3{
background-image:url(../images/left_menu_out_3.jpg);
background-repeat: no-repeat;
background-position: left center;
}
.left_menu_out4{
background-image:url(../images/left_menu_out_4.jpg);
background-repeat: no-repeat;
background-position: left center;
}
.left_menu_out5{
background-image:url(../images/left_menu_out_5.jpg);
background-repeat: no-repeat;
background-position: left center;
}
.left_menu_out6{
background-image:url(../images/left_menu_out_6.jpg);
background-repeat: no-repeat;
background-position: left center;
}
.left_menu_out7{
background-image:url(../images/left_menu_out_7.jpg);
background-repeat: no-repeat;
background-position: left center;
}
.left_menu_over1{
background-image:url(../images/left_menu_on_1.jpg);
background-repeat: no-repeat;
background-position: left center;
}
.left_menu_over2{
background-image:url(../images/left_menu_on_2.jpg);
background-repeat: no-repeat;
background-position: left center;
}
.left_menu_over3{
background-image:url(../images/left_menu_on_3.jpg);
background-repeat: no-repeat;
background-position: left center;}
.left_menu_over4{
background-image:url(../images/left_menu_on_4.jpg);
background-repeat: no-repeat;
background-position: left center;}
.left_menu_over5{
background-image:url(../images/left_menu_on_5.jpg);
background-repeat: no-repeat;
background-position: left center;}
.left_menu_over6{
background-image:url(../images/left_menu_on_6.jpg);
background-repeat: no-repeat;
background-position: left center;}
.left_menu_over7{
background-image:url(../images/left_menu_on_7.jpg);
background-repeat: no-repeat;
background-position: left center;}
.left_menu_out8{
background-image:url(../images/left_menu_out_8.jpg);
background-repeat: no-repeat;
background-position: left center;
}
.left_menu_over8{
background-image:url(../images/left_menu_on_8.jpg);
background-repeat: no-repeat;
background-position: left center;}
.cn_out_ a{
color:#3C687D;
font-size:14px;
text-decoration:none;
font-family: "宋体";
padding-left: 5px;
}
.cn_over_ a{
color:#FFFFFF;
font-size:14px;
text-decoration:none;
font-weight: bold;
font-family: "宋体";
padding-left: 5px;
}
.en_out_ a{
color:#535353;
font-size:10px;
text-decoration:none;
font-family: Verdana;
}
.en_over_ a{
color:#FFFFFF;
font-size:10px;
text-decoration:none;
font-family: Verdana;
}
/*底部开始*/
.bot_bg{
width:100%;
background-image:url(../images/bot_bg.gif);
background-repeat:repeat-x;
background-position:left top;
}
/*底部结束*/
.m_l_bg2{
background-image:url(../images/menu_left_bot_bg.gif);
background-repeat:no-repeat;
background-position:left bottom;
}
.banner_l_t {
padding-top: 3px;
padding-left: 3px;
display: block;
}
.line_bot{
background-image: url(../images/line_bg1.gif);
background-repeat: repeat-x;
background-position: left bottom;
}
/*测试*/
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.preload1 {background: url(three_1.gif);}
.preload2 {background: url(three_1a.gif);}
#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(three_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}
#nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
baiyuinfo 2009-08-19
顶
大家好，欢迎您到：★75源码网- www.cd75.cn ★
http://www.cd75.cn
大家好，欢迎您到：★75源码网- www.cd75.cn ★
http://www.cd75.cn
toury 2009-08-19
main.css
* {padding:0; margin:0; }
body{font-family: "宋体"; font-size: 12px; line-height: 22px; background:#fff;background:url(top_bg.gif);background-repeat: repeat-x;}
img{border:0px;}
.clear{ clear:both}
#toper{ width:1001px; height:144px; margin:auto;}
#toper .left{ width:220px; float:left; text-align:right}
#toper .left img{padding-top:29px;}
#toper .right{ width:690px; height:170px; background:url(menu_bg.gif);background-repeat: repeat-x; overflow:hidden; margin-top:74px;float:right; margin-right:15px; color:#171717}
/*头部导航开始*/
#menu, #menu li ul {list-style-type:none;}
#menu{ margin:0px; }
#menu ul li {
float:left;
text-align:center;
position:relative;
background-repeat: repeat-x;
height: 25px;
}
#menu li a:link, #menu li a:visited {
display:block;
text-decoration:none;
color:#000;
width:83px;/*这里调节宽度*/
height:25px;
line-height:22px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding:0px;
}
#menu li a:hover {
color:#fff;
background:#2687eb;
}
#menu li ul li a:hover {
color:#fff;
background:#6b839c;
}
#menu li ul {
display:none;
position:absolute;
top:35px;
left:0;
margin-top:1px;
width:83px;/*这里调节宽度*/
}
#menu li ul li ul {
display:none;
position:absolute;
top:0px;
left:120px;
margin-top:0;
margin-left:0px;
width:83px;/*这里调节宽度*/
}
#menu li a span{ display:block; padding:8px 0px 5px 15px; background:url(menu_li_bg.gif)}
#menu a:link,#menu a:visited{ color:#171717; text-decoration:none}
#menu a:hover,#menu a:active,#menu a.on,#menu a.on:link,#menu a.on:visited{ color:#FFFFFF}
#menu a:link span,#menu a:visited span{ color:#171717; text-decoration:none}
#menu a:hover span,#menu a:active span,#menu a.on span,#menu a.on:link span,#menu a.on:visited span{ display:block; background:url(menu_li_on.gif) repeat-x;color:#fff; background-position: -35px;}
#menu .menu_on a:link span, #menu .menu_on a:visited span{ background:url(menu_li_on.gif) repeat-x;color:#FFFFFF; text-decoration:none;}
toury 2009-08-19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>菜单测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<link href="images/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>
<body>
<div id="toper">
<div class="left"><img src="images/logo.jpg" width="166" height="79" /></div>
<div class="right">
<div id="menu">
<ul>
<li class="menu_on"><a href="default.htm"><span>首页</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)">
<a href="p.html"><span>酷炫产品</span></a>
<ul>
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
<li><a href="#">产品4</a></li>
<li><a href="#">产品5</a></li>
</ul>
</li>
<li><img src="images/menu_li_sp.gif" /></li>
<li ><a href="#" ><span>关于我们</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li><a href="#"><span>信息中心</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li><a href="#"><span>销售代理</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li><a href="#"><span>技术支持</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li><a href="#"><span>信息反馈</span></a></li>
<li><img src="images/menu_li_sp.gif" /></li>
<li><a href="#"><span>联系我们</span></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
jackjun119 2009-08-19
你的下拉隐藏菜单都没有单独用样式控制？其实加下拉菜单很简单的，在原菜单的li内部加入与原来li元素并列的菜单模块（最好用div做外层，不会遮蔽原先菜单），此模块用CSS控制，重点是加入visibility:hidden;position:absolute;初始隐藏和继承原菜单的相对位置，宽度，字体等其他属性按个人喜好控制
<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)">
<a href="p.html"><span>酷炫产品</span></a>
<div class="nav_float">
<div><a href="#">产品1</a></div>
<div><a href="#">产品2</a></div>
<div><a href="#">产品3</a></div>
<div><a href="#">产品4</a></div>
<div><a href="#">产品5</a></div>
</div>
</li>
===============================================================================
样式：.nav_float { visibility:hidden; width:宽度; position:absolute; background:背景; }
试试
<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)">
<a href="p.html"><span>酷炫产品</span></a>
<div class="nav_float">
<div><a href="#">产品1</a></div>
<div><a href="#">产品2</a></div>
<div><a href="#">产品3</a></div>
<div><a href="#">产品4</a></div>
<div><a href="#">产品5</a></div>
</div>
</li>
===============================================================================
样式：.nav_float { visibility:hidden; width:宽度; position:absolute; background:背景; }
试试
toury 2009-08-19
晚上有时间我看看
vigoryouth 2009-08-19
我原来就是打算用你修改后的CSS文件和我的CSS文件结合起来的,
无奈水平太菜,昨晚搞到2点多,都没有搞好,
什么时候有空帮我再改一下好吗?
无奈水平太菜,昨晚搞到2点多,都没有搞好,
什么时候有空帮我再改一下好吗?
toury 2009-08-19
哈哈，你套用自己的CSS肯定有问题的。我记得上次帮你考虑这个问题的时候遇到如下问题：
1）错位，这个很好解决；
2）新添加的子菜单被你的第二个<div>遮盖了（<div class="right">）因为它的高度不够，所以，我后来就在你的CSS基础上改动了一下；具体改的哪里也记不清了，好像是把背景图直接放在了body里，然后把你的和我的CSS结合了一下
1）错位，这个很好解决；
2）新添加的子菜单被你的第二个<div>遮盖了（<div class="right">）因为它的高度不够，所以，我后来就在你的CSS基础上改动了一下；具体改的哪里也记不清了，好像是把背景图直接放在了body里，然后把你的和我的CSS结合了一下