html - CSSとWordpressのメニューデザイン：アイテムをインデントしますが、行全体を強調表示します

Question

HTML / CSSの作業を行ってからかなりの時間が経ちましたが、地元の学校がWordPressでウェブサイトを再構築するのを手伝うことを志願しました。長い間休眠していた知識が私に戻ってきましたが、私はこのメニューデザインを再作成しようとして立ち往生しています：

ここに画像の説明を入力してください

これは画面の左側にあります。

Wordpressは、子アイテム用にネストされたULを使用して、アイテムをULとして作成します。これをハックして、各アイテムの間に赤いHRを挿入しました。これまでの関連CSSは次のとおりです。

（メニューを含む列の場合）

#column-left {
    width: 240px;
    float: left;
    background: #f4d2d4;
    height: 100%;
}

（メニューの外側のUL用）

#menu-list{
    padding-top: 36px;
    padding-left: 34px;
    list-style: none;
}

（メニュー内のリンク用）

#menu-list a {
    font-size: 16pt;
    text-decoration: none;
    color: #c61f26; 
}

（子アイテム用）

.children {
    padding-left: 37px;
    list-style: none;
    color: black;
}

（現在のページの強調表示用）

li.current_page_item a {
    background-color: #c61f26;
    color: white !important; 
}

現在生成されているHTMLワードプレスは次のようになります。

<ul id="menu-list">
        <li class="page_item page-item-5 current_page_item"><a href="http://development.newbridge.bathnes.sch.uk/"><hr class="hr-red"/>Home</a></li>
<li class="page_item page-item-13"><a href="http://development.newbridge.bathnes.sch.uk/news/"><hr class="hr-red"/>News</a></li>
<li class="page_item page-item-16"><a href="http://development.newbridge.bathnes.sch.uk/school-information/"><hr class="hr-red"/>School Information</a>
<ul class='children'>
    <li class="page_item page-item-20"><a href="http://development.newbridge.bathnes.sch.uk/school-information/calendar/"><hr class="hr-red"/>Calendar</a></li>
</ul>
</li>
</ul>

この設定にはさまざまな問題があり、それらを克服する方法がわかりません。ありがたい提案をいただきました。

1）列の背景色はページ全体に広がるわけではなく、メニュー項目をカバーするのに十分な大きさです。

2）子アイテムは、黒ではなく赤のテキストで表示されます。

3）子アイテム間のHRは、親アイテムのテキストと同じ深さではなく、子アイテムのテキストと同じ深さまでインデントされます。

4）強調表示されたテキストの赤い背景は、行全体ではなく、単語のみをカバーします。これは、パディングを維持しながらハイライトを取得する方法がわからないため、最大の頭痛の種です。

score 1 · Accepted Answer

私はあなたの例を示すフィドルを作りました。ファーストチャイルドとラストチャイルドの疑似クラスを使用して、正しい境界線を設定します。hrタグを削除してください。本当に必要ありません。代わりに境界線を使用してください。

これが私がデモに使用したhtmlです（いくつかのリスト項目を追加しました）：

<div id="column-left">
    <ul id="menu-list">
        <li class="page_item page-item-5 "><a href="http://development.newbridge.bathnes.sch.uk/">Home</a></li>
        <li class="page_item page-item-13 current_page_item"><a href="http://development.newbridge.bathnes.sch.uk/news/">News</a></li>
        <li class="page_item page-item-16"><a href="http://development.newbridge.bathnes.sch.uk/school-information/">School Information</a>
            <ul class='children'>
                <li class="page_item page-item-20"><a href="http://development.newbridge.bathnes.sch.uk/school-information/calendar/">Calendar</a>  </li>
                <li class="page_item page-item-20"><a href="http://development.newbridge.bathnes.sch.uk/school-information/calendar/">Calendar</a></li>
                <li class="page_item page-item-20"><a href="http://development.newbridge.bathnes.sch.uk/school-information/calendar/">Calendar</a></li>
           </ul>
        </li>
        <li class="page_item page-item-16"><a href="http://development.newbridge.bathnes.sch.uk/school-information/">School Information</a></li>
    </ul>
</div>

CSS：

#column-left {
width: 240px;
float: left;
background: #f4d2d4;
padding-top: 20px;
}

#menu-list{
list-style: none;
}


#menu-list li {
padding-left: 20px;
}

#menu-list li:first-child a {
border-top: 2px solid #c61f26;
border-bottom: none;
}

#menu-list a {
border-bottom: 2px solid #c61f26;
display:block;
height: 100%;
font-size: 16pt;
text-decoration: none;
color: #c61f26;
padding: 5px 0;

}

#menu-list li ul.children {
list-style: none;
color: black;
padding: 0;
}

#menu-list li ul.children li {
list-style: none;
padding: 0; 
}

#menu-list li ul.children li a {
border-bottom: 1px solid #fff;
color: #000;
text-indent: 30px;
}

#menu-list li ul.children li:first-child a{
border-top: none;
}

#menu-list li ul.children li:last-child a{
border-bottom: 2px solid #c61f26;
}

li.current_page_item {
background-color: #c61f26;
border: none;    
}

li.current_page_item a {
color: white !important; 
}

それが役に立てば幸い。</ p>