Page History

<div class="aui-tabs horizontal-tabs" id="tabs-example"><style>

.submenu {
    <ul class="tabs-menu">
        <li class="menu-item active-tab">margin-left: -14px; /* Отступ от левого края сайта */
    margin-right: auto;
       <a href="#tabs-example-first"><strong>Tab 1 - Active</strong></a>
        </li>margin-top: -105px; /* Отступ от верхнего края сайта */
    width: 450px; /* длина <li class="menu-item">строки меню*/
    position: fixed;
       <a href="#tabs-example-second"><strong>Tab 2</strong></a>
        </li>
        <li class="menu-item">z-index: 999;
}

#nav2, #nav2 ul {
            <a href="#tabs-example-third"><strong>Tab 3 has a very long tab name</strong></a>list-style: none outside none;
        </li>margin: 0;
    padding:    <li class="menu-item">0;
}
#nav2 {
    background-color: white; /* Цвет полосы меню   <a href="#tabs-example-fourth"><strong>Tab4hasaveryverylongnonspacedname</strong></a>- белый*/
    float: left;
   </li>
    </ul> margin-left: 10px;
    <div class="tabs-pane active-pane" id="tabs-example-first">margin-right: 1%;
    width: 100%; /* длина <h2>This is Tab 1</h2>
строки меню*/
    position: relative;
}

#nav2 > li {
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.</p>
    </div>
    <div class="tabs-pane" id="tabs-example-second">
        <h2>This is Tab 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.</p>
    </div>
    <div class="tabs-pane" id="tabs-example-third">
        <h2>This is Tab 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.</p>
    </div>
    <div class="tabs-pane" id="tabs-example-fourth">
        <h2>This is Tab 4</h2>
        <p>Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.</p>
    </div>
</div><!-- // .aui-tabs -->float: left;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav2 li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav2 > li > a {
    color: #3b73af;
    display: block;
    font-size: 1.0em; /* Размер шрифта главного меню */
    line-height: 39px;
    padding: 0 10px;
    /* text-transform: uppercase; */
}
#nav2 > li:hover > a, #nav > a:hover {
    background-color: #3b73af; /* фон выделенного элемента подменю */
    color: #FFFFFF;
}
#nav2 li.active > a {
    background-color: #205081; /* Цвет блока меню при клике курсором мыши - голубой */
    color: #FFFFFF;
}

</style>