สวัสดีค่ะ

วันนี้เราจะมาทำเมนูใต้หัวบล็อกกันนะ ตัวอย่างก็คือ~

สวยใช่ป่าว~

ง่ายๆนะ เราต้องเอาโค้ดส่วนนี้ไปใส่ที่ script area

<style type="text/css"><br> <br>/*Credits: Dynamic Drive CSS Library */<br>/*URL: //www.dynamicdrive.com/style/ */<br> <br>#tabs {<br> float:left;<br> width:100%;<br> font-size:93%;<br> line-height:normal;<br> border-bottom:1px solid #666;<br> margin-bottom:1em; /*margin between menu and rest of page*/<br> overflow:hidden;<br> }<br> <br>#tabs ul {<br> margin:0;<br> padding:10px 10px 0 0px;<br> list-style:none;<br> <br> }<br> <br>#tabs li {<br> display:inline;<br> margin:0;<br> padding:0;<br> }<br> <br>#tabs a {<br> float:left;<br> background:url("//www.dynamicdrive.com/cssexamples/media/right.png") no-repeat left top;<br> margin:0;<br> padding:0 0 0 6px;<br> text-decoration:none;<br> }<br> <br>#tabs a span {<br> float:left;<br> display:block;<br> background:url("//www.dynamicdrive.com/cssexamples/media/right.png") no-repeat right top;<br> padding:6px 15px 4px 6px;<br> margin-right:2px;<br> color:#FFF;<br> }<br> <br>/* Commented Backslash Hack hides rule from IE5-Mac */<br>#tabs a span {float:none;}<br> <br>/* End IE5-Mac hack */<br>#tabs a:hover span {<br> }<br> <br>#tabs a:hover {<br> background-position:0% -42px;<br> }<br> <br>#tabs a:hover span {<br> background-position:100% -42px;<br> }<br> <br></style>

จากนั้นนำส่วนนี้ไปวางที่ slogan

<div id="tabs">

  <ul>

    <li></li>

    <li><a href="#"><span>Menu 1</span></a></li>

    <li><a href="#"><span>Menu 2</span></a></li>

    <li><a href="#"><span>Menu 3</span></a></li>

    <li><a href="#"><span>Menu 4</span></a></li>

    <li><a href="#"><span>Menu 5</span></a></li>

    <li><a href="#"><span>Menu 6</span></a></li>

  </ul>

</div>

หมายเหตุ *การแสดงผลในส่วนหน้าบล็อกค่อนข้างช้าเล็กน้อยขึ้นอยู่กับความเร็วเน็ตและความเร็วคอมของคุณ คิคิ~