导航条中，鼠标放上去就会显示出下拉框式的菜单啊！~
导航条中，鼠标放上去就会显示出下拉框式的菜单，这个应该怎么做，可否给个例子!不用JAVASCRIPT只有HTML可以实现吗！谢谢了啊啊！~a...
导航条中，鼠标放上去就会显示出下拉框式的菜单，这个应该怎么做，可否给个例子! 不用JAVASCRIPT只有HTML可以实现吗！ 谢谢了啊啊！~a
展开
1个回答
展开全部
纯html的没有~但是配合css实现的就有~css比java更易懂~ 下面这个网址可以直接下载，但是要注册，不想注册就直接复制我发的源码吧。 http://www.htmwhy.com/bbs/viewthread.php?tid=17&extra=page%3D1 <!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=gb2312" /> <title>CSS下拉菜单</title> <STYLE type=text/css> body {background: #fff;font-family: Arial, sans-serif;font-size: 12px;} #menu { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 50px 0px 100px 15px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } #menu LI { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 100; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 1px 0px 0px; WIDTH: 150px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 3em } #menu LI DL { LEFT: 0px; POSITION: absolute; TOP: 0px } #menu LI A { TEXT-DECORATION: none } #menu LI A:visited { TEXT-DECORATION: none } #menu LI DD { DISPLAY: none } #menu LI:hover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } #menu LI A:hover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } #menu LI:hover DD { DISPLAY: block } #menu LI A:hover DD { DISPLAY: block } #menu LI:hover DL { PADDING-BOTTOM: 20px } #menu LI A:hover DL { PADDING-BOTTOM: 20px } #menu TABLE { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; PADDING-BOTTOM: 0px; MARGIN: -1px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse } #menu DL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/jscss/demoimg/200904/bottom.gif) #c9ba65 no-repeat left bottom; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; CURSOR: pointer; PADDING-TOP: 0px; TEXT-ALIGN: center } #menu DT { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 1.1em; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 5px; BORDER-BOTTOM: #333 1px solid } #menu .one { BACKGROUND: url(/jscss/demoimg/200904/top.gif) #b2ab9b no-repeat left top } #menu .two { BACKGROUND: url(/jscss/demoimg/200904/top.gif) #949e7c no-repeat left top } #menu .three { BACKGROUND: url(/jscss/demoimg/200904/top.gif) #d4d8bd no-repeat left top } #menu .four { BACKGROUND: url(/jscss/demoimg/200904/top.gif) #e2dfa8 no-repeat left top } #menu DD { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; BACKGROUND: #47a; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-ALIGN: left } #menu DD.last { BORDER-BOTTOM: #333 1px solid } .gallery DT A { DISPLAY: block; COLOR: #333 } .gallery DT A:visited { DISPLAY: block; COLOR: #333 } .gallery DD A { PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(/jscss/demoimg/200904/arrow.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 4px; WIDTH: 125px; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none } .gallery DD A:visited { PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(/jscss/demoimg/200904/arrow.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 4px; WIDTH: 125px; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none } .gallery DD A:hover { BACKGROUND: url(/jscss/demoimg/200904/arrowr.gif) #258 no-repeat 11px 10px; COLOR: #9cf } </STYLE> </head> <body> <UL id=menu> <LI><!--[if lte IE 6]><A href="/"> <TABLE> <TBODY> <TR> <TD><![endif]--> <DL class=gallery> <DT class=one><A href=" http://www.htmwhy.com/wangyezhizuopeixun/"> 如何制作网页</A> <DD><A href="#">Zero Dollars</A> <DD class=last><A href="#">CodeFans.net</A> </DD></DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI> <LI><!--[if lte IE 6]><A href="/"> <TABLE> <TBODY> <TR> <TD><![endif]--> <DL class=gallery> <DT class=two><A href=" http://www.htmwhy.com/wangyezhizuopeixun/">Htmwhy 网页制作学习</A> <DD><A href="/">聊天留言</A> <DD><A href="/">论坛社区</A> <DD><A href="/">上传下载</A> <DD><A href="#">circular links</A> </DD></DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI> <LI><!--[if lte IE 6]><A href=" http://www.cssplay.co.uk/menus/drop_definition.html#nogo"> <TABLE> <TBODY> <TR> <TD><![endif]--> <DL class=gallery> <DT class=three><A href=" http://www.htmwhy.com/wangyezhizuopeixun/">Htmwhy 网页制作培训</A> <DD><A href="#" href="#" >ASP</A> <DD><A href="#" >PHP</A> <DD><A href="#" >ASP.NET</A> <DD><A href="#" >JSP</A> <DD class=last> </DD></DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI> <LI><!--[if lte IE 6]><A href=" http://www.cssplay.co.uk/menus/drop_definition.html#nogo"> <TABLE> <TBODY> <TR> <TD><![endif]--> <DL class=gallery> <DT class=four><A href=" http://www.htmwhy.com/">Htmwhy 首页</A> <DD><A href="#" >content:</A> <DD><A href="#" >snooker</A> <DD class=last><A href="#" >target practise</A> </DD> </DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI></UL> </body> </html>
记得采纳啊
记得采纳啊
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
