jQuery UI tabs with vertical navigation

I am currently working on a settings view for the WebConsole application. This view will consist of many smaller views for editing configuration. I am using jQuery UI is the obvious choice for me was Tabs control available in this library. Unfortunately I was not very happy with its default layout. The problem was that my main menu is laid out horizontally so I wanted to distinguish somehow tabs which are just below it. I have solved it changing navigation in tabs from horizontal to vertical. Fortunately it turned out very easy and required only some CSS. Below I am presenting the result, CSS and HTML/Razor source code.

jQuery UI tabs with vertical navigation

HTML/Razor source code

@model ByteCarrot.WebConsole.Web.Controllers.Settings.SettingsViewModel</pre>
<div id="settings">
<ul>
	<li><a href="@Url.Action(MVC.Account.List())">Users</a></li>
	<li><a href="@Url.Action(MVC.Account.List())">Settings 1</a></li>
	<li><a href="@Url.Action(MVC.Account.List())">Settings 2</a></li>
</ul>
</div>
<script type="text/javascript">
     $(function () {
         $("#settings").tabs();
     });
</script>

CSS source code

div#settings {
    position: relative;
    padding-left: 200px;
}

div#settings > div {
    min-height: 300px;
}

div#settings .ui-tabs-nav {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 200px;
    padding: 5px 0px 5px 5px;
}

div#settings .ui-tabs-nav li {
    left: 0px;
    width: 195px;
    border-right: none;
    overflow: hidden;
    margin-bottom: 2px;
}

div#settings .ui-tabs-nav li a {
    float: right;
    width: 100%;
    text-align: right;
}

div#settings .ui-tabs-nav li.ui-tabs-selected {
    border: none;
    border-right: solid 1px #fff;
    background: none;
    background-color: #fff;
    width: 200px;
}

If you are fan of .less project here is the same CSS in LESS format:

div#settings
{
    position: relative;
    padding-left: 200px;

    > div
    {
        min-height: 300px;
    }

    .ui-tabs-nav
    {
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 200px;
        padding: 5px 0px 5px 5px;

        li
        {
            left:  0px;
            width: 195px;
            border-right: none;
            overflow: hidden;
            margin-bottom: 2px;

            a
            {
                float: right;
                width: 100%;
                text-align: right;
            }
        }

        li.ui-tabs-selected
        {
            border: none;
            border-right: solid 1px #fff;
            background: none;
            background-color: #fff;
            width: 200px;
        }
    }
}

I hope it will be useful.