รบกวนสอบถามปัญหาเมนู....css ...(ภาพประกอบสี่สี)

[เป็นติ่งไรเนี่ย]

ดีครับ..เเบบว่าจะเพิ่มซับเมนูเเบบดร็อปดาวน์ของ service ลงมาเป็น aa bb cc ดั่งภาพตัวอย่าง
เราจะต้องเพิ่มอะไรบ้าง ตามข้างล่างนี้ครับ

<div class="navi">
     <ul id="menu" class="grey">
        <li><a href="#">home</a></li>
   <li class="active"><a href="#">service</a></li>
   <li><a href="#">product</a></li>
    </ul>      
</div>

#menu {
   xx
        xxx         
   }      
#menu li {
   float: left;
   margin: 0;
   }
#menu li a {
   text-decoration: none;
   display: block;
   }
#menu li a:hover, #menu li.active a {
   background-color: #f5f5f5;
   border-bottom: 2px solid #DDD;
   color: #999;

   }      

[homekung]

น่าจะต้องใช้ javascript นะครับ...

script

โค้ด เลือก ขยาย

<script language="JavaScript"><!--
function goThere(form){
var linkList=form.selectThis.selectedIndex
if(!linkList==""){window.location.href=form.selectThis.options[linkList].value;}
}
//--></script>


html แล้วค่อยใส่ css เอาครับ

โค้ด เลือก ขยาย

<form name="dropMenu">
<select name="selectThis" size="1" onChange="goThere(this.form);">
<option selected value="">a
<option value="">b
<option value="">v
<option value="">d
</select>
</form>

[WPDSign]

มารอฟังด้วยครับ

ใช้ css ไม่ค่อยเป็นเหมือนกัน

[mafiary]

ลองดูครับ

โค้ด เลือก ขยาย

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

[Bes]

ตัวอย่าง www.tmb.co.th   ลองเอา css ของเค้ามาดูครับ น่าจะได้ตามที่ต้องการ

[ttong]

โค้ด เลือก ขยาย

http://meyerweb.com/eric/css/edge/menus/demo.html

แบบ css ล้วนๆ

[Kobsoft]

  ลองๆ ศึกษาวิธีนี้ดูนะคับ ผมก็เขียนสดมั่วๆ เอา

ในลำดับชั้นของ Element การทำ CSS MENU มี Sub Menu 1 ขั้นโดยการใช้ Pure CSS ก็ให้เขียน CSS บังคับชั้นหรือ Tree นั้นๆ ได้โดยการระบุลำดับชั้นตายตัวคล้ายๆ แบบนี้นะคับ สมมุติ

โค้ด เลือก ขยาย

<ul> // UL1
  <li> // LI1
    <ul>  //UL2
      <li></li>  //LI2
    </ul>
  </li>
</ul>

-----------------------
ความเข้าใจลำดับชั้นนะคับ

UL1 เป็นตัวอยุ่ชั้นนอกสุด ระบุ CSS ได้โดย  ul
LI1 อยู่ด้านใน UL1 ระบุ CSS ได้โดย ul li
UL2 อยู่ด้านใน LI1 ระบุ CSS ได้โดย ul li ul
LI2 อยู่ด้านใน UL2 ระบุ CSS ได้โดย ul li ul li

เราสามารถควบคุมการแสดงผลได้ด้วยเทคนิค event handle onmouse over สำหรับใน CSS ใช้ :hover

เช่นเมื่อต้องการให้แสดง Submenu (UL2) เมื่อนำพอยเตอร์ไปวางบน Menu หลัก (LI1) ก็ให้เขียน

ul li:hover ul

คับ


(แสดงผลได้เร็วกว่าใช้ js onmouseover แล้วก็ไม่ใช้ทรัพยากรเครื่อง Client ด้วยคับ)