ในส่วนสุดท้ายที่เราจะกำหนดการแสดงผลคือ ส่วนของ list ที่อยู่ใน navigation นั่นเอง
คำสั่ง list ของ HTML เป็นแบบนี้

<ul>
    <li></<li>
    <li></<li>
</ul>

ดังนั้นเราจะแยก CSS ออกเป็น 2 ส่วนคือ ul และ li

กำหนด CSS ในส่วนของ UL

(#containner #main #left #navigation ul) หมายความว่า ul ที่อยู่ใน #navigation เท่านั้นที่จะแสดงผลตามที่กำหนด

1. กำหนด Margin , Padding

2. คำสั่ง list นั้นจะแสดงสัญลักษณ์หน้า list แต่ละตัวด้วย ซึ่งเราจะทำการเปลี่ยนเป็นรูปสามเหลี่ยมแทน

รูปสามเหลี่ยมที่นำมาแทนสัญลักษณ์ list (arrow.gif)

---

กำหนด CSS ในส่วนของ LI

#containner #main #left #navigation li

1. กำหนดขนาดของตัวอักษร ขนาด 13px และให้ความสูงระหว่างบรรทัดเท่ากับ 20px

---

กำหนด CSS ในส่วนของ LI Link

#containner #main #left #navigation li a

ในส่วนนี้จะควบคุมการแสดลผลในส่วนที่เป็น hyperlink ของ list การตั้งค่ามีดังนี้

1. กำหนดขนาดตัวอักษร สีตัวอักษร ในส่วนของ Decoration:none ทำให้ส่วนที่เป็น link ไม่มีเส้นใต้

เมื่อสร้าง CSS เสร็จแล้วจะแสดงผลตามด้านล่าง

คลิกที่นี่เพื่อดูตัวอย่างเว็บเพจ

คลิกที่นี่เพื่อดูตัวอย่าง CSS

จะสังเกตุว่าหัวข้อในส่วน Navigation ของเรานั้นมีเพียงสีเหลืองเท่านั้น ถ้าต้องการเพิ่มสีอื่นก็ให้ คัดลอก #containner #main #left #navigation h1.yellow และเปลี่ยนจาก yellow ให้เป็น red , blue , green จากนั้นเปลี่ยนเพียงภาพพื้นหลัง ก็จะได้รายการครบ 4 สีแล้ว