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）突出顯示的文本的紅色背景只覆蓋單詞，而不是整行。這是最令人頭疼的事情，因爲我不確定我如何保持填充並仍然突出顯示。

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

我們可以通過簡單地向該菜單添加類來創建帶有圖像的導航菜單。