ブロックレベルの方法でサブメニューのリンクを配置

Question

私はカップルのソリューションを試しましたが、これまでのところ意図したとおりに動作するものはありません。私はリンクがインデントの同じレベルとブロックレベルの方法であることを望みます。私はこれを達成するために絶対的な位置付けを使用せずにしようとしています。そうでなければ、コードの残りの部分を分割します。どんな助けもありがとう。

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 */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="col-md-6"> 
 
     <div class="bookmarks"> 
 
     <ul class="nav top-menu" id="affix-ul"> 
 
      <li class="link1"> 
 
       <a href="#"> 
 
       Some Text on link 1 
 
      </a> 
 
      </li> 
 
      <li class="link2"> 
 
      <a href="#"> 
 
       Some Text on link 2 
 
      </a> 
 
      </li> 
 
      <li class="link 3"> 
 
      <a href="#"> 
 
       Some Text on link 3 
 
      </a> 
 
      </li> 
 
      <li class="link4 active"> 
 
      <div class="left-side"> 
 
       <a href="#"> 
 
       <span>Some Text on link 4</span> 
 
       </a> 
 
      </div> 
 
      <div class="right-side"> 
 
       <a href="#" class="arrow-up" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne"> 
 
       <i class="fa fa-chevron-down">^
 
       </i> 
 
       </a> 
 
      </div> 
 
      <ul id="hiddenMenuOne" class="collapse second-menu"> 
 
       <li> 
 
       <a href="#">Sublink1</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Sublink2</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">This is a sublink3 with a bit more text</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">sublink4</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">sublink5</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">sublink6</a> 
 
       </li> 
 
       <li class="second-level-menu wrapper"> 
 
       <div class="left-side"> 
 
        <a href="#" class=""> 
 
        Last sublink on submenu 
 
        </a> 
 
       </div>    
 
       <div class="right-side"> 
 
        <a href="#" class="second-dropdown" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuTwo"> 
 
        <i class="fa fa-chevron-down">^ 
 
        </i> 
 
        </a> 
 
       </div> 
 
       <ul id="hiddenMenuTwo" class="collapse last-menu"> 
 
        <li> 
 
        <a href="#">Tertiary 1</a> 
 
        </li> 
 
        <li> 
 
        <a href="#">Tertiary 2</a> 
 
        </li> 
 
        <li> 
 
        <a href="#">Tertiary 3 with a second line</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div>   
 
    </div>

Answer 1

誰もが答えを知りたいだけの場合には。私はちょうど李の左のパディングを削除し、ulに高さのプロパティを追加しました