Search code examples
htmlcssdrop-down-menucss-position

Drop down menu - last item goes off screen


Trying to add right margin for the drop down item to the last menu item.

Here is the menu: https://jsfiddle.net/5tymk7o4/11/

Here s what I'd like to get:

enter image description here

Here is what I have tried:

.dropdown-menu {
right: 0; 
 /* or */
margin-right: 0px;

}

both didn't work well

I have also tried to 1. add right margin to UL 2. to make UL relative and add right: o to LI...

all in vain...

I swear I have searched for a good while before posting this question. thanks!


Solution

  • As mentioned in previous answers, you can use right: 0 for that particular item.

    To avoid targeting other menu items, use this selector:

    #menue .menu-item:last-child .dropdown-menu {
        right: 0;
        left: initial;
        margin-right: auto !important; /* Only if you can't delete the inline margin-right applied to this element */
    }
    

    This will apply the css only to the the dropdown menu inside the last menu item, leaving the alignment of the rest as is.