问题描述
我有一个带有两个级别的水平超级鱼菜单.当我将鼠标悬停在第一级链接上时，第二级下拉列表似乎比顶级链接的底部低约2ems，尽管Firebug表示样式为:
I have a horizontal superfish menu with two levels. When I hover over a first level link, the second level drop down appears approx 2ems lower than the bottom of top level links although firebug says the style is:
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul {
left: 0;
bottom: 0em;
}
无论我尝试提高最低位置(例如，底部:-2.5em)，第二级菜单都不会升高.这使我认为浏览器(Firefox)可能存在差距，但我找不到这种迹象.
No matter how much I try to raise the bottom position (eg. bottom: -2.5em), the second level menu will not raise up. This leads me to think that the browser (Firefox) may be forcing a gap, but I cannot find evidence of that.
如何排除这种错误的定位或找出可能的原因?
How can I override this incorrect positioning or find out what might be the cause?
推荐答案
您可以发布指向您网站的链接吗?
Can you post a link to your site?
要专门回答这个问题有些棘手....但是，您可以尝试定位:
Its a bit tricky to answer specifically.... but as a guess try targeting:
.sf-menu ul a {
这是一些很好的，颜色清晰的CSS，可以帮助您，要与超级鱼CSS交手可能会很棘手...
This is some good , clearly coloured css to help you, it can be tricky to get to grips with superfish css...
主题皮肤:
/*** COLOR SKIN ***/
/* main ul element */
.sf-menu {
border-right: 1px solid FUCHSIA;
float:left;
}
/* general link styles*/
.sf-menu a {
display: block;
padding:9px 13px;
text-decoration:none;
border-top: 1px solid;
border-left: 1px solid;
border-bottom: 1px solid;
}
/*** 1st Level ***/
/* 1st level links, no hover, no visits */
.sf-menu li a {
color: yellow;
background-color: green;
border-color: red;
}
/* 1st level links, while hovering over sub menu */
.sf-menu li.sfHover a{
color: black;
background-color: silver;
}
/* 1st level links, hover */
.sf-menu li a:hover {
color: white;
background-color: lime;
}
/* 1st level current page */
.sf-menu .current_page_item a,
.sf-menu .current_page_ancestor a,
.sf-menu .current_page_parent a {
border-bottom-color: white;
background-color: TEAL;
}
/* 1st level down triangles with pure css*/
.sf-menu li .sf-sub-indicator {
text-indent:-9999px;
line-height: 0;
border-color:YELLOW transparent transparent;
border-style:solid;
border-width:4px; /*controls size of triangle */
display:inline-block;
margin-left:5px;
}
/*** 2nd level ***/
/* sub menu */
.sf-menu ul {
border-right:1px solid;
border-bottom:1px solid;
border-color: yellow;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
top:32px; /* overriding essential styles- adjust if you have gaps between first level and drop-down sub menu*/
}
.sf-menu ul ul {
margin-top:0; /*unlikely to need adjusting */
}
/* 2nd level links, no hover */
.sf-menu li li a, .sf-menu li.sfHover li a {
color: orange;
background-color: blue;
border-color: green;
border-bottom: 0;
}
/* 2nd level links, while hovering over sub menu */
.sf-menu li li.sfHover a{
color: black;
background-color: silver;
}
/* 2nd level links, hover */
.sf-menu li li a:hover, .sf-menu li.sfHover li a:hover {
color: white;
background-color: aqua;
}
/* 2nd level current page */
.sf-menu li li.current_page_item a,
.sf-menu li li.current_page_ancestor a,
.sf-menu li li.current_page_parent a {
background-color: TEAL;
}
/* 2nd level side triangles with pure CSS */
.sf-menu li li .sf-sub-indicator { /*right arrow*/
border-color: transparent transparent transparent WHITE;
}
/*** 3rd Level and beyond ***/
/* 3rd level links, no hover */
.sf-menu li li li a, .sf-menu li.sfHover li li a {
color: blue;
background-color: red;
border-color: blue;
}
/* 3rd level links, hover */
.sf-menu li li li a:hover, .sf-menu li.sfHover li li a:hover {
color: white;
background-color: pink;
}
/* 2nd level current page */
.sf-menu li li li.current_page_item a,
.sf-menu li li li.current_page_ancestor a,
.sf-menu li li li.current_page_parent a {
background-color: TEAL;
}
这篇关于如何在水平2级超级鱼菜单中纠正样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！