CSS3與未排序列表

正如你可以在圖像中看到上面的菜單（左）不能正確顯示。我想製作菜單上的（右）

我製作了float: right,right: 0px;,margin-right:0px;。所有這些不工作，float:right將顯示關閉屏幕（該頁面被延伸到右）

enter image description here

代碼：（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; }

來源

2014-05-22 K.W.

'權：0;'去與'的位置是：絕對的;'，你試過嗎？ –

您可以嘗試以下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; }

來源

2014-05-22 02:52:52 dereli

稍作修改：'left：auto right：0'可以解決我的問題。部份。 –

.rightmenu ul li a { 200px值在這裏不會這麼做，a是一個內聯元素。嘗試將其設置爲display: block

來源

2014-05-22 02:11:45

感謝您的評論，請參閱捕獲「C」，這是結果。 –

時間爲js小提琴 –

CSS3與未排序列表

回答

相關問題