CODEWITHSUNDEEP
cssdrop-down-menumenualignment
Paul
Paul

Reputation: 276

CSS alignment of drop down UL LI elements clipping off screen

I'm struggling with positioning on a pure css driven drop down menu: My left hand side options are working fine - and this code is based on code i found online - It does the job ok.

I'm trying to make my far right hand menu drop down and NOT be clipped off/screen - I believe i will need to use a combination of relative positioning and float right but have tried lots of combinations without the desired effect.

I've put my code into a JSfiddle to show a live example (in-fact it's pretty much identical to what i'm working on) - I have added a batch of css resets to the top to make jsfiddle behave properly (on my live site i'm using an external css reset).

JS Fiddle: http://jsfiddle.net/g7Lk7/1/

    .pit_toolbar_ul ul{
    background:#fff; 
    background:rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
    list-style-type:none;
    margin: 0;
}

Any recommendations on how to get the far right drop down to align up against the right edge of the screen would be appreciated.

Thanks for your time!

Upvotes: 1

Views: 2586

Answers (2)

user2127251
user2127251

Reputation: 

.pit_toolbar_ul li:hover ul.alignRight li
{
  position:relative;
  left:-30px;
}

Add this class to your style sheet this may help you. I have positioned your dropdown li.

Upvotes: 0

dfsq
dfsq

Reputation: 193271

You should use right: 0 instead of left: 0 for the right menu item. You can fix it adding this styles:

.pit_toolbar_ul li:hover ul.rightside {
    left: auto;
    right: 0;
}
.pit_toolbar_ul li:hover ul.rightside li {
    margin-right: 0;
}

and add rightside class to corresponding ul.

http://jsfiddle.net/g7Lk7/2/

Upvotes: 1

Related Questions