CODEWITHSUNDEEP
htmlcssfirefox
scarrott
scarrott

Reputation: 29

Display Issue with Submenu Positioning in Firefox

Working on a menu for a site and found an odd problem in firefox. On the following fiddle you can see the menu (minus some styling, but the basics are there). When you hover over the information button, the submenu should display just below in. In Chrome and IE this works fine. In firefox, the menu is stuck over to the left. Any ideas why this is happening and how to fix it? I think it might be to do with the Display: table, combined with absolute positioning of the submenu, but not sure.

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

The relevant HTML is as follows:

<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>

And the CSS is:

.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;}

Upvotes: 0

Views: 459

Answers (2)

user2795781
user2795781

Reputation: 1

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>

Upvotes: 0

Sophea Phy
Sophea Phy

Reputation: 388

Try to: remove: left: -999em; and add display:none; in class .menutop li .fusion-submenu-wrapper remove: .menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;} change: .menutop li.root:hover > .fusion-submenu-wrapper {left: 0;} to .menutop li.root:hover > .fusion-submenu-wrapper {display: block;} DEMO

Upvotes: 1

Related Questions