Html 如何在右侧放置单个导航项

你好，我需要帮助分离我的导航栏欢迎管理员应该在右边这里是我的代码

HTML

---

感谢您的回答本项目非常需要您的帮助感谢那些愿意回答的人您需要将

ul

的宽度指定为100%，否则其上的

float:left

会折叠

ul

的宽度

只需将最后一个

li

向右浮动即可

CSS

#menu {
    background:#000;
    width:100%;
    margin-top:0px;
    height:40px;    
    border-radius: 3px; 
}


#menu ul ul {
    display: none;
}

#menu ul li:hover > ul {
    display: block;
}

#menu ul { 
    background: #000;
    width:100%;
    padding: 0px;
    border-radius: 5px;
    float:left;
    list-style: none;
    margin-top:-20px;
    position: relative;
    display: inline-table;
}

#menu ul:after {
    content: ""; clear: both; display: block;
}

#menu ul li {
    float: left;
}
#menu ul li:hover {
    color:#fff; 
}
#menu ul li:hover a {
    background:#fff;
    color: #000;
}

#menu ul li a {
    display: block; margin-top:20px;
    padding:10px 5px;
    color: #FFF; text-decoration: none;

}

#menu ul ul {
    background: #fff;
    padding:0;
    position: absolute;
    top: 80px;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
#menu ul ul li {
    float: none; 
    position: relative;
}
#menu ul ul li a {
    padding: 15px 40px;
    color: #fff;
}   

#menu ul ul li a:hover {
    background: #000;
    color:#fff;
}

#menu ul li.right {
    float:right;
}

---

我已经纠正了你的css和更新

html

<div id="menu">
  <ul>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
      <ul>
        <li><a href="#">item1</a> </li>
        <li><a href="#">item1</a> </li>
        <li><a href="#">item1</a> </li>
      </ul>
    </li>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
      <ul>
        <li><a href="#">item1</a> </li>
        <li><a href="#">item1</a> </li>
        <li><a href="#">item1</a> </li>
      </ul>
    </li>
    <li class="last">
    <a href="#">Welcome Admin</a>
    <ul>
      <li><a href="#">Subitem One</a></li>
      <li><a href="#">Subitem Two</a></li>
      <li><a href="#">Subitem Three</a> </li>
    </ul>

    </li>
  </ul>

</div>

---

您在哪里打开

，在哪里关闭

？导航在结束后打开，导航在结束前关闭。我已经纠正了一些问题。请检查相同的链接，并向上投票，如果它是适合你的。谢谢，先生，我怎样才能改变右边下拉菜单的位置呢。我应该在右边缩进看看下拉列表的内容谢谢

#menu {
    background:#000;
    width:100%;
    margin-top:0px;
    height:40px;    
    border-radius: 3px; 
}


#menu ul ul {
    display: none;
}

#menu ul li:hover > ul {
    display: block;
}

#menu ul { 
    background: #000;
    width:100%;
    padding: 0px;
    border-radius: 5px;
    float:left;
    list-style: none;
    margin-top:-20px;
    position: relative;
    display: inline-table;
}

#menu ul:after {
    content: ""; clear: both; display: block;
}

#menu ul li {
    float: left;
}
#menu ul li:hover {
    color:#fff; 
}
#menu ul li:hover a {
    background:#fff;
    color: #000;
}

#menu ul li a {
    display: block; margin-top:20px;
    padding:10px 5px;
    color: #FFF; text-decoration: none;

}

#menu ul ul {
    background: #fff;
    padding:0;
    position: absolute;
    top: 80px;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
#menu ul ul li {
    float: none; 
    position: relative;
}
#menu ul ul li a {
    padding: 15px 40px;
    color: #fff;
}   

#menu ul ul li a:hover {
    background: #000;
    color:#fff;
}

#menu ul li.right {
    float:right;
}

<div id="menu">
  <ul>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
      <ul>
        <li><a href="#">item1</a> </li>
        <li><a href="#">item1</a> </li>
        <li><a href="#">item1</a> </li>
      </ul>
    </li>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
      <ul>
        <li><a href="#">item1</a> </li>
        <li><a href="#">item1</a> </li>
        <li><a href="#">item1</a> </li>
      </ul>
    </li>
    <li class="last">
    <a href="#">Welcome Admin</a>
    <ul>
      <li><a href="#">Subitem One</a></li>
      <li><a href="#">Subitem Two</a></li>
      <li><a href="#">Subitem Three</a> </li>
    </ul>

    </li>
  </ul>

</div>

#menu {
    background:#000;
    width:100%;
    height:40px;
    border-radius: 3px;
    float:left;
}
#menu ul ul {
    display: none;
}
#menu ul li:hover > ul {
    display: block;
}
#menu ul {
    padding: 0px;
    border-radius: 5px;
    list-style: none;
    margin:0;
    position: relative;
    display: block;
}
#menu ul:after {
    content:"";
    clear: both;
    display: block;
}
#menu ul li {
    float: left;
}
#menu ul li:hover {
    color:#fff;
}
#menu ul li:hover a {
    background:#fff;
    color: #000;
}
#menu ul li a {
    display: block;
    padding:0 10px;
    color: #FFF;
    text-decoration: none;
    line-height:40px;
}
#menu ul ul {
    background: #fff;
    padding:0;
    position: absolute;
    top: 40px;
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
}
#menu ul ul li {
    float: none;
    position: relative;
}
#menu ul ul li a {
    padding: 15px 40px;
    color: #fff;
}
#menu ul ul li a:hover {
    background: #000;
    color:#fff;
}
#menu ul li.last {
    float:right;
}