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 wordpress 如下所示：

<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

我做了一个小提琴来展示你的例子。它使用 first-child 和 last-child 伪类来设置正确的边界。去掉 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>