
อย่างที่ผมใช้ AJAX นะครับจะเขียนแบบนี้
/* index.html
/* -------------------------------------------------------------------*/
<script type="text/javascript">
function loadUrl(url) {
$.get(url, null, function(xhr){
$('#result').html(xhr);
});
}
</script>
และสร้าง div#result ขึ้นมาเพื่อใช้สำหรับใส่ response result จาก AJAX
และที่เมนู ก็เพิ่มคำสั่งนี้เข้าไป สมมติเมนูผมเป็น tag a
<a href="#" onclick="loadUrl(' --- ชื่อไฟล์ที่จะโหลด --- ')">Anchor Text</a>
จากคำสั่งข้างบนก็หมายความว่าเมื่อ click ที่ tag a ก็จะทำการเรียก function loadUrl และส่ง parameter เป็นชื่อไฟล์ที่จะโหลด จากนั้นก็โหลด
ผ่าน AJAX มาใส่ที่ div#result
ตัวอย่างครับ
http://www.mediafire.com/?xuy0g0kddjve6lg 
โหลดแล้วเอาไฟล์ใส่ที่ localhost server นะครับ
-- ต้องใช้ jQuery ด้วยครับ
ส่วนเรื่อง z-index หมายถึงระดับ layer ของ element ครับ นึกถึงเวลาคุณใช้ Photoshop แล้วสร้าง layer ใหม่ layer ที่อยู่บนจะแสดงผลทับ ด้านล่างใช่ไหมครับ
หลักการเดียวกันกับ z-index ถ้ามี div สองอันที่แสดงตำแหน่งเดียวกัน การกำหนด z-index ให้อีกตัวหนึ่งมากกว่า มันก็จะแสดงทับตัวที่ z-index น้อยกว่า ครับ
เรื่องที่ใช้ frame, iframe, frameset อะไรนั้นยังไงก็ไม่สามารถทำให้ drop down menu ยืดลงมาเกินขอบของ frame ได้ครับ
** ยกเว้นคุณจะเขียน JavaScript สั่งให้ frame มันเพิ่ม height เวลา drop down menu ยืด