Question

我是CSS新手，我正在尝试使用此代码 - 如果您想查看它的样子，请转到此链接：https://www.servage.net/blog/wp-content/uploads/2009/03/css-menu.html 这是代码：

<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>

我有两个问题：如何在页面右侧创建此导航栏？一些选项卡有下拉列表，当我添加此margin-top：50px来更改导航栏的位置时，下拉列表会向下移动 enter image description here

Answer 1

要向右移动#menu并向下移动50px，请添加这些属性

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

JSFiddle

如果您想使用float和margin-top，则必须将保证金限制为#menu

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

JSFiddle

Answer 2

您似乎同时针对父级ul和子级用户

试试：

ul {
margin-top:50px;
}

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

通过在ul之后添加#menu，您可以定位特定的UL，从而覆盖其基本的ul属性

Answer 3

将float属性添加到列表中：

#menu {
  float: right;
}

Answer 4

如果您使用的是WordPress或静态网站，则必须放置此代码才能将导航栏移至右侧。

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

}

您可以根据您的网站设计改变保证金权利。如果您仍然无法在右侧移动导航，则更改位置：如静态，绝对，相对和继承。

如何将此导航栏移动到右侧

4 个答案: