求帮忙修改导航下拉菜单

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>



...全文
226 12 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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结合了一下
uniapp导航栏自定义下拉菜单下拉内容偏移及页面无法点击问题（uview框架）
解决方案：如图所示，我们可以得知导航栏按钮导致整体下拉菜单偏移，利用穿透样式将下拉内容宽度设为视口宽度，根据按钮偏移量进行调整。其实这边我是尝试过只将内容层级调低，但是并没有解决问题，如有大佬知道为何...
html图片被遮盖怎么办,求大家帮忙，下拉菜单被JS图片切换给挡住了，怎么办啊？_html/css_WEB-ITnose...
在火狐中显示正常，在IE中显示下拉菜单被JS图片切换给挡在下面了，我改了，z-index优先级，但还是不行，求各位帮帮忙？急啊，回复讨论(解决方案)大家看一下就知道了，...
Vue开发实例（12）之实现动态左侧菜单导航
Vue开发实例（12）之实现动态左侧菜单导航
Android客制化------6.0底部导航栏增加隐藏按钮
Android客制化——6.0底部导航栏增加隐藏按钮关于导航栏这一块按钮的增加其实网上也有很多的例子了，最多的可能就是一个关于音量加减的...我们知道关于通知栏、导航栏、下拉菜单实质上是一个SystemUI.apk。这部分的源
（table 非 div）非常非常经典的下拉导航！！！--ll
--这个菜单使用了二级菜单,稍微较长,请自行修改--> onmouseover="movese('网络编程语言**Html**Css**Javaｓｃｒｉｐｔ**Vbｓｃｒｉｐｔ**Dhtml**Vml**ActiveX**Asp**Php**Jsp**Sql+Ado**Xml+*.net**其他网络...
ASP

28,409

社区成员

356,971

社区内容

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

加载中

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

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

+ 用AI写文章