html - 尝试制作 CSS 下拉菜单，但无法让下拉元素在左侧对齐

Question

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

这是我的 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;
}