CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
aj_shehan
aj_shehan

Reputation: 122

CSS Menu does not appear in correct place in IE and Firefox

enter image description here

The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.

The HTML is,

<nav class="nav">
    <ul>
        <li class="menu-item">Hi Alexander!</li>
        <li class="menu-item"><a>My Account</a>
            <div class="my-sub-menu">
                <ul class="sub-list">
                    <li class="list-item"><a>History</a></li>
                    <li class="list-item"><a>Personal Details</a></li>
                    <li class="list-item"><a>Preferences</a></li>
                    <li class="list-item"><a>Bonuses</a></li>
                    <li class="list-item"><a>Wishlist</a></li>
                    <li class="list-item"><a>Newsletter</a></li>
                    <li class="list-item"><a>Invite Friends</a></li>
                    <li class="list-item"><a>FAQ</a></li>
                    <li class="list-item"><a>Sign out</a></li>
                </ul>
            </div>
        </li>
        <li class="menu-item"><a>Contact Us</a></li>
        <li class="menu-item"><a>Chat</a></li>
        <li class="menu-item"><a>Chat</a></li>
    </ul>
</nav>

The CSS is as follows,

.nav {
        margin-top: 2px;
        position: relative;
        float: right;
    }

    .nav > ul {
        padding: 0;
        margin: 0;
    } 

    .menu-item{
        list-style: none;
        float: left;
    }

    .menu-item .my-sub-menu {
        visibility: hidden;
        position: absolute;
        padding: 0;
        margin: 0;
    }

    .menu-item:hover .my-sub-menu {
        visibility: visible;
    }

    .list-item {
        list-style: none;
    }

I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.

Tahnk you in advance.

Upvotes: 1

Views: 127

Answers (2)

jonhodson1984
jonhodson1984

Reputation: 56

If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.

Upvotes: 3

Anobik
Anobik

Reputation: 4899

try doing

.sub-list{
padding:0px !important;
}

and if by second menu u want it to come under contact us then change the position of the div

<div class="my-sub-menu">
            <ul class="sub-list">
                <li class="list-item"><a>History</a></li>
                <li class="list-item"><a>Personal Details</a></li>
                <li class="list-item"><a>Preferences</a></li>
                <li class="list-item"><a>Bonuses</a></li>
                <li class="list-item"><a>Wishlist</a></li>
                <li class="list-item"><a>Newsletter</a></li>
                <li class="list-item"><a>Invite Friends</a></li>
                <li class="list-item"><a>FAQ</a></li>
                <li class="list-item"><a>Sign out</a></li>
            </ul>
        </div>

into the next li element ie cntact us

kind of a fiddle

fiddle ex

Upvotes: 2

Related Questions