尝试制作一个CSS下拉菜单，但不能让下拉元素排成一行

Question

我正在尝试制作一个下拉菜单，以便在移动设备（即智能手机）上显示以前隐藏的元素。目前，我的下拉菜单的子元素出现在其父元素右侧，我遇到了问题。我附上了一张图片来说明这种行为。我非常希望将这些子元素生成到左侧，这样它们就不会增加智能手机或其他移动设备上视口的大小。有人能帮我解决这个问题吗？

这是我的HTML代码，包含一些Razor代码：

<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 yes-landscape@(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="no-portrait@(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;
}

Answer 1

我认为您可以使用以下方法解决此问题：

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

Answer 2

丹尼尔的回答让我的思绪朝着正确的方向发展，这个片段解决了它：

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

Answer 3

试试这个：

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