如何在菜单悬停上创建HTML / CSS子菜单 [英] How to create HTML/CSS Submenus on menu hover

问题描述

我正在开发一个wesbite，我有水平菜单，但我想在鼠标悬停上创建垂直子菜单...



这里的问题是，我有HTML / CSS的基本知识，我是ASP.NET开发人员，对于这个网站，我已经下载了一个非常基本的Web模板。有关于此的在线示例，但他们没有使用我的模板。



有人可以帮助我用我的模板创建简单的悬停子菜单......



以下是HTML菜单信息......

 body { margin：0; padding：0; line-height：1.5em; background：#fff; font：76％/ 160％verdana，arial，helvetica，sans-serif; color：＃000; letter-spacing：1px;} 
 
 #header {background-color：＃f5f5dc; padding-top：20px; font-size：2.2em; font-weight：normal; letter-spacing：20px; height：40px; text-align： center; border-bottom：1px solid＃000;颜色：橙色} 
 
 ul＃navtop {background-color：＃f5f5dc; margin：0;填充：10px 0 10px 30px; white-space：nowrap; border-bottom：1px solid＃000;} 
 
 / *导航样式* / 
 
 #navtop li {display ：inline; list-style-type：none;} 
 
 #navtop a {padding：3px 10px;} 
 
 #navtop a：link，#navtop a：visited {颜色：＃000; text-decoration：none; border：1px solid＃f5f5dc; outline：none;颜色：红色} 
 
 #navtop a：悬停{颜色：＃000;背景颜色：＃f9f9ea; text-decoration：none; border：1px solid＃000;} 
 
 .navbottom {margin-left：0; padding-left：0;} 
 
 #maincontainer {width：600px; margin：50px auto;} 
 
 #contentwrapper { float：left; width：100％;} 

解决方案

最好不要创建它们，而是显示和隐藏这些事件;它会使问题变得非常微不足道。它还可以使用纯CSS菜单。我希望您可以使用这个简单的想法自己完成，但您可以使用以下Web资源：

http ：//purecss.io/menus [ ^ ]，
http://cssmenumaker.com [ ^ ]，

http://css3menu.com [ ^ ]。

-SA

I am developing a wesbite for which I have horizontal menues but I want to create vertical submenus on mouse hover...

Here problem is that, I have basic knowledge of HTML/CSS, I am ASP.NET developer, For this website I have downloaded a very basic Web Template. There are example online about this but they are not working with the template I have.

Somebody could help me out to create simple hover submenu with my template...

Below is the HTML MENU SNIPPET...

body {margin:0;padding:0;line-height: 1.5em;background: #fff;font: 76%/160% verdana, arial, helvetica, sans-serif;color: #000;letter-spacing: 1px;}

#header {background-color: #f5f5dc;padding-top: 20px;font-size: 2.2em;font-weight: normal;letter-spacing: 20px;height: 40px;text-align: center;border-bottom: 1px solid #000; color:Orange}

ul#navtop {background-color: #f5f5dc;margin: 0; padding: 10px 0 10px 30px;white-space: nowrap;border-bottom: 1px solid #000;}

/*Navigation Styles*/

#navtop li {display: inline;list-style-type: none;}

#navtop a {padding: 3px 10px;}

#navtop a:link, #navtop a:visited {color: #000;text-decoration: none;border: 1px solid #f5f5dc;outline:none; color:Red}

#navtop a:hover{color: #000;background-color: #f9f9ea;text-decoration: none;border: 1px solid #000;}

.navbottom {margin-left: 0;padding-left: 0;}

#maincontainer {width: 600px;margin: 50px auto;}

#contentwrapper {float: left;width: 100%;}

解决方案

It's better not to create them, but show and hide on those events; it will make the problem quite trivial. It will also make it possible to have a pure CSS menu. I hope you can do it yourself using this simple idea, but you can use, in particular, the following Web resources:
http://purecss.io/menus[^],
http://cssmenumaker.com[^],
http://css3menu.com[^].

—SA

这篇关于如何在菜单悬停上创建HTML / CSS子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！