Проблема с отображением подменю в Firefox

Question

Проблема с отображением подменю в Firefox

0

Работа над меню для сайта и обнаружение странной проблемы в firefox. На следующем скрипте вы можете увидеть меню (минус какой-то стиль, но основы там). Когда вы наводите курсор на информационную кнопку, подменю должно отображаться чуть ниже. В Chrome и IE это работает нормально. В firefox меню застряло влево. Любые идеи, почему это происходит и как это исправить? Я думаю, что это может быть связано с таблицей Display: в сочетании с абсолютным позиционированием подменю, но не уверен.

http://jsfiddle.net/PBCwU/4/

Соответствующий HTML выглядит следующим образом:

<li class="item262 parent root">
            <span class="daddy item bullet nolink"><span>Information</span></span>

            <div class="fusion-submenu-wrapper level2"
                 style="width:180px;">
              <ul class="level2"
                  style="width:180px;">
                <li class="item263"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=263">
                <span>Choosing a Property</span></a></li>

                <li class="item264"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=8&amp;Itemid=264">
                <span>Downloads</span></a></li>

                <li class="item265"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=265">
                <span>FAQs</span></a></li>

                <li class="item266"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=266">
                <span>Moving In</span></a></li>

                <li class="item267"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=267">
                <span>Protecting Your Deposit</span></a></li>

                <li class="item268"><a class="orphan item bullet"
                   href=
                   "/new/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=268">
                <span>Repairs</span></a></li>
              </ul>

              <div class="drop-bot"></div>
            </div>
          </li>

И CSS:

.menutop li {height: auto;margin: 0;padding: 0;position: relative;list-style: none;}
.menutop em {font-size: 80%;font-weight: normal;display: block;font-style: normal;}
.menutop li .item, .menutop li.active .item {display: block;margin: 0;text-decoration: none;float: none;width: auto;}
.menutop li .fusion-submenu-wrapper {float: none;left: -999em;position: absolute;z-index: 500;}
.menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
.menutop li:hover ul, .menutop li.sfHover ul {top: 0;}

/* Root Items */
.menutop {list-style: none;margin: 0;padding: 0;position: relative;line-height: 1em;display:table;table-layout:fixed;font-family:Arial, Helvetica, sans-serif;text-transform:uppercase;width:100%;background:url(../images/menu_border.png) 100% 1px no-repeat;}
.menutop li.root {display:table-cell;background:url(../images/menu_border.png) 0 1px no-repeat;}

.menutop li.root > .item {
    white-space: nowrap;
    display: block;
    padding: 0;
    font-size: 14px;
    z-index: 610000!important;
    cursor: pointer;
    position: relative;
    margin: 0;
    outline: none;
    height:60px;
    text-align:center;
    }

.menutop li.root > .item:hover span, .menutop li.root.f-mainparent-itemfocus > .item span,
ul.level1 li a:hover span, ul.level1 li.root.f-mainparent-itemfocus > .item span{
    color:#87B949;
    }

.menutop li.root.active > .item , ul.level1 li.root.active{
    background-color:#87B949;
    text-shadow:1px 1px 1px #333333;
    }
.menutop li.root.active > .item  span, ul.level1 li.root.active span{
    color:#fff !important;
    }

.menutop li.root > span.item{cursor:default;}   

.menutop li.root > .item span {display: block;margin: 0;outline: none;width: auto;line-height:60px;}
.menutop li.root > .item em {font-size: 10px;display: block;text-transform: lowercase;line-height: 0.3em;}
.menutop li.parent.root .item span {background:url(../images/menu_arrow.gif) 50% 45px no-repeat;}
.menutop li.root .subtext span {line-height: 1.9em;}
.menutop li.root > .item img {margin: 0 4px 0 0;vertical-align: text-bottom;}

/* Dropdown Surrounds */
.menutop ul {padding: 0; margin: 0 0 0 1px; float: left;}
.menutop .drop-bot {height: 1px;overflow: hidden;clear: both;}
.menutop .fusion-submenu-wrapper {height: auto !important;}

.menutop ul.level2 { margin: 1px 0 0 0; text-transform: none;}
ul.level2 li a:hover span {color: #fff;}

/* Dropdown Items */
.menutop ul li {padding: 0;display: block;}
.menutop ul li > .item {
    padding: 0;
    height: auto;
    display: block;
    font-size: 1em;
    cursor: pointer;
    text-align:center;
    background-color: #000000;
    }

.menutop li.parent.root .level2 li span{background:none;}

.menutop ul li > .item:hover,
.menutop ul li.active > .item,
.menutop ul li.f-menuparent-itemfocus > .item{
    background-color: #87B949;
    text-shadow:1px 1px 1px #333333;
    }
    .menutop ul.level3 li > .item:hover,
.menutop ul.level3 li.active > .item,
.menutop ul.level3 li.f-menuparent-itemfocus > .item{
    background:#353535;
    }

.menutop ul li > .item span {display: block;width: 100%;overflow: hidden;line-height:40px;}
.menutop ul li .item img {float: left;margin: 8px 6px 0 0;vertical-align: top;}
.menutop ul li .nolink span {display: block;}
.menutop ul li span.item {cursor: default;outline: none;}
.menutop ul li .subtext span {line-height: 1.9em;}
.menutop ul li .subtext em {line-height: 0.6em;padding-bottom: 7px;text-transform: lowercase;}

/* No JS */
.menutop li.root:hover > .fusion-submenu-wrapper {left: 0;}
.menutop ul li:hover > .fusion-submenu-wrapper {left: 156px;top: 0;}

/* Fusion JS */
.fusion-js-container {display: block;height: 0;left: 0;overflow: visible;position: absolute;top: 0;z-index: 600000!important;background: transparent !important;}
.fusion-js-subs {display: none;margin: 0;overflow: hidden;padding: 0 !important;position: absolute;}

/* Grouped & Modules */
.menutop .fusion-grouped {padding-bottom: 10px;}
.menutop .fusion-grouped ol {padding: 0;}
.menutop .fusion-grouped ol li {padding: 0 15px;}
.menutop .fusion-grouped ol li .item {padding: 0 15px;}
.menutop .fusion-grouped ol li span {font-size: 85%;line-height: 2em;}
.menutop .type-module ol {padding: 0;}
.menutop .type-module ol li {padding: 0;}
.menutop .type-module ol li .fusion-modules {background: none;}
.menutop .type-module ol li .fusion-module {padding: 0;background: none;overflow: hidden;}
.menutop .fusion-module, .menutop .fusion-modules, .menutop .fusion-grouped {display: block;}
.menutop .fusion-modules.item {padding: 15px;}
.menutop .fusion-module em {display: inline;font-size: inherit;font-style: italic;}
.menutop .fusion-module a {font-size: inherit;line-height: 130%;}
.menutop .fusion-module p, .menutop .fusion-modules p {line-height: 160%;}
.menutop ul li.grouped-parent > .daddy span {background: none;}

scarrott 19 сен. 2013, в 16:14

Источник

Теги:

html

css

firefox

2 ответа

0

i have fixed your problem. please use below css

<style>
.menutop li {
    float: left;
    height: auto;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 200px;
}
.menutop em {
    font-size: 80%;
    font-weight: normal;
    display: block;
    font-style: normal;
}
.menutop li .item, .menutop li.active .item {
    display: block;
    margin: 0;
    text-decoration: none;
    float: none;
    width: auto;
}
.menutop li .fusion-submenu-wrapper {
    float: none;
    left: -999em;
    position: absolute;
    z-index: 500;
}
.menutop li:hover li ul, .menutop li.sfHover li ul {
    top: -999em;
}
.menutop li:hover ul, .menutop li.sfHover ul {
    top: 0;
}
/* Root Items */
.menutop {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    line-height: 1em;
    display:table;
    table-layout:fixed;
    font-family:Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    width:100%;
    background:url(../images/menu_border.png) 100% 1px no-repeat;
}
.menutop li.root {
    display:table-cell;
    background:url(../images/menu_border.png) 0 1px no-repeat;
}
.menutop li.root > .item {
    white-space: nowrap;
    display: block;
    padding: 0;
    font-size: 14px;
    z-index: 610000!important;
    cursor: pointer;
    position: relative;
    margin: 0;
    outline: none;
    height:60px;
    text-align:center;
}
.menutop li.root > .item:hover span, .menutop li.root.f-mainparent-itemfocus > .item span, ul.level1 li a:hover span, ul.level1 li.root.f-mainparent-itemfocus > .item span {
    color:#87B949;
}
.menutop li.root.active > .item, ul.level1 li.root.active {
    background-color:#87B949;
    text-shadow:1px 1px 1px #333333;
}
.menutop li.root.active > .item span, ul.level1 li.root.active span {
    color:#fff !important;
}
.menutop li.root > span.item {
    cursor:default;
}
.menutop li.root > .item span {
    display: block;
    margin: 0;
    outline: none;
    width: auto;
    line-height:60px;
}
.menutop li.root > .item em {
    font-size: 10px;
    display: block;
    text-transform: lowercase;
    line-height: 0.3em;
}
.menutop li.parent.root .item span {
    background:url(../images/menu_arrow.gif) 50% 45px no-repeat;
}
.menutop li.root .subtext span {
    line-height: 1.9em;
}
.menutop li.root > .item img {
    margin: 0 4px 0 0;
    vertical-align: text-bottom;
}
/* Dropdown Surrounds */
.menutop ul {
    padding: 0;
    margin: 0 0 0 1px;
    float: left;
}
.menutop .drop-bot {
    height: 1px;
    overflow: hidden;
    clear: both;
}
.menutop .fusion-submenu-wrapper {
    height: auto !important;
}
.menutop ul.level2 {
    margin: 1px 0 0 0;
    text-transform: none;
}
ul.level2 li a:hover span {
    color: #fff;
}
/* Dropdown Items */
.menutop ul li {
    padding: 0;
    display: block;
}
.menutop ul li > .item {
    padding: 0;
    height: auto;
    display: block;
    font-size: 1em;
    cursor: pointer;
    text-align:center;
    background-color: #000000;
}
.menutop li.parent.root .level2 li span {
    background:none;
}
.menutop ul li > .item:hover, .menutop ul li.active > .item, .menutop ul li.f-menuparent-itemfocus > .item {
    background-color: #87B949;
    text-shadow:1px 1px 1px #333333;
}
.menutop ul.level3 li > .item:hover, .menutop ul.level3 li.active > .item, .menutop ul.level3 li.f-menuparent-itemfocus > .item {
    background:#353535;
}
.menutop ul li > .item span {
    display: block;
    width: 100%;
    overflow: hidden;
    line-height:40px;
}
.menutop ul li .item img {
    float: left;
    margin: 8px 6px 0 0;
    vertical-align: top;
}
.menutop ul li .nolink span {
    display: block;
}
.menutop ul li span.item {
    cursor: default;
    outline: none;
}
.menutop ul li .subtext span {
    line-height: 1.9em;
}
.menutop ul li .subtext em {
    line-height: 0.6em;
    padding-bottom: 7px;
    text-transform: lowercase;
}
/* No JS */
.menutop li.root:hover > .fusion-submenu-wrapper {
    left: 0;
}
.menutop ul li:hover > .fusion-submenu-wrapper {
    left: 156px;
    top: 0;
}
/* Fusion JS */
.fusion-js-container {
    display: block;
    height: 0;
    left: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    z-index: 600000!important;
    background: transparent !important;
}
.fusion-js-subs {
    display: none;
    margin: 0;
    overflow: hidden;
    padding: 0 !important;
    position: absolute;
}
/* Grouped & Modules */
.menutop .fusion-grouped {
    padding-bottom: 10px;
}
.menutop .fusion-grouped ol {
    padding: 0;
}
.menutop .fusion-grouped ol li {
    padding: 0 15px;
}
.menutop .fusion-grouped ol li .item {
    padding: 0 15px;
}
.menutop .fusion-grouped ol li span {
    font-size: 85%;
    line-height: 2em;
}
.menutop .type-module ol {
    padding: 0;
}
.menutop .type-module ol li {
    padding: 0;
}
.menutop .type-module ol li .fusion-modules {
    background: none;
}
.menutop .type-module ol li .fusion-module {
    padding: 0;
    background: none;
    overflow: hidden;
}
.menutop .fusion-module, .menutop .fusion-modules, .menutop .fusion-grouped {
    display: block;
}
.menutop .fusion-modules.item {
    padding: 15px;
}
.menutop .fusion-module em {
    display: inline;
    font-size: inherit;
    font-style: italic;
}
.menutop .fusion-module a {
    font-size: inherit;
    line-height: 130%;
}
.menutop .fusion-module p, .menutop .fusion-modules p {
    line-height: 160%;
}
.menutop ul li.grouped-parent > .daddy span {
    background: none;
}
</style>

user2795781 19 сен. 2013, в 13:12

0

Спасибо за помощь. Это заставило меню работать, но нам нужно было сохранить тип таблицы, чтобы, если кто-то добавлял или удалял пункты меню, он по-прежнему правильно заполнял строку меню.
scarrott 27 сен. 2013, в 17:43

Ещё вопросы

Спасибо за помощь. Это заставило меню работать, но нам нужно было сохранить тип таблицы, чтобы, если кто-то добавлял или удалял пункты меню, он по-прежнему правильно заполнял строку меню.

Sophea Phy · Accepted Answer · 2013-09-19T11-20-00.000Z

Попробуйте: удалить: left: -999em; и добавить display:none; в классе .menutop li.fusion-submenu-wrapper remove: .menutop li:hover li ul,.menutop li.sfHover li ul {top: -999em;} изменение: .menutop li.root:hover >.fusion-submenu-wrapper {left: 0;} в .menutop li.root:hover >.fusion-submenu-wrapper {display: block;} DEMO

Это идеально. Спасибо за помощь. Работает отлично сейчас. Я должен был подумать, чтобы просто использовать Display, чтобы показать его, а не перемещать его по экрану.