Untitled

dabblet.css

div, ul, li, a, span {
  margin:0;
  padding:0;
}
body { font:16px/16px Arial, Helvetica, Sans-serif; }
a {
  color:#222;
  text-decoration:none;
}
.sidebar {
  margin:0;
  border-right:1px solid #ccc;
  padding:0;
  width:199px;
  position:relative;
  font-size:13px;
}
.sidebar h5 {
  margin:15px 0 3px 10px;
  text-transform:uppercase;
  color:#bbb;
}
.sidebar >ul {
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
}
.sidebar ul { list-style:none; }
.sidebar ul li { background:#f6f6f6; }
.sidebar ul li a {
  display:block;
  margin:0;
  padding:5px 31px 5px 10px;
  background:transparent url(http://amp-tp.herokuapp.com/images/shapes/aside_arrow.png) no-repeat 95% center;
}
.sidebar ul li ul li { background:#e6e6e6; }
.sidebar ul li ul li a { padding-left:25px; }
.sidebar ul li ul li ul li { background:#f1fafe; }
.sidebar ul li ul li ul li a {
  padding-left:50px;
  background-image:none;
}
.sidebar ul li.active {
  border-top:1px solid #8dd8f8;
  border-bottom:1px solid #8dd8f8;
}
.sidebar ul li> a:hover, .sidebar ul li.active > a {
  color:#222;
  background:#c3e9fc url(http://amp-tp.herokuapp.com/images/shapes/aside_arrow_active.png) no-repeat 95% center !important;
  -webkit-transition:all 0.2s ease-in-out;
}
.sidebar ul li.active ul, .sidebar ul li.expanded ul {
  display:block;
  position:relative;
}
.sidebar ul li.active> a, .sidebar ul li.expanded> a { background:transparent url(http://amp-tp.herokuapp.com/images/shapes/aside_arrow_active.png) no-repeat 95% center; }
.sidebar ul li.expandable ul { display:none; }
.sidebar ul li.expandable:hover {
  position:relative;
  background-color:#e6e6e6;
}
.sidebar ul li.expandable:hover ul li { background-color:#e6e6e6 !important; }
.sidebar ul li.expandable:hover ul li a { padding-left:10px; }
.sidebar ul li.expandable:hover> ul {
  display:block;
  position:absolute;
  top:0;
  left:200px;
  width:200px;
  height:auto;
  z-index:50;
}

dabblet.html

<h1>Sidebar navigation, selected state</h1>

<p>The hovering effect, hover over Custom reports 6</p>
<div class="sidebar">
  <h5>Reports</h5>
  <ul>
    <li><a href="#">Customer reports 1</a></li>
    <li><a href="#">Customer reports 2</a></li>
    <li><a href="#">Customer reports 3</a></li>
    <li><a href="#">Customer reports 4</a></li>
    <li><a href="#">Customer reports 5</a></li>
    <li class="expandable">
      <a href="#">Customer reports 6</a>

      <ul>
        <li><a href="#">Most recent</a></li>
        <li><a href="#">Last 3 months</a></li>
        <li><a href="#">Last 12 months</a></li>
        <li class="expandable">
          <a href="#">Saved reports</a>

          <ul>
            <li><a href="#">Saved 001</a></li>
            <li><a href="#">Saved 002</a></li>
            <li><a href="#">Saved 003</a></li>
            <li><a href="#">Saved 004</a></li>
            <li><a href="#">Saved 005</a></li>
            <li><a href="#">Saved 006</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Customer reports 7</a></li>
    <li><a href="#">Customer reports 8</a></li>
  </ul>
</div>
<p>This sidebar is shown when element: Last 3 months is selected.</p>
<div class="sidebar">
  <h5>Reports</h5>
  <ul>
    <li><a href="#">Customer reports 1</a></li>
    <li><a href="#">Customer reports 2</a></li>
    <li><a href="#">Customer reports 3</a></li>
    <li><a href="#">Customer reports 4</a></li>
    <li><a href="#">Customer reports 5</a></li>
    <li class="expanded">
      <a href="#">Customer reports 6</a>

      <ul>
        <li><a href="#">Most recent</a></li>
        <li class="active expanded">
          <a href="#">Last 3 months</a>

          <ul>
            <li><a href="#">Saved 001</a></li>
            <li><a href="#">Saved 002</a></li>
            <li><a href="#">Saved 003</a></li>
            <li><a href="#">Saved 004</a></li>
            <li><a href="#">Saved 005</a></li>
            <li><a href="#">Saved 006</a></li>
          </ul>
        </li>
        <li><a href="#">Last 12 months</a></li>
        <li><a href="#">Saved reports</a></li>
      </ul>
    </li>
  </ul>
</div>

<p>This sidebar is shown when element: Saved 002 is selected.</p>
<div class="sidebar">
  <h5>Reports</h5>
  <ul>
    <li><a href="#">Customer reports 1</a></li>
    <li><a href="#">Customer reports 2</a></li>
    <li><a href="#">Customer reports 3</a></li>
    <li><a href="#">Customer reports 4</a></li>
    <li><a href="#">Customer reports 5</a></li>
    <li class="expanded">
      <a href="#">Customer reports 6</a>

      <ul>
        <li><a href="#">Most recent</a></li>
        <li><a href="#">Last 3 months</a></li>
        <li><a href="#">Last 12 months</a></li>
        <li class="expanded">
          <a href="#">Saved reports</a>

          <ul>
            <li><a href="#">Saved 001</a></li>
            <li class="active"><a href="#">Saved 002</a></li>
            <li><a href="#">Saved 003</a></li>
            <li><a href="#">Saved 004</a></li>
            <li><a href="#">Saved 005</a></li>
            <li><a href="#">Saved 006</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Customer reports 7</a></li>
    <li><a href="#">Customer reports 8</a></li>
  </ul>
</div>

dabblet.less

div, ul, li, a, span { margin: 0; padding: 0; }
body { font: 16px/16px Arial, Helvetica, Sans-serif; }
a { color: #222; text-decoration: none; }

/* Mixins */
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

/* Sidebar styling */
.sidebar {
  margin: 0;
  border-right: 1px solid #ccc;
  padding: 0;
  width: 199px;

  position: relative;

  font-size: 13px;

  h5 {
    margin: 15px 0 3px 10px;
    text-transform: uppercase;
    color: #bbb;
  }

  >ul {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  ul {
    list-style: none;

    li {
      background:#f6f6f6;

      a {
        display: block;
        margin: 0; padding: 5px 31px 5px 10px;

        background: transparent url(http://amp-tp.herokuapp.com/images/shapes/aside_arrow.png) no-repeat 95% center;
      }

      /* Generic styles for nested menu items */
      ul {/* Second & third level menu items */
        li {
          background: #e6e6e6;

          a {
            padding-left: 25px;
          }

          ul {
            /* Third level menu items */
            li {
              background: #F1FAFE;

              a {
                padding-left: 50px;
                background-image: none;
              }
            }
          }
        }
      }/* Nested menus */

      /* Active link */
      &.active {
        border-top: 1px solid #8DD8F8;
        border-bottom: 1px solid #8DD8F8;
      }

      &> a:hover, &.active > a {
        color: #222; 
        background: #C3E9FC url(http://amp-tp.herokuapp.com/images/shapes/aside_arrow_active.png) no-repeat 95% center!important; 

        -webkit-transition: all 0.2s ease-in-out;
      }

      &.active, &.expanded {
        ul {
          display: block;
          position: relative;
        }
        
        &> a {
          background: transparent url(http://amp-tp.herokuapp.com/images/shapes/aside_arrow_active.png) no-repeat 95% center; 
        }
      }
    }

    /* Hovering effect */
    li:not(.expanded) {
      ul { display: none; }

      &:hover {
        position: relative;
        
        background-color: #e6e6e6;
        ul li { 
          background-color: #e6e6e6!important; 
          
          a { padding-left: 10px; }
        }
        
        &> ul {
          display: block; 
          position: absolute;
          top: 0; left: 200px;
          width: 200px;
          height: auto;
          z-index: 50;
        }
      }
    }
  }
}

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}