CODEWITHSUNDEEP
htmlcss
elmify
elmify

Reputation: 105

how to move this navigation bar to the right

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

Upvotes: 4

Views: 91948

Answers (4)

Alok Kumar
Alok Kumar

Reputation: 121

If you are using WordPress or a static website then you have to place this code to move your navigation bar to the right side.

position: static;
top: 50px;
right: 0px;
color: black;
display: inline-block;
margin-right: 45em;

}

You can vary margin-right according to your website design. If you still not able to move navigation on the right side then change the position: Like static, absolute, relative and inherit.

Upvotes: 0

Olaf Dietsche
Olaf Dietsche

Reputation: 74098

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

Upvotes: 8

mika
mika

Reputation: 1451

you seem to be targeting both the parent ul and the childs uls

try that: 

ul {
margin-top:50px;
}

ul#menu {
float:right;
margin-top:0;
}

By adding the #menu after ul you target that specific UL and therefore override its basic ul properties

Upvotes: 2

Sergiu
Sergiu

Reputation: 311

Add float property to your list:

#menu {
  float: right;
}

Upvotes: 0

Related Questions