CODEWITHSUNDEEP
javascriptjquerycss
user1553136
user1553136

Reputation: 328

Displaying menu over an image

I have a sliding menu that should be displayed over an image, actually a logo. However, when it does, it is shifted as if the text of the menu wanted to avoid touching the image.

See :

the problem in image http://fruityhotchocolate.com/m.png

(note: the website is in french)

I deal with the event as follows:

$("nav>#menu>ul>li").hover(function(e) {
    $("ul",this).css("display","block");
});

Thanks.

Upvotes: 0

Views: 162

Answers (3)

Shankar Cabus
Shankar Cabus

Reputation: 9792

Try it with CSS:

<div class="content">
    <img src="https://www.google.com.br/images/srpr/logo3w.png​​​​​​​​​​" />
    <ul class="menu">
        <li>Item 1</li>
    </ul>
</div>

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ CSS:

.content {
    position: relative;
}

.content:hover .menu {
    display: block;
}

.menu {
    position: absolute;
    display: none;
}

Demo: http://jsfiddle.net/nfKc4/

Upvotes: 0

Korikulum
Korikulum

Reputation: 2599

Basically, what happens is that the li expands to the same width as the ul because it does not have a fixed width. Try:

$(document).ready(function() {
    $('#menu ul').children('li').each(function () {
        $(this).css('width', $(this).css('width'));
    });
});

Upvotes: 0

Oriol
Oriol

Reputation: 288170

You don't need javascript, you can do it with CSS:

Add the following code:

#menu>ul>li>ul {
    display: none;
    list-style: none;
}
#menu>ul>li:hover>ul {
    display: block;
}

Moreover, you should use child selectors (>) instead of descendant selectors:

#menu>ul
#menu>ul>li>ul
#menu>ul>li>ul>li
#menu>ul>li>ul>li>a
#menu>ul>li>a, #menu>ul>li>a:hover, #menu>ul>li>a:visited

Upvotes: 1

Related Questions