試圖做一個CSS下拉菜單，但不能讓下拉元素排隊到左邊

我試圖做一個下拉菜單來顯示移動單元（即智能手機）上以前隱藏的元素。目前，我的下拉菜單的子元素出現在其父元素右側，存在問題。我附上了一張圖片來說明這種行爲。我非常希望將這些子元素生成到左側，以便它們不會增加智能手機或其他移動設備上視口的大小。有人能幫助我解決這個問題嗎？試圖做一個CSS下拉菜單，但不能讓下拉元素排隊到左邊

CSS dropdown situation

這是我的HTML代碼一些剃刀代碼：

<nav> 
<ul> 
    <li class="@(controllerName == "Home" && actionName == "Index"?" CurrentActiveLink":"")">@Html.ActionLink("Hjem", "Index", "Home")</li> 
    <li class="@(controllerName == "Home" && actionName =="Tickets"?" CurrentActiveLink":"")">@Html.ActionLink("Billetter", "Tickets", "Home")</li> 
    <li class="no-portrait [email protected](controllerName =="Activities" && actionName == "Index"?" CurrentActiveLink":"")">@Html.ActionLink("Aktiviteter", "Index", "Activities")</li> 
    <li class="@(controllerName == "Home" && actionName =="InfoAndFAQ"?"CurrentActiveLink":"")">@Html.ActionLink("Info og FAQ", "InfoAndFAQ", "Home")</li> 
    <li class="no-portrait @(controllerName == "Home" && actionName == "Parents"?"CurrentActiveLink":"")">@Html.ActionLink("Til de foresatte", "Parents", "Home")</li> 
    <li class="no-portrait"><a href="http://banzaicon.net/forum">Forum</a></li> 
    <li class="[email protected](controllerName == "Home" && actionName =="ContactUs"?" CurrentActiveLink":"")">@Html.ActionLink("Kontakt arrangørene", "Contact", "Home")</li> 
    <li class="only-mobile"><a href="#">&gt;</a> 
     <ul> 
      <li>@Html.ActionLink("Til de foresatte", "Parents", "Home")</li> 
      <li><a href="http://banzaicon.net/forum">Forum</a></li> 
      <li>@Html.ActionLink("Kontakt arrangørene", "Contact", "Home")</li> 
     </ul> 
    </li> 
</ul>

，這是我的CSS代碼：

nav 
{ 
width:100%; 
text-align:right; 
margin-bottom:2px; 
} 

nav ul 
{ 
margin:0; 
padding:0; 
} 

nav ul li 
{ 
list-style-type:none; 
display:inline-block; 
border-top-left-radius:5px; 
border-top-right-radius:5px; 
background-color:#CCC; 
padding:10px; 
font-size:16px; 
font-weight:bold; 
position:relative; 
} 

nav ul li:hover, nav ul li.CurrentActiveLink 
{ 
background-color:White; 
} 

nav a, nav a:visited 
{ 
color:Blue; 
text-decoration:none; 
} 

nav ul li:hover ul 
{ 
display:block; 
position:absolute; 
} 

nav ul li ul li 
{ 
display:block; 
float:none; 
left:0; 
} 

nav ul li ul a, nav ul li ul a:visited 
{ 
white-space:nowrap; 
} 

nav ul li ul 
{ 
display:none; 
margin:none; 
padding:none; 
}

來源

2012-12-05 Maritim

丹尼爾的回答捅了捅我的心在正確的方向，這個片段解決了它：

nav ul li:hover ul 
{ 
display:block; 
position:absolute; 
right:15%; /* <-- This line right here did the trick! */ 
}

來源

2012-12-05 20:47:23 Maritim

我認爲你可以解決這個問題通過使用：

nav ul li ul li { 
    display: block; 
    float: none; 
    left: 0; 
    /*change to fit*/ margin-left: -300px; 
}

來源

2012-12-05 20:37:08 daniel

這並沒有解決它，但它激發了我去嘗試別的東西這確實解決了它。我會盡快發佈答案。謝謝你讓我的腦子輕輕一下！：d – Maritim

試試這個：

nav ul ul li a { 
    display:block; 
    text-align:left; 
}

來源

2012-12-05 20:46:49 rdiazv

試圖做一個CSS下拉菜單，但不能讓下拉元素排隊到左邊

回答

相關問題