带有未排序列表的CSS3

Question

如上图所示，菜单（左）无法正确显示。 我想在（右）

上做菜单

我制作了float: right，right: 0px;，margin-right:0px;。所有这些都不起作用，float:right将在屏幕上显示（页面扩展到右侧）

代码：（HTML）

<div id="navwrap">
<ul class="rightmenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Menu</a>
        <ul>
            <li><a href="#">IT Helpdesk</a></li>
            <li><a href="#">Hardware</a></li>
            <li><a href="#">Web Hub</a></li>
            <li><a href="#">Logoff</a></li>
        </ul>
    </li>
</ul>
</div>

代码：（CSS）

#navwrap    { 
    width:100%; 
    height:30px;    
    margin:0;
    z-index:999;
    position:relative;
    background-color:#4c4e5a;
}

.rightmenu, .rightmenu ul, .rightmenu li, .rightmenu a { 
margin: 0;  padding: 0; border: none;   outline: none;  border: 0px;
}

.rightmenu { background-color: #4c4e5a;float: right; }
.rightmenu li { position: relative; list-style: none; float: left; display: block;}

.rightmenu li a {
    display: block; padding: 0 14px;
    margin: 6px 0;  color: #f3f3f3;
    background-color: #4c4e5a;  text-decoration: none;
    border-left: 1px solid #393942; border-right: 1px solid #393942;
}

.rightmenu li:first-child a { border-left: none; }
.rightmenu li:last-child a{ border-right: none; }  
.rightmenu li:hover > a { color: #8fde62; } 
.rightmenu ul li:last-child a { border: none; } 

.rightmenu ul {
    position: absolute;  top: 30px; left: 0;   
    opacity: 0;  background-color: #4c4e5a;
}

.rightmenu li:hover > ul {  opacity: 1; }  
.rightmenu ul li {height:0; overflow:hidden; padding: 0;   }   
.rightmenu li:hover > ul li {  height: 30px;  overflow: visible;padding: 0;} 
.rightmenu ul li a {  width: 200px;   padding: 4px 0 4px 0px;   border: none; }  

Answer 1

您可以尝试以下CSS。您需要做的是右对齐最后一个子菜单。

#navwrap    { 
    width:100%; 
    height:30px;    
    margin:0;
    z-index:999;
    position:relative;
    background-color:#4c4e5a;
}

.rightmenu, .rightmenu ul, .rightmenu li, .rightmenu a { 
margin: 0;  padding: 0; border: none;   outline: none;  border: 0px;
}

.rightmenu { background-color: #4c4e5a;float: right; }
.rightmenu li { position: relative; list-style: none; float: left; display: block;}

.rightmenu li a {
    display: block; padding: 0 14px;
    margin: 6px 0;  color: #f3f3f3;
    background-color: #4c4e5a;  text-decoration: none;
    border-left: 1px solid #393942; border-right: 1px solid #393942;
}

.rightmenu li:first-child a { border-left: none; }
.rightmenu li:last-child a{ border-right: none; }  
.rightmenu li:hover > a { color: #8fde62; } 
.rightmenu ul li:last-child a { border: none; } 

.rightmenu ul {
    position: absolute;  top: 30px; left: 0;   
    opacity: 0;  background-color: #4c4e5a;
}

.rightmenu li:last-child ul
{
  left: auto;
  right: 0
}


.rightmenu li:hover > ul {  opacity: 1; }  
.rightmenu ul li {height:0; overflow:hidden; padding: 0;   }   
.rightmenu li:hover > ul li {  height: 30px;  overflow: visible;padding: 0;} 
.rightmenu ul li a {  white-space: nowrap;   border: none; }  

变化是：

.rightmenu li:last-child ul
{
  left: auto;
  right: 0
}

.rightmenu ul li a {  white-space: nowrap;   border: none; } 

Answer 2

.rightmenu ul li a { 200px值在这里不会这么做，a是一个内联元素。尝试将其设置为display: block