Clever Geek Handbook

How to move this navbar to the right

I am new to CSS and I am trying to experiment with this code - if you want to see how it looks, 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: How do I make this navigation bar on the right side of the page? Some tabs have dropdowns, when I add this margin-top: 50px to change the position of the navbar, the dropdowns move down enter image description here

+3


source to share


4 answers


To move #menu

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 should limit the size of the field#menu 

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

JSFiddle

+5


source


you seem to be targeting both parent ul and childs uls

try this:



ul {
margin-top:50px;
}

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

By adding #menu after the ul you are targeting that particular UL and therefore override its main ul properties

+2


source


Add float property to your list:

#menu {
  float: right;
}
0


source


If you are using WordPress or a static website, you need to put this code in order to move the navigation bar to the desired direction.

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

}

You can change the margin to the right of your site. If you still can't move the navigation on the right side, change the position: as static, absolute, relative and inherited.

0


source






More articles:


All Articles