CSS drop-down menu is going off screen when dropping down

Hi,
I’m not sure if there is a solution to this problem, but I have a CSS drop-down menu that is floated to the right side of my page. When the link on the far right ‘drops down’ the menu appears slightly off screen, and causes a horizontal scrolling bar. Is there any way to prevent this? I am using a combo of the Suckerfish menu and the sliding doors method. THe code is below. I appreciate all replies. Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Isoceles Tetrazoids with Chocolate Sprinkles</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

<style type="text/css">
#nav {
    width: 100%;
    background-color: #495a78;
    border-bottom: 5px solid #b09e42;
    float: right;
    padding: 0;
    margin: 0;
}

#nav ul {
    float: right;
    list-style: none;
    padding: 0;
    margin:0 20px 0 0;
}

#nav li {
 display:inline;
 margin-right: 4px;
 float: left;
 padding: 0;
}

#nav li a {
 display: block;
 background: url(i/bg_tab_right.gif) no-repeat #ab9a41 top right;
 padding: 4px 16px 1px 0px;
 font-weight: bold;
 font-size: 14px;
 color: #fff;
 text-decoration: none;
}

#nav li a span {
 background: url(i/bg_tab_left.gif) no-repeat top left;
 padding: 4px 0px 1px 15px;
}

#nav li ul {
    width: 178px;
    position: absolute;
    left: -999em;
    margin:0;
    padding:0;
    background-color: #ab9a41;
    border: 1px solid #8b7c39;
    border-bottom:0;
    font-weight: normal;
}

#nav li ul li {
    margin:0;
    padding:0;
    width: 178px;
    border-bottom: 1px solid #8b7c39;
}

#nav li ul li a {
    margin:0;
    padding:4px 5px;
    width: 168px;
    background: url(i/bg_dropdown.gif) repeat-x #ab9a41 top left;
    font-size: 12px;
}

#nav li ul li a:hover {
    padding:4px 5px;
    background: url(i/bg_dropdown2.gif) repeat-x #ab9a41 top left;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}
</style>

</head>
<body>

  <div id="nav">
  <ul>
    <li><a href="#"><span>LINK ONE</span></a>
        <ul>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
        </ul>
    </li>

    <li><a href="#"><span>LINK TWO</span></a>
        <ul>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
        </ul>
    </li>

    <li><a href="#"><span>LINK THREE</span></a>
        <ul>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
        </ul>
    </li>
                
    <li><a href="#"><span>LINK FOUR</span></a>
        <ul>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
        </ul>
    </li>
  </ul>
  </div>

</body>
</html>

Well a kind of cheat would be just to move the thing over left a little


#nav ul {
    float: right;
    list-style: none;
    padding: 0;
    margin:0 [B]61px[/B] 0 0;
}

I’m not too familiar with the solution so can’t say how or if you can align the sub-mens to the right side of the parent…

If the menu being right aligned is a requirement, I might set that right most sub-menu to be aligned with the right edge of its parent instead of with the left edge.

We’re applying the class to the <ul> instead of its parent <li> because IE doesn’t handle multiple classes correctly.

  <ul>
    <!-- ... -->
    <li><a href="#"><span>LINK FOUR</span></a>
        <ul class="last">
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
            <li><a href="example.php">Example</a></li>
        </ul>
    </li>
  </ul>
#nav ul {
    position: relative; /* containing block for positioning */
    display: inline; /* to fix IE's doubled float-margin bug */
    float: right;
    list-style: none;
    padding: 0;
    margin:0 20px 0 0;
}
#nav li:hover ul.last, #nav li.sfhover ul.last {
    left: auto;
    right: 4px; /* you might want to change this */
}

YES!

It works! I was beginning to think there was no solution. Kravvitz, you are brilliant (not to mention helpful, thorough, etc.). Thank you for your nicely explained and perfectly capable solution. You made my day!

Edit: (just wanted to mention this solution works in Firefox/Safari on Mac, and IE6 / IE7 on Windows … didn’t test the others).