未分類リストとリストul li - 垂直リスト - 子供を選択するonclick

Question

私のテンプレート（htmls、css）に次のコードがあります。なぜこれがul - > li - > ul - > li wayのように設計されているのかはわかりません。すべてが正常に動作し

function loadRequiredProducts() { 

     var ul = document.getElementById('viewBy2'); 
     ul.onclick = function(event) { 
     var target = getEventTarget(event); 
     var range = target.innerHTML; 
     range = range.replace(/[^0-9]/g, ''); 
     var max = parseInt(0,10) + parseInt(range,10); 

    // here I call another javascript function which makes ajax call and loads the products 
     } 
    } 
function getEventTarget(e) { 
     e = e || window.event; 
     return e.target || e.srcElement; 
    } 

の下に選択した製品をロードする

<div id="limiter"> 
       <label>View: </label> 
     <ul id="viewBy"> 
       <li id="viewByli5"><a onclick="javascript:loadRequiredProducts()" href="#">5<span class="right-arrow"></span></a> 
       <ul id="viewBy2"> 
        <li id="viewByli6"><a onclick="javascript:loadRequiredProducts()" href="#">6</a></li> 
        <li id="viewByli7"><a onclick="javascript:loadRequiredProducts()" href="#">7</a></li> 
       </ul> 
       </li> 
      </ul> 
<div> 

dropdown appears like this と私のjavascriptのです。しかし、私は選択された数量をドロップダウンに表示する方法を見つけることができません（実際にはドロップダウンではなく親のulへ）。 6または7をクリックして6または7の製品をロードしても、常に5が表示されます。

誰かが私に助言してくれますか？前もって感謝します。

cssこのHTMLコードの周りを以下に示します。 （リミッタは親divタグ名）

#limiter { 
    float: right; 
    font-size: 14px; 
    margin-top: 0px; 
} 
#limiter ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: inline; 
} 
#limiter a:link, #limiter a:visited { 
    text-decoration: none; 
    background-color: #f8f8f8; 
    border: 0px solid #ddd; 
    border-radius: 0px; 
    display: inline-block; 
    padding: 0px; 
} 
#limiter li { 
    background: none repeat scroll 0 0 #f8f8f8; 
    cursor: pointer; 
    margin: 0 auto; 
    outline: medium none; 
    padding: 5px 0px 5px 10px; 
    position: relative; 
    width: 50px; 
    float: left; 
    color: #333; 
    text-align: left; 
    border: 1px solid #eaeaea; 
} 
#limiter .right-arrow { 
    float: right; 
    margin-left: 6px; 
} 
#limiter li li { 
    width: 50px; 
    border-top: 0px #f5f5f5 solid; 
} 
#limiter li li a:hover { 
    color: #FFD400; 
} 
#limiter li:hover { 
    color: #fff; 
} 
#limiter ul ul { 
    position: absolute; 
    visibility: hidden; 
    left: -1px; 
    top: 27px; 
    background: none repeat scroll 0 0 #fff; 
    z-index: 10000; 
    color: #000; 
    border-top: none; 
    border: 0px #f5f5f5 solid; 
} 
#limiter ul ul ul { 
    position: absolute; 
    left: 100%; 
    top: -2px; 
    border: solid 1px transparent; 
} 
#limiter li:hover > ul { 
    visibility: visible; 
} 

コーディング標準の改善に関するご意見をお待ちしております。

Answer 1

CSSを投稿できますか？多分あなたが試すことができる

ul>li>ul>li{ 
    display: inline-block; 
}