logo标签列表

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

htmlcss
4

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

我有两个问题： 1. 如何将此导航栏放在页面的右侧？ 2. 有些选项卡有下拉菜单，当我添加margin-top: 50px来更改导航栏的位置时，下拉菜单会向下移动，如图所示： enter image description here
4个回答
8
将 #menu 向右移动并向下移动 50px，请添加以下属性。
#menu {
    position: absolute;
    top: 50px;
    right: 0px;
}

JSFiddle

如果您想使用float和margin-top，则必须将边距限制在#menu上。

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

JSFiddle

2

你似乎同时针对父级ul和子级uls进行定位。

尝试这样做：

ul {
margin-top:50px;
}

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

通过在ul后添加#menu，您可以针对特定的UL覆盖其基本UL属性。
它将其向右移动，但下拉列表和导航栏之间仍然存在间隙。 - elmify
0
如果您正在使用WordPress或静态网站，则必须放置此代码以将导航栏移动到右侧。
position: static;
top: 50px;
right: 0px;
color: black;
display: inline-block;
margin-right: 45em;

}

您可以根据您的网站设计来改变margin-right。如果您仍然无法将导航移动到右侧，则更改位置：如静态、绝对、相对和继承。

0

在你的列表中添加浮点属性：

#menu {
  float: right;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接