试图做一个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下拉菜单，但不能让下拉元素排队到左边

回答

相关问题