CODEWITHSUNDEEP
jqueryhtmlcss
AndrewS
AndrewS

Reputation: 1565

Is it possible for menu, on hover the background to overlay another menu item?

I have a horizontal menu, It's pure HTML, CSS and Jquery. All the menu works perfect, but the design of the menu has a very stupid separator, which gives me problem. Anyway is it even possible with CSS on hover menu to cover the separator between other menu items?

This is the menu : enter image description here

This is on hover : enter image description here

This is the problem : enter image description here

CSS code (i think only in this part is the problem):

    .white ul.mega-menu li {
    float: left; 
    margin: 0; 
    padding: 0;
    text-transform: uppercase;
}
.white ul.mega-menu li a {
    float: left; 
    display: block; 
    color: #47515c; 
    padding: 0px 15px; 
    text-decoration: none;
    border-left: 1px solid #fff;
    background: url(../images/top_menu_separate.png) no-repeat right; 


}
.white ul.mega-menu li a.dc-mega {position: relative;}
.white ul.mega-menu li.mega-hover a, .white ul.mega-menu li a:hover {
    color: #47515c;
    background: #dadcde;
    border-left: 1px solid #dadcde;
    padding-bottom: 0px;
    z-index: 5000000;
    overflow: visible;

}

HTML:

            <div class="white">  
                <ul id="mega-menu-9" class="mega-menu">
                    <li><a href="test.html" class="multi">Expertise</a></li>
                    <li><a href="test.html">About us</a></li>
                    <li><a href="#">Our People</a></li>
                    <li><a href="#">Our work</a></li>
                    <li><a href="#">Candidates</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </div>

I think this is the method:

.white ul.mega-menu li:hover
{
    border-left: 1px solid #dadcde;
    margin-left: -1px;
}

The only problem is that, when hover it moves all the menu from the right to the left by 1px, and it look crap... is there a trick?

Upvotes: 2

Views: 1138

Answers (2)

Eric Goncalves
Eric Goncalves

Reputation: 5353

I recreated the problem in a jsFiddle.

jsFiddle: http://jsfiddle.net/gkgUj/

Solution:

li:hover + li a {
    border-left: 0 none;
    margin-left: 1px;
}

in your case add this

.white ul.mega-menu li:hover + li a {
    background-image: none;
}

Upvotes: 1

benfarhner
benfarhner

Reputation: 1

One option is to shift the hovered item to the left by one pixel to cover the separator:

.white ul.mega-menu li:hover
{
    border-left: 1px solid #dadcde;
    margin-left: -1px;
}

Another option would be to place the separator on the left side of each item, then replace it with a white border when the item to its left is hovered:

.white ul.mega-menu li
{
    background: url(../images/top_menu_separate.png) no-repeat left;
}

.white ul.mega-menu li:hover + li
{
    background: none;
    border-left: 1px solid #fff;
}

Upvotes: 0

Related Questions