如何在主菜单悬停时打开子菜单? [英] How to open submenu on hover of main menu?
问题描述
我正在制作菜单和子菜单.我已经制作了具有所有效果的菜单.我想在菜单项悬停时打开子菜单,但它没有打开;它显示我已经打开.
我的JSFiddle
#companymenu {背景色:#999;高度:35px;宽度:100%;边距顶部:-10px;}.companymenuul {列表样式类型:无;}.companymenuli {向左飘浮;显示:块;行高:35px;填充:0 15px;}.allisting {颜色:#000;文字装饰:无;}.aactive {颜色:#333;背景色:#fff;边框顶部:2px 实心 #999;边距顶部:-2px;}.companymenuli a:hover {颜色:#C63;文字装饰:无;游标:指针;填充顶部:10px;填充左:24px;右边距:23px;填充底部:11px;背景色:#fff;边框顶部:2px 实心 #999;边距顶部:-2px;}.插入符{显示:内联块;宽度:0;高度:0;垂直对齐:顶部;边框顶部:4px 实心 #fff;border-right: 4px 实心透明;左边框:4px 实心透明;内容:"";边距顶部:15px;左边距:5px;边框底部颜色:#fff;过滤器:alpha(不透明度=100);background-image:url(images/topnav-arrow-down-white-ie6.png)no-repeat 0 0 透明;_display:内联;_缩放:1;_宽度:7px;_高度:4px;_margin-top: 8px;_margin-left: 5px;_线高:4px;_边界:无;_vertical-align:基线;}
我想在产品类别
您是否正在寻找类似的东西?小提琴
给你的子菜单一个类并添加display:none;
.在你可以悬停之后 display:block;
所以你有这样的事情:
HTML:
<li class="companymenuli"><a class="alisting">产品类别<b class="caret"></b></a><ul class="子菜单"><li>1</li><li>2</li><li>3</li>
CSS:
.submenu{显示:无;}.companymenuli:hover >ul{显示:块;}
要删除项目符号,只需将 list-style-type:none;
添加到您的 submenu 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屋!