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>

我对此有 2 个问题：如何在页面右侧制作此导航栏？一些选项卡有下拉列表，当我添加这个 margin-top: 50px 来更改导航栏的位置时，下拉列表会像这样向下移动 在此处输入图像描述

4

4 回答 4

8

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

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

JSFiddle

如果要使用floatand margin-top，则必须将边距限制为#menu 

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

JSFiddle

于 2013-02-08T00:39:14.347 回答
2

您似乎同时针对父 ul 和子 ul

试试看：

ul {
margin-top:50px;
}

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

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

于 2013-02-08T00:31:29.237 回答
0

将 float 属性添加到您的列表中：

#menu {
  float: right;
}
于 2013-02-08T00:30:50.203 回答
0

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

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

}

您可以根据您的网站设计改变边距。如果您仍然无法在右侧移动导航，请更改位置：如静态、绝对、相对和继承。

于 2017-07-24T06:04:12.360 回答