如何使用css写出一个下拉菜单

答案:2 悬赏:70

解决时间 2021-02-14 06:22

提问者网友：萌萌小主
2021-02-13 08:58

如何使用css写出一个下拉菜单

最佳答案

二级知识专家网友：茫然不知崩溃
2021-02-13 10:22

纯CSS的下拉菜单，我理解的意思就是标签套标签，然后再给标签设置样式。在被套的标签设置平时状态为隐藏，再等鼠标移动到上一个标签时，将被套的标签显示（样式：overflow:hidden; ）。大致意思就是如此。

全部回答

1楼网友：摧毁过往
2021-02-13 10:44

<html> <head> <metahttp-equiv="content-type"content="text/html;charset=gb2312"/> <title>无标题文档</title> <styletype="text/css"> body{ background-color:white; font-size:12px; font-family:arial,helvetica,sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px5px0px5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px5px0px5px; width:100px; } a:hover{ color:white; float:left; padding:3px3px0px20px; width:88px; text-decoration:none; background-color:#539d26; } a:active{ color:white; float:left; padding:3px3px0px20px; width:88px; text-decoration:none; background-color:#bd06b4; } #nav{ width:600px; height:30px; border-bottom:0px; padding:0px5px; position:absolute; z-index:1; left:198px; top:25px; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px4px0px0px; border:1pxsolid#9cdd75; background-color:#f1fbec; color:#336601; padding:6px0px0px0px; cursor:hand; overflow-y:hidden; filter:alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px4px0px0px; background-color:#f5f5f5; color:#999900; border:1pxsolid#eee8dd; padding:6px0px0px0px; overflow-y:hidden; cursor:hand; } </style> </head> <body> <divid="nav"> <ul> <liclass="menu2"onmouseover="this.classname='menu1'"onmouseout="this.classname='menu2'">我的首页 <divclass="list"> <ahref="#">我爱css</a><br/> <ahref="#">我的首页</a><br/> <ahref="#">我的日志</a><br/> <ahref="#">我的日志</a><br/> <ahref="#">我的相册</a><br/> <ahref="#">我的收藏</a><br/> </div> </li> <liclass="menu2"onmouseover="this.classname='menu1'"onmouseout="this.classname='menu2'">社区圈子 <divclass="list"> <ahref="#">我爱css</a><br/> <ahref="#">我的首页</a><br/> <ahref="#">我的日志</a><br/> <ahref="#">我的相册</a><br/> <ahref="#">我的收藏</a><br/> </div> </li> <liclass="menu2"onmouseover="this.classname='menu1'"onmouseout="this.classname='menu2'">我的短信 <divclass="list"> <ahref="#">我爱css</a><br/> <ahref="#">我的相册</a><br/> <ahref="#">我的收藏</a><br/> </div> </li> <liclass="menu2"onmouseover="this.classname='menu1'"onmouseout="this.classname='menu2'">账户管理 <divclass="list"> <ahref="#">我爱css</a><br/> <ahref="#">我的首页</a><br/> <ahref="#">我的日志</a><br/> <ahref="#">我的相册</a><br/> <ahref="#">我的收藏</a><br/> <ahref="#">我的日志</a><br/> <ahref="#">我的相册</a><br/> <ahref="#">我的收藏</a><br/> </div> </li> </ul> </div> </body> </html> 这个当时可是花了我大半天的时间才做出来的啊。强烈要求加点分啊。 qq：471108626

我要举报

如以上问答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！