求帮忙修改导航下拉菜单

vigoryouth 2009-08-19 10:47:46
有一段导航条的代码
我想在"酷炫产品"下加一个下拉菜单的功能,
说来惭愧,上次经"理上网来"帮助下可以做出效果了,
但我套回自己原来的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>



...全文
219 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
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
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:背景; }
试试
toury 2009-08-19
  • 打赏
  • 举报
 回复
晚上有时间我看看
vigoryouth 2009-08-19
  • 打赏
  • 举报
 回复
我原来就是打算用你修改后的CSS文件和我的CSS文件结合起来的,
无奈水平太菜,昨晚搞到2点多,都没有搞好,
什么时候有空帮我再改一下好吗?
toury 2009-08-19
  • 打赏
  • 举报
 回复
哈哈，你套用自己的CSS肯定有问题的。我记得上次帮你考虑这个问题的时候遇到如下问题：
1）错位，这个很好解决；
2）新添加的子菜单被你的第二个<div>遮盖了（<div class="right">）因为它的高度不够，所以，我后来就在你的CSS基础上改动了一下；具体改的哪里也记不清了，好像是把背景图直接放在了body里，然后把你的和我的CSS结合了一下
黑色下拉式网页菜单代码.rar
黑色下拉式网页菜单代码，当然少不了jquery帮忙了，不过在火狐下好像有点问题，不能展开，不喜欢这种风格的可以自己修改CSS换风格。
html图片被遮盖怎么办,求大家帮忙，下拉菜单被JS图片切换给挡住了，怎么办啊？_html/css_WEB-ITnose...
在火狐中显示正常，在IE中显示下拉菜单被JS图片切换给挡在下面了，我改了，z-index优先级，但还是不行，求各位帮帮忙？急啊，回复讨论(解决方案)大家看一下就知道了，http://www.goodmeal.cn/?module=dingzuo.canting&method=show&idx=4肯定是垃圾，，，，被发的广告链接骗来的。。。。。大家看一下就知道了，http://www...
（table 非 div）非常非常经典的下拉导航！！！--ll
a{text-Decoration:none;} a:hover{color:blue} td{font-size:12px;color:555555} .menu{border-right:0;border-top:0;border-bottom:0;border-left:1 solid white;color:666666} function window.one
Android客制化------6.0底部导航栏增加隐藏按钮
Android客制化——6.0底部导航栏增加隐藏按钮关于导航栏这一块按钮的增加其实网上也有很多的例子了，最多的可能就是一个关于音量加减的例子。 最近客户有要求做这么一个功能，即在底部导航栏再添加一个按钮，通过这个按钮来实现导航栏虚拟按键的隐藏与显示。但无论导航栏隐藏与否，这个按钮都不会消失，也就是会常驻导航栏。 我们知道关于通知栏、导航栏、下拉菜单实质上是一个SystemUI.apk。这部分的源
RecyclerView系列之滑动菜单
一、背景 前面已经实现了 RecyclerView 的下拉刷新和上拉加载更多，给 RecyclerView 添加 header，这两个用的比较多，这次实现的是滑动菜单，实现这个是因为产品经理通常会告诉你，我们要做一个和某某应用一样的效果。有人就说了：“这产品总是模仿，总是让做和别人一样的效果（小声嘀咕：关键这还真不那么容易实现）”。这就不能忍，那还有让你更不能忍的，产品告诉你做一个跟 QQ 的滑动...
ASP

28,390

社区成员

357,068

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章