How to show sub menu horizontally in Umbraco?

Question

I need to show my sub navigation menus in horizontal order in my main navigation. I can show the sub navigation in vertical but I don't know how to change it in horizontally.

I am using the following code to display:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{ var home = CurrentPage.Site(); }
@if (home.Children.Any())
{
    @* Get the first page in the children *@
    var naviLevel = home.Children.First().Level;

    @* Add in level for a CSS hook *@
    <ul class="level-@naviLevel" >            
        @* For each child page under the home node *@
        @foreach (var childPage in home.Children)
        {   
            if (childPage.Children.Any())
            {                    
                <li  style="width:14%;text-align:left; "class="has-child  @(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)" >
                    @if(childPage.DocumentTypeAlias == "LandingPage") 
                    {
                        <a style="padding-left:inherit;font-size:11px;" href="@childPage.Url">@childPage.Name</a>
                        @childPages(childPage.Children)
                    } else {
                        <a style="padding-left:inherit;font-size:11px;" href="@childPage.Url">@childPage.Name</a>
                    }
                </li>
            } 
            else
            {
                <li style="width:14%;padding-right:15px;text-align:left;" class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
                    <a  style="font-size:11px;padding-left:inherit;" href="@childPage.Url">@childPage.Name</a>
                </li>
            }            
        }

    </ul>

}

@helper childPages(dynamic pages)
{
    @* Ensure that we have a collection of pages *@
    if (pages.Any())
    {
        @* Get the first page in pages and get the level *@
        var naviLevel = pages.First().Level;

        @* Add in level for a CSS hook    class="sublevel level-@(naviLevel)" style="background-color:white;" *@

        <ul class="sublevel level-@(naviLevel)" style="background-color:white;position:fixed; top:150px;margin-left: 520px;width: 873px;">
            @foreach (var page in pages)
            {
              <li>
                    <a  href="@page.Url" style="font-size:12px;color:black;">@page.Name<span style="float:right;color:#FF6900;padding: 0px;margin-top: -26px;">></span></a>
                  @*  <input  src="/media/1095/site-search-image-button.png" style="height:22px;width:21px;float:right" type="image">>*@
                    @* if the current page has any children *@
                    @if (page.Children.Any())
                    {                        
                        @* Call our helper to display the children *@
                        @childPages(page.Children)
                    }
                    </li>

            }
        </ul>

    }
}

Answer 1

As a start, and this is rather horrible but as you are already using inline styles, add

<li style="display:inline"> 

To the section below

<ul class="sublevel level-@(naviLevel)" style="background-color:white;position:fixed; top:150px;margin-left: 520px;width: 873px;">
            @foreach (var page in pages)
            {
              <li style="display:inline"> 
                    <a  href="@page.Url" style="font-size:12px;color:black;">@page.Name<span style="float:right;color:#FF6900;padding: 0px;margin-top: -26px;">></span></a>
                  @*  <input  src="/media/1095/site-search-image-button.png" style="height:22px;width:21px;float:right" type="image">>*@
                    @* if the current page has any children *@
                    @if (page.Children.Any())
                    {                        
                        @* Call our helper to display the children *@
                        @childPages(page.Children)
                    }
                    </li>

            }
        </ul>