how to move this navigation bar to the right


Tags: html,css

Problem :

I'm new to CSS and I'm trying to experiment with this code - if you want to see what it looks like go to this link: https://www.servage.net/blog/wp-content/uploads/2009/03/css-menu.html Here's the code:

<html>
    <head>
        <title>CSS based drop-down menu</title> 
    <style type="text/css">

        ul {
            font-family: Arial, Verdana;
            font-size: 14px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul li {
            display: block;
            position: relative;
            float: left;
        }
        li ul { display: none; }
        ul li a {
            display: block;
            text-decoration: none;
            color: #ffffff;
            border-top: 1px solid #ffffff;
            padding: 5px 15px 5px 15px;
            background: #2C5463;
            margin-left: 1px;
            white-space: nowrap;
        }

        ul li a:hover { background: #617F8A; }
        li:hover ul { 
            display: block; 
            position: absolute;
        }
        li:hover li { 
            float: none;
            font-size: 11px;
        }
        li:hover a { background: #617F8A; }
        li:hover li a:hover { background: #95A9B1; }

    </style>        
    </head>
    <body>

        <ul id="menu">
            <li><a href="">Home</a></li> 
            <li><a href="">About</a> 
              <ul>
                <li><a href="">The Team</a></li>
                <li><a href="">History</a></li> 
                <li><a href="">Vision</a></li> 
              </ul> 
            </li> 
            <li><a href="">Products</a> 
              <ul> 
                <li><a href="">Cozy Couch</a></li> 
                <li><a href="">Great Table</a></li> 
                <li><a href="">Small Chair</a></li> 
                <li><a href="">Shiny Shelf</a></li> 
                <li><a href="">Invisible Nothing</a></li> 
              </ul> 
            </li>
            <li><a href="">Contact</a> 
              <ul> 
                <li><a href="">Online</a></li> 
                <li><a href="">Right Here</a></li> 
                <li><a href="">Somewhere Else</a></li> 
              </ul> 
            </li> 
        </ul>   

    </body>
</html>

I have 2 questions about this: How do I make this navigation bar on the right side of the page ? Some of the tabs have drop down lists, when I add this margin-top: 50px to change the position of the navigation bar the dropdown lists move down like this enter image description here



Solution :

To move the #menu to the right and 50px down, add these properties

#menu {
    position: absolute;
    top: 50px;
    right: 0px;
}

JSFiddle

If you want to use float and margin-top instead, you must restrict the margin to the #menu

#menu {
    float: right;
    margin-top: 50px;
}

JSFiddle


    CSS Howto..

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

    How to fix element on the center of scrollable page?

    How to CENTER a Vertical Menu for ALL Screen Resolutions?

    Ruby Command Line: How can I send the CTRL-C command via text in the command line?

    How to move up an inner box and keep outer box in place with CSS?

    How to avoid CSS selector applying to more than one level of descendants

    How could I use pseudo-element :after :before conditionally

    How to add CSS to a specific div class - WordPress

    How to make Gravity Forms Responsive (left/right )?

    How to use custom css file for layout of a module in Yii2

    How to set out css properly?

    How do I get the (element with the) highest CSS z-index in a document?

    CSS and JS: How to Inflate the Size of a Tile In Grid

    How to achieve two multi-step forms, one form on each side using CSS transformation

    How to change text direction of every line of text using javascript/jquery?

    How to make CSS button appear transparent

    How do I set multiple elements' css in one page without the :not attribute?

    how to route arrow from right to down css

    How to transform a production to LL(1) for a list separated by a semicolon?

    How to following a link without modifying the displayed url and triggering css animation?

    jQuery or CSS - How do you make a link in a table row appear underlined even when the cursor is in a neighbouring cell?

    Responsive CSS, How to make clock maintain position with image on resize

    how do i get an div to stay in place while text around it gets bigger or shorter

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    How to retain rectangular border around button when clicked

    How to apply IE Fixes for LESS CSS [closed]

    how to effect td on fixed table layout

    How to centre a
    within several other
    s (using a mixture of w3.css and css)

    how to prevent shifting when changing border width

    How do you hide an HTML element based on a series of parent elements