CODEWITHSUNDEEP
htmlcss
Kevin Kopf
Kevin Kopf

Reputation: 14210

CSS dropdown menu with submenu aligning to the right edge of it's parent

Here is a very easy example of CSS based dropdown menu: http://jsfiddle.net/V8aL6/

    <ul id="nav">
    <li>
        <a href="#" title="Return home">Home</a>

    </li>
    <li>
        <a href="#" title="About the company">About</a>
        <ul>
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
        </ul>

    </li>
    <li>
        <a href="#" title="The services we offer">Services</a>
        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>
            <li><a href="#">Sevice three</a></li>

            <li><a href="#">Sevice four</a></li>
        </ul>
    </li>
    <li>
        <a href="#" title="Our product range">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>

            <li><a href="#">Small product (two)</a></li>
            <li><a href="#">Small product (three)</a></li>
            <li><a href="#">Small product (four)</a></li>
            <li><a href="#">Big product (five)</a></li>
            <li><a href="#">Big product (six)</a></li>
            <li><a href="#">Big product (seven)</a></li>

            <li><a href="#">Big product (eight)</a></li>
            <li><a href="#">Enourmous product (nine)</a></li>
            <li><a href="#">Enourmous product (ten)</a></li>
            <li><a href="#">Enourmous product (eleven)</a></li>
        </ul>
    </li>
    <li>

        <a href="#" title="Get in touch with us">Contact</a>
        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>
        </ul>
    </li>
</ul>

But I can't find a solution to align the submenu to the right edge of it's parent, like this:

simple drop-down menu aligned left

Upvotes: 16

Views: 73952

Answers (5)

Collin Anderson
Collin Anderson

Reputation: 15444

To automatically make dropdowns on the right align right:

<script>
// make dropdowns on the right align right, etc, so they don't go off screen
var dropdown_uls = document.querySelectorAll('#nav li ul')
function fix_dropdowns(){
    for (var i=0; i< dropdown_uls.length; i++) {
        var ul = dropdown_uls[i]
        var rect = ul.getBoundingClientRect()
        var body = document.body.getBoundingClientRect()
        if(rect.right > body.right){
            ul.style.left = 'auto'
            ul.style.right = 0
        }
        if(rect.left < body.left){
            ul.style.left = 0
            ul.style.right = 'auto'
        }
    }
}
fix_dropdowns()
addEventListener('resize', fix_dropdowns)
</script>

Upvotes: -1

Allwyn Dsouza
Allwyn Dsouza

Reputation: 61

Add the Bootstrap class .pull-right to <div class='btn-group'. Should look like below: <div class='btn-group pull-right'

Upvotes: 0

Sid Barat
Sid Barat

Reputation: 1

A better solution should be:

#nav ul li ul, #nav ul li:hover ul {
    float:right;
    margin-right:2px; /*optional*/
}

Upvotes: 0

Maksim
Maksim

Reputation: 206

Its better and more clean if you position your list to the right and instead of moving UL out of the screen you could just toggle the display property from none to block.

You will need to make some changes in these rules and add those properties:

#nav li:hover ul {
    display: block;
    right: 0;
}

#nav ul {
    display: none;
}
#nav ul li {
    margin-right: 0;
}

See my updated fiddle: http://jsfiddle.net/V8aL6/2/

Upvotes: 6

Christoph
Christoph

Reputation: 51201

This menu achieves the hiding/showing by modifying the left property. All you need is to adapt the CSS-rule which steers the show mechanism for the submenu:

#nav li:hover ul{
    left:0;
}

instead of aligning it to the left, we want to align it right, so we add right:0;. However, if we do not touch the left declaration, the menu will get cut off, so instead of left:0; we write left:auto; to let the menu expand to it's intrinsic width. To accomodate for the margin of the parent li, we add the same amount as negative margin and we are done:

#nav li:hover ul{
    left:auto;
    right:0;
    margin-right:-10px;
}

you modified fiddle

Upvotes: 47

Related Questions