I am currently working on creating a dropdown menu to reveal hidden elements on mobile devices such as smartphones. However, I am facing an issue where the child elements of the dropdown menu are appearing to the right of the parent element instead of the left as intended. This behavior is causing the viewport size to increase on mobile devices. Can anyone provide assistance with resolving this issue?
Below is the HTML code with Razor code included:
<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>
<!-- Additional list items -->
</ul>
Below is the 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;
}
<!-- Additional CSS styles -->