1

以前は非表示だった要素をモバイル ユニット (スマートフォンなど) に表示するドロップダウン メニューを作成しようとしています。現在、ドロップダウン メニューの子要素が親要素の右側に生成されるという問題があります。この動作を説明するために画像を添付しました。これらの子要素を代わりに左に生成して、スマートフォンやその他のモバイル デバイスのビューポートのサイズを大きくしないようにしたいと考えています。この件で私を助けることができる人はいますか？

CSS ドロップダウンの状況

これは、いくつかの Razor コードを含む私の 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 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;
}
4

3 に答える 3

1

ダニエルの答えは私の心を正しい方向に動かし、このスニペットはそれを解決しました:

nav ul li:hover ul
{
 display:block;
 position:absolute;
 right:15%; /* <-- This line right here did the trick! */
}
于 2012-12-05T20:47:23.243 に答える
1

これを使用してこれを解決できると思います：

nav ul li ul li {
    display: block;
    float: none;
    left: 0;
    /*change to fit*/ margin-left: -300px;
}
于 2012-12-05T20:37:08.520 に答える
0

これを試して：

nav ul ul li a {
    display:block;
    text-align:left;
}
于 2012-12-05T20:46:49.023 に答える