CODEWITHSUNDEEP
htmlcss
Bhumi Shah
Bhumi Shah

Reputation: 9476

move menu dropdown to left

I have top menu with drop down navigation(sub menu) and drop down comes right side of main menu.

css:

ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}

How can change position to left for a last menu because if i hover on last menu, drop-down comes with horizontal scroll because there is no space on right side to display menu?

Please help

Upvotes: 2

Views: 10831

Answers (3)

dfsq
dfsq

Reputation: 193301

You should use last-child selector to set right property instead of left:

.dropdown > li:last-child:hover ul {
    left: auto;
    right: 0;
}

You don't provide a fiddle so I've set up this simple example to demonstrate the principle: http://jsfiddle.net/6eBd2/

Upvotes: 0

bluewind
bluewind

Reputation: 998

You can use jquery to fix the problem,try this

$(function(){
    $(".dropdown:last").css("left","-120px");
})

Upvotes: 1

Chris
Chris

Reputation: 518

ul.dropdown li {
   position: relative;
}

ul.dropdown li ul {
   position: absolute;
   top: 20px; /* assign the correct value of the top line height */
   left: 0px;
}

This should work^^ When assigning position:absolute; to an child element of an element with position:relative the absolute positioning is relative to its parent and not to the body.

My fault, somehow overread the last part with "last child".

This could work:

ul.dropdown li:last-of-type ul {
   position:absolute;
   left:0px;
}

Upvotes: 2

Related Questions