[test] Menu

by knokit

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<div id="wrapper">
    <div class="navbar">
        <div class="group">
            <span title="Group">Group 1</span>

            <ul class="nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="1.1">
                        Item 1 <b class="caret"></b>
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="1.2">
                        Item 2 <b class="caret"></b>
                    </a>
                </li>
            </ul>
        </div>
        
        <div class="group">
            <span title="Group">Group 2</span>

            <ul class="nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="item 2.1">
                        Item 1 <b class="caret"></b>
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="item 2.2">
                        Item 2 <b class="caret"></b>
                    </a>
                </li>
            </ul>
        </div>
        
        <ul class="nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="item 5">
                    Item 5 <b class="caret"></b>
                </a>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="item 6">
                    Item 6 <b class="caret"></b>
                </a>
            </li>
        </ul>
        
        <ul class="nav pull-right">
            <li...

CSS

body {
    width: 100%;
}

#wrapper {
    padding: 40px;
}

.navbar {
    height: 40px;
    margin-bottom: 0;
    background-color: #bf000d;
    background-image: -moz-linear-gradient(top, #cc0011, #bf000d);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cc0011), color-stop(1, #bf000d));
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

    .navbar .nav > li > a {
        position: relative;
        color: #fff;
        text-shadow: none;
        padding: 10px 12px 10px;
        background: none;
    }

    .navbar .nav > .active > a,
    .navbar .nav > .active > a:hover,
    .navbar .nav > .active > a:focus {
        color: #fff;
        background: none;
    }

    .navbar .nav > li > a:hover {
        color: #fff;
        background-image: -moz-linear-gradient(top, RGBA(214,0,23,0), RGBA(115,0,13,1));
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(RGBA(214,0,23,0)), to(RGBA(84,0,51,1)));
    }

        .navbar .nav > li.dropdown > a:hover .caret {
            border-top-color: #ffffff;
            border-bottom-color: #ffffff;
        }

    .navbar .nav > li > a:before {
        position: absolute;
        display: block;
        right: 0px;
        top: 0px;
        width: 1px;
        height: 40px;
        content: '';
        background-image: -moz-linear-gradient(top, #cc0011, #910008, #bf000d);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cc0011), color-stop(0.5, #910008),color-stop(1, #bf000d));
    }

    .navbar .nav > li > a:after {
        position: absolute;
        display: block;
        left: 0px;
        top: 0px;
        width: 1px;
        height: 40px;
        content: '';
        background-image: -moz-linear-gradient(top, #D40016, #E3353D, #D40016);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D40016), color-stop(0.5,...