Question

I’m trying to make a dropdown menu to show the previously hidden elements on a mobile unit (i.e. smartphone). Currently I’m having problems with the child elements of my dropdown menu spawning to the right of its parent element. I have attached an image to illustrate this behaviour. I would very much like to get these child elements to spawn to the left instead, so that they do not increase the size of the viewport on a smartphone or other mobile device. Is anyone able to assist me in this matter?

This is my HTML code with some Razor code:

<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>

And this is my CSS code:

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

daniel’s answer nudged my mind in the right direction and this snippet solved it:

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