Question

美好的一天，我需要帮助来分隔我的导航栏，WELCOME ADMIN应该在右侧，这里是我的代码。

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="right"><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>


  </nav>

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

谢谢你的回答非常需要你帮助这个项目而不是那些愿意回答的人

Answer 1

您需要将ul的宽度指定为100％，否则其上的float:left会折叠ul的宽度。

只是将最后一个li浮动到右边。

JSFiddle Demo

<强> 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;
}

Answer 2

我更正了你的css并更新了here。

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

<强> CSS

#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;
}

如何在右侧放置一个导航项目

2 个答案: