CSS horizontal sub-nav aligned to the right

Discussion in 'Programming' started by ernestosdigitalpoint, Apr 1, 2010.

0
  1. #1
    I keep seeing examples of sub navigations that are aligned to the left but havent found one working sub-nav that is aligned to the right. They often use position: relative but I want the nav to float the right or align right instead of left. Any experts or gurus out there who might know.


    here's a sample of one. THe problem is that the subnav goes past the to nav instead of just floating to the right of it.


    <!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>Test</title>
    <style type="text/css" media="screen">
    ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none; /*--Hide by default--*/
    width: 970px;
    background: #1376c9;
    color: #fff;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    }

    ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
    ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
    ul#topnav li span a:hover {text-decoration: underline;}

    .container {margin:0px; padding: 0px;width: 400px; width: auto; float: right; background-color: #CCCCCC;}
    ul#topnav span {float: right;}
    ul#topnav span li {font-size: 20px; float: left;}

    /*--Subnav positioning--*/
    /*ul#topnav span li span {position: relative; right: 0px; top: 20px; width: auto;}*/
    ul#topnav span li {position: relative; left: 0px; width: auto;}



    ul#topnav {
    margin: 0; padding: 0;
    float: right;
    width: 970px;
    list-style: none;
    position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
    font-size: 1.2em;
    background: url(topnav_stretch.gif) repeat-x;
    }
    ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555; /*--Divider for each parent level links--*/
    }


    ul#topnav li a {

    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
    }
    ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }

    </style>
    </head>

    <body>
    <div class="container">
    <ul id="topnav">
    <span>
    <li><a href="#">Link 1</a></li>
    <li>
    <a href="#">Link 2</a>
    <!--Subnav Starts Here-->

    <span class="myfloat">
    <a href="#">Subnav a</a> |
    <a href="#">Subnav b</a> |
    <a href="#">Subnav c</a>
    <a href="#">subnav d</a>
    </span>
    <!--Subnav Ends Here-->
    </li>
    <li><a href="#">Link 3</a></li>
    </span>
    </ul>
    </div>
    </body>

    </html>
     
    ernestosdigitalpoint, Apr 1, 2010 IP