如何打开主菜单悬停的子菜单? [英] How to open submenu on hover of main menu?
问题描述
您好我正在制作菜单和子菜单。我已经做出了所有效果的菜单。我想打开菜单项悬停的子菜单,但不打开;它显示我已经打开。
我的 JSFiddle
#companymenu {background-color:#999;高度:35px;宽度:100%; margin-top:-10px;}。companymenuul {list-style-type:none;}。companymenuli {float:left;显示:块; line-height:35px; padding:0 15px;}。alisting {color:#000; text-decoration:none;}。aactive {color:#333; background-color:#fff; border-top:2px solid#999; margin-top:-2px;}。companymenuli a:hover {color:#C63;文字修饰:无;光标:指针;填充顶:10px的;填充左:24px的; padding-right:23px; padding-bottom:11px; background-color:#fff; border-top:2px solid#999; margin-top:-2px;}。caret {display:inline-block;宽度:0;身高:0; vertical-align:top; border-top:4px solid #fff; border-right:4px solid transparent; border-left:4px solid transparent;内容:; margin-top:15px; margin-left:5px; border-bottom-color:#fff;过滤器:alpha(不透明度= 100); background-image:url(images / topnav-arrow-down-white-ie6.png)no-repeat 0 0 transparent; _display:inline; _zoom:1; _width:7px; _height:4px; _margin-top:8px; _margin-left:5px; _line-height:4px; _border:无; _vertical-align:baseline;}
< div id = companymenu > < ul class =companymenuul> < li class =companymenuli aactive>< a class =alisting>主页< / a>< / li> < li class =companymenuli>< a class =alisting>产品类别< b class =caret>< / b>< / a> < UL> <李→1< /锂> <李→2< /锂> <李→3< /锂> < / UL> < /锂> < li class =companymenuli>< a class =alisting>公司简介< b class =caret>< / b>< / a> < /锂> < li class =companymenuli>< a class =alisting>通讯录< / a> < /锂> < / div>
我想在产品类别< li>
您是否在寻找类似的东西? 小提琴
给你的子菜单上课,添加 display:none;
即可。你可以给你的悬停 display:block;
所以你有这样的东西:
HTML:
< li class =companymenuli>< a class =alisting>产品类别< b class =caret>< / b>< / a>
< ul class =submenu>
< li> 1< / li>
< li> 2< / li>
< li> 3< / li>
< / ul>
< / li>
CSS:
.submenu {
display:none;
}
.companymenuli:hover> ul {
display:block;
编辑:
要删除项目符号,只需将 list-style-type:none;
添加到子菜单li
标签。这里更新的小提琴:
Hi I am making menu and submenu. I have made menu with all effect. I want to open submenu on hover of menu item, but it's not opening; it shows me already open.
My JSFiddle
#companymenu {
background-color: #999;
height:35px;
width:100%;
margin-top: -10px;
}
.companymenuul {
list-style-type: none;
}
.companymenuli {
float: left;
display:block;
line-height: 35px;
padding: 0 15px;
}
.alisting {
color:#000;
text-decoration:none;
}
.aactive {
color: #333;
background-color: #fff;
border-top: 2px solid #999;
margin-top: -2px;
}
.companymenuli a:hover {
color:#C63;
text-decoration:none;
cursor:pointer;
padding-top:10px;
padding-left:24px;
padding-right: 23px;
padding-bottom: 11px;
background-color: #fff;
border-top: 2px solid #999;
margin-top: -2px;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid #fff;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content:"";
margin-top: 15px;
margin-left: 5px;
border-bottom-color: #fff;
filter: alpha(opacity=100);
background-image:url(images/topnav-arrow-down-white-ie6.png)no-repeat 0 0 transparent;
_display: inline;
_zoom: 1;
_width: 7px;
_height: 4px;
_margin-top: 8px;
_margin-left: 5px;
_line-height: 4px;
_border: none;
_vertical-align: baseline;
}
<div id="companymenu">
<ul class="companymenuul">
<li class="companymenuli aactive"><a class="alisting">Home</a></li>
<li class="companymenuli"><a class="alisting">Product Categories<b class="caret"></b></a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="companymenuli"><a class="alisting">Company Profile <b class="caret"></b></a>
</li>
<li class="companymenuli"><a class="alisting">Contacts</a>
</li>
</ul>
</div>
I want to open <ul>
on hover of Product Categories <li>
Are you looking for something like this? Fiddle
Give your submenu a class and add display:none;
to it. After you can give your hover display:block;
So you have something like this:
HTML:
<li class="companymenuli"><a class="alisting">Product Categories <b class="caret"></b></a>
<ul class="submenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
CSS:
.submenu{
display:none;
}
.companymenuli:hover > ul{
display:block;
}
EDIT:
For removing the bullets just add list-style-type:none;
to your submenu li
tag. Here your updated fiddle:
这篇关于如何打开主菜单悬停的子菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!