CSS＆amp;中的菜单设计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）突出显示文本的红色背景仅覆盖单词，而不是整行。这是最让人头痛的问题，因为我不确定如何保持填充并仍能突出显示。

Answer 1

我做了Fiddle显示你的例子。它使用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; 
}

希望它有所帮助。     

Answer 2

我们可以通过简单地将类添加到该菜单来创建带图像的导航菜单。