เคล็ดลับ: เมนูนำทางที่สอดคล้องกับมาตรฐานเว็บ

#นำทาง {
ความสูงของบรรทัด: 24px; list-style-type: none;
-

#nav อา {
จอแสดงผล: บล็อก ความกว้าง: 80px;
-

#nav:link {
สี:#666; ตกแต่งข้อความ:ไม่มี;
-
#nav a: เยี่ยมชม {
สี:#666;ตกแต่งข้อความ:ไม่มี;
-
#nav a:โฮเวอร์ {
สี:#FFF;ตกแต่งข้อความ:none;font-weight:bold;
-

#นาฟลี {
ลอย: ซ้าย; ความกว้าง: 80px;
-
#nav li a:โฮเวอร์{
พื้นหลัง:#999;
-
#นาฟลิอุล{
ความสูงของบรรทัด: 27px; list-style-type: none;
ซ้าย: -999em; ความกว้าง: 180px;
-
#nav li ul li{
ลอย: ซ้าย; ความกว้าง: 180px;
พื้นหลัง: #F6F6F6;
-

#nav li ul a{
จอแสดงผล: บล็อก ความกว้าง: 156px;
-

#nav li ul a:link {
สี:#666; ตกแต่งข้อความ:ไม่มี;
-
#nav li ul a: เยี่ยมชม {
สี:#666;ตกแต่งข้อความ:ไม่มี;
-
#nav li ul a:hover {
สี:#F3F3F3;การตกแต่งข้อความ:ไม่มี;น้ำหนักแบบอักษร:ปกติ;
พื้นหลัง:#C00;
-

#nav li:โฮเวอร์ ul {
ซ้าย: อัตโนมัติ;
-
#nav li.sfhover ul {
ซ้าย: อัตโนมัติ;
-
#เนื้อหา {
ชัดเจน: ซ้าย;
-

-
</สไตล์>

<script type=text/javascript><!--//--><![CDATA[//><!--
ฟังก์ชั่น menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
สำหรับ (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=ฟังก์ชั่น() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
-
sfEls[i].onMouseDown=ฟังก์ชั่น() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
-
sfEls[i].onMouseUp=ฟังก์ชัน() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
-
sfEls[i].onmouseout=ฟังก์ชั่น() {
this.className=this.className.replace(regExp ใหม่("( ?|^)sfhover\b"),

-
-
-
-
window.onload=menuFix;

//--><!]]></script>

</หัว>
<ร่างกาย>

<ul id="nav">
<li><a href="#">การแนะนำผลิตภัณฑ์</a>
<ul>
<li><a href="#">ผลิตภัณฑ์ 1</a></li>
<li><a href="#">ผลิตภัณฑ์ 1</a></li>
<li><a href="#">ผลิตภัณฑ์ 1</a></li>
<li><a href="#">ผลิตภัณฑ์ 1</a></li>
<li><a href="#">ผลิตภัณฑ์ 1</a></li>
<li><a href="#">ผลิตภัณฑ์ 1</a></li>
</ul>
</li>
<li><a href="#">แนะนำบริการ</a>
<ul>
<li><a href="#">บริการ 2</a></li>
<li><a href="#">บริการ 2</a></li>
<li><a href="#">บริการ 2</a></li>
<li><a href="#">บริการ 2 บริการ 2</a></li>
<li><a href="#">บริการสอง บริการสอง บริการสอง</a></li>
<li><a href="#">บริการ 2</a></li>
</ul>
</li>
<li><a href="#">เรื่องราวความสำเร็จ</a>
<ul>
<li><a href="#">กรณีที่ 3</a></li>
<li><a href="#">กรณี</a></li>
<li><a href="#">กรณีที่ 3 กรณีที่ 3</a></li>
<li><a href="#">กรณีที่สามกรณีที่สามกรณีที่สาม</a></li>
</ul>
</li>
<li><a href="#">เกี่ยวกับเรา</a>
<ul>
<li><a href="#">เราสี่คน</a></li>
<li><a href="#">เราสี่คน</a></li>
<li><a href="#">เราสี่คน</a></li>
<li><a href="#">เราโฟร์ 111</a></li>
</ul>
</li>

<li><a href="#">การสาธิตออนไลน์</a>
<ul>
<li><a href="#">สาธิต</a></li>
<li><a href="#">สาธิต</a></li>
<li><a href="#">สาธิต</a></li>
<li><a href="#">เดโมเดโมเดโม</a></li>
<li><a href="#">เดโมเดโมเดโม</a></li>
<li><a href="#">สาธิต</a></li>
<li><a href="#">เดโมเดโมเดโม</a></li>
<li><a href="#">เดโมเดโมเดโมเดโม</a></li>
</ul>
</li>
<li><a href="#">ติดต่อเรา</a>
<ul>
<li><a href="#">ติดต่อติดต่อติดต่อติดต่อ</a></li>
<li><a href="#">ติดต่อติดต่อ</a></li>
<li><a href="#">ติดต่อ</a></li>
<li><a href="#">ติดต่อ</a></li>
<li><a href="#">ติดต่อ</a></li>
<li><a href="#">ติดต่อติดต่อ</a></li>
<li><a href="#">ติดต่อติดต่อ</a></li>
</ul>
</li>

</ul>

</ร่างกาย>
</html>