Html CSS&；缩进项目，但突出显示整行

我已经很久没有做任何HTML/CSS工作了，但我自愿帮助当地一所学校用WordPress重建网站。长期处于休眠状态的一些知识又回到了我的脑海中，但我一直在尝试重新创建这个菜单设计：

这是在屏幕的左侧

Wordpress将项目创建为UL，子项目使用嵌套UL。我已经破解了这个，在每个项目之间插入了一个红色的HR。到目前为止，相关的CSS是：

（对于包含菜单的列）

（用于菜单的外部UL）

（用于菜单中的链接）

（适用于子项）

（对于当前页面突出显示）

wordpress当前生成的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） 子项之间的HRs缩进深度与子项文本相同，而不是与父项文本缩进深度相同

4） 突出显示文本的红色背景仅覆盖单词，而不是整行。这是最令人头痛的问题，因为我不确定如何保持填充效果，同时仍能突出显示。

我已经展示了您的示例。它使用第一个子类和最后一个子类来设置正确的边界。去掉hr标签，你真的不需要它。改用边框

以下是我用于演示的html（添加了几个列表项）：

希望能有帮助。 ​

---

​

我们可以通过向菜单添加类来创建带有图像的导航菜单

---

太棒了，谢谢。需要一些调整，以使其与动态菜单正常工作，但我可以从这里开始。非常感谢，没问题。如果你还需要什么，尽管问吧。

#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; 
}

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

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

#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; 
}