如何将这个导航栏移动到右侧

我是新来的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个问题：如何将此导航栏放在页面的右侧？某些选项卡已下拉列表，当我加入这个边距：50像素更改导航栏的下拉列表中向下移动，这样 enter image description here

来源

2013-02-08 elmify

要移动#menu的权利和50px下，添加这些特性

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

JSFiddle

如果你想使用float和margin-top而必须限制缘至#menu

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

JSFiddle

来源

2013-02-08 00:39:14

谢谢你，这工作 – elmify

float属性添加到列表中的位置：

#menu { 
    float: right; 
}

来源

2013-02-08 00:30:50 Sergiu

你似乎是靶向父UL和孩子的ULS

尝试：

ul { 
margin-top:50px; 
} 

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

通过UL认证后加入#menu您定位特定的上行，因此覆盖其基本性能UL

来源

2013-02-08 00:31:29 mika

它将其移到右侧，但下拉列表和导航栏之间仍存在差距 – elmify

得到了链接分享？尝试使用http://jsfiddle.net – mika

试试这个[JSFiddle]（http://jsfiddle.net/4BfUU/） –

如果您正在使用WordPress或静态网站，那么你必须把这个代码添加到您的导航栏移动到右侧。

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

}

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

来源

2017-07-24 06:04:12

如何将这个导航栏移动到右侧

回答

相关问题