title: Positioning submenu links in block level manner
body: <p>I have tried couple solutions, but nothing that is working as I intended so far. I just want the links to be in the same level of indentation and in a block level manner. I am trying to get this accomplish without using absolute positioning, otherwise it breaks the rest of the code. Any help would be appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin-left: 40px; }
  
  .bookmarks {
    border: 1px solid gray;
    width: 200px; }
    .bookmarks ul {
      list-style-type: none; }
  
  .link4 {
    box-sizing: border-box;
    display: inline-block;
    background-color: pink; }
    .link4 .left-side {
      height: 100%;
      width: 80%;
      color: white;
      background-color: blue;
      float: left; }
    .link4 .right-side {
      height: 100%;
      width: 20%;
      background-color: yellow;
      float: right; }
  
  .second-menu li {
    background-color: lightgreen; }
  
  .last-menu li {
    background-color: lightgray; }
  
  /*# sourceMappingURL=test2.css.map */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/&gt;
  &lt;div class="col-md-6"&gt;
        &lt;div class="bookmarks"&gt; 
          &lt;ul class="nav top-menu" id="affix-ul"&gt;
            &lt;li class="link1"&gt;
                &lt;a href="#"&gt;
                Some Text on link 1
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="link2"&gt;
              &lt;a href="#"&gt;
                Some Text on link 2
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="link 3"&gt;
              &lt;a href="#"&gt;
                Some Text on link 3
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="link4 active"&gt;
              &lt;div class="left-side"&gt;
                &lt;a href="#"&gt;
                  &lt;span&gt;Some Text on link 4&lt;/span&gt;
                &lt;/a&gt;  
              &lt;/div&gt;
              &lt;div class="right-side"&gt;
                &lt;a href="#" class="arrow-up" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne"&gt;
                  &lt;i class="fa fa-chevron-down"&gt; ^
                  &lt;/i&gt;
                &lt;/a&gt; 
              &lt;/div&gt;
              &lt;ul id="hiddenMenuOne" class="collapse second-menu"&gt;
                &lt;li&gt;
                  &lt;a href="#"&gt;Sublink1&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="#"&gt;Sublink2&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="#"&gt;This is a sublink3 with a bit more text&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="#"&gt;sublink4&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="#"&gt;sublink5&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="#"&gt;sublink6&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="second-level-menu wrapper"&gt;
                  &lt;div class="left-side"&gt;
                    &lt;a href="#" class=""&gt;
                    Last sublink on submenu
                    &lt;/a&gt;
                  &lt;/div&gt;             
                  &lt;div class="right-side"&gt;
                    &lt;a href="#" class="second-dropdown" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuTwo"&gt;
                      &lt;i class="fa fa-chevron-down"&gt;^
                      &lt;/i&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;ul id="hiddenMenuTwo" class="collapse last-menu"&gt;
                    &lt;li&gt;
                      &lt;a href="#"&gt;Tertiary 1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href="#"&gt;Tertiary 2&lt;/a&gt;
                      &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href="#"&gt;Tertiary 3 with a second line&lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;   
          &lt;/ul&gt;
        &lt;/div&gt;         
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>