ถามเรื่องการแสดงผล CSS ของIE6

สวัสดีครับ

อันนี้ ทดสอบในie7 ครับ

พอie6 มันไม่ขึ้น drop down ลงมาครับ

ต้องการเขียนให้ลองรับ 2 ตัวนี้ครับ

พอศึกษา จาก http://www.goragod.com/knowledge/2/CSS....html?q=css+ie6

วิธีที่แก้ไข ที่ลองแล้ว ไม่สำเร็จ

- *html ที่ css แล้ว

- 

css

Filename : menu_style.css

.menu{

   border:none;

   border:0px;

   margin:0px;

   padding:0px;

   font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

   font-size:14px;

   font-weight:bold;

   }

.menu ul{

   background:#333333;

   height:35px;

   list-style:none;

   margin:0;

   padding:0;

   }

   .menu li{

        float:left;

        padding:0px;

        }

   .menu li a{

        background:#333333 url("images/seperator.gif") bottom right no-repeat;

        color:#cccccc;

        display:block;

        font-weight:normal;

        line-height:35px;

        margin:0px;

        padding:0px 25px;

        text-align:center;

        text-decoration:none;

        }

        .menu li a:hover, .menu ul li:hover a{

            background: #2580a2 url("images/hover.gif") bottom center no-repeat;

            color:#FFFFFF;

            text-decoration:none;

            }

   .menu li ul{

        background:#333333;

        display:none;

        height:auto;

        padding:0px;

        margin:0px;

        border:0px;

        position:absolute;

        width:225px;

        z-index:200;

        /*top:1em;

        /*left:0;*/

        }

   .menu li:hover ul{

        display:block;



        }

   .menu li li {

        background:url('images/sub_sep.gif') bottom left no-repeat;

        display:block;

        float:none;

        margin:0px;

        padding:0px;

        width:225px;

        }

   .menu li:hover li a{

        background:none;



        }

   .menu li ul a{

        display:block;

        height:35px;

        font-size:12px;

        font-style:normal;

        margin:0px;

        padding:0px 10px 0px 15px;

        text-align:left;

        }

        .menu li ul a:hover, .menu li ul li:hover a{

            background:#2580a2 url('images/hover_sub.gif') center left no-repeat;

            border:0px;

            color:#ffffff;

            text-decoration:none;

            }

   .menu p{

        clear:left;

        }

//--------------------------------------------------------------------------------------------

-html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />

   <title></title>



   <link rel="stylesheet" href="menu_style.css" type="text/css" />

</head>

<body>

   <br>

   <br>

   <div class="menu">

        <ul>

            <li><a href="#" >Home</a></li>

            <li><a href="#" id="current">Products</a>

                <ul>

                    <li><a href="#">Drop Down CSS Menus</a></li>

                    <li><a href="#">Horizontal CSS Menus</a></li>

                    <li><a href="#">Vertical CSS Menus</a></li>

                    <li><a href="#">Dreamweaver Menus</a></li>

               </ul>

        </li>

            <li><a href="/faq.php">FAQ</a>

                <ul>

                <li><a href="#">Drop Down CSS Menus</a></li>

                <li><a href="#">Horizontal CSS Menus</a></li>

                <li><a href="#">Vertical CSS Menus</a></li>

                <li><a href="#">Dreamweaver Menus</a></li>

                </ul>

          </li>

            <li><a href="/contact/contact.php">Contact</a></li>

        </ul>

   </div>

</body>

</html>

และถ้าจะให้รองรับ 2ตัว คือ ie6 กับ ie7 จะต้องทำยังไงบ้างครับ

ขอบคุณมากมากๆๆครับ

กรกฎ วิริยะ 10 ม.ค. 2554 20:08

ie6 จะไม่รองรับ li:hover ครับ หรือพูดง่ายๆ คือ ie6 จะใช้ hover ได้กับ tag a เท่านั้น tag อื่นจะใช้ไม่ได้

การแก้ไข คงต้องใช้ Javascript ในการทำงานร่วมกับ IE6 ละครับ

ลองมองหาโค้ดเมนูแบบนี้ได้ที่ dynamicdrive.com ครับ

แต่โดยส่วนตัวแล้วผมเลิกใช้ ie6 แล้วครับ (และเลิกเขียนโค้ดให้รองรับ ie6 แล้วด้วย)

วชภณ 11 ม.ค. 2554 03:41

จาก เว็ปนี้ครับ http://www.visibilityinherit.com/...hover-javascript.php

มีcode แบบนี้ครับ



<script type="text/javascript">

// suckerfish hover effect for ie6

sfHover = function() {

    // specify hovered element and div in which it sits 

    var sfEls = document.getElementById("content").getElementsByTagName("ul");

	for (var i=0; i<sfEls.length; i++) {

        sfEls[i].onmouseover=function() {

            this.className+=" hover";

        }

        sfEls[i].onmouseout=function() {

            this.className=this.className.replace(new RegExp(" hover\\b"), "");

        }

    }

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>







แต่ที่ผมไม่เข้าใจว่า  บรรทัดนี้ จะไปใส่ไว้ไหนครับ?

var sfEls = document.getElementById("content").getElementsByTagName("ul");

Second: within in the script itself specify the element you would like to 

show a hovered effect on, and the <div> in which the element sits.

เว็บไซต์และโครงการในเครือ