القائمة الفرعية الأفقية CSS - أي 6،7 كلاهما لا يعملون ، حاولوا بأي تحوم

Question

أنا لست خبيرًا في قوائم CSS. لكنني أعرف النظام الأساسي لجعل قائمة CSS. لقد استخدمت هذا النظام من قبل وأعمل ، لكن هذه المرة لا يعمل.

الموقع http://www.uniethos.com. يرجى التحقق من هذا الموقع

تعمل هذه القائمة مع جميع المتصفحات الأخيرة الأخرى. ولكن ليس مع IE 6 & 7. أعرف أن IE6 لا تدعم التحويم باستثناء المرساة. لذلك قبل أن أستخدم أي تحوم. ولكن هذه المرة لا يعمل وحتى مع IE7. لا أعرف لماذا يحدث. قد يكون هناك بعض المشكلة مع CSS الخاص بي. يرجى التحقق من CSS.

إذا لم يكن لديك IE 6 أو 7 مثبتة ، فيمكنك تشغيل واحدة منها http://spoon.net/browsers/. تتطلب تثبيت مكون إضافي واحد.

CSS التي أستخدمها في القائمة هي

.glossymenu{
    background: #B4B3B3;
    height: 30px;
    width: 100%;
    padding: 0;
    margin: 0;
    display:inline-block;
    position:relative;

}

.glossymenu ul
{
   list-style: none;
   padding: 0px;
   margin: 0; 
   padding-left: 0px;
}

.glossymenu li ul
{
    display:none;
    position:absolute;
    width: 80%;
    top:30px;
    left:0px;
    background-color:#5B0C10;
    border:0px;
    z-index: 99;
}

.glossymenu li li a
{
    padding: 0px 10px 0px 10px; 
}    

.glossymenu li li a:hover
{
    background : #871016; 

}

.glossymenu li{
    float:left;
    padding: 0;
}

.glossymenu li a{
    float: left;
    display:block;
    position:relative;
    color:#FFF;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;    
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
    color: #FFF;
    background: #5B0C10;
    background-position: left;
    text-decoration: none;
}

.glossymenu li a:visited{
    text-decoration: none;
}

.glossymenu ul li:hover ul 
{
    display: block;
}

Answer 1

حسنًا ، لم أجد المشكلة. لكنني أصلحت القائمة برمز JavaScript المخصص.

sfHover = function() {
    var sfEls = document.getElementById("glossymenu").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

الأشخاص الذين يواجهون نفس المشكلة قد يجدون هذا مفيدًا. شكرًا.

Answer 2

Ofcourse أيا كان: هو أفضل. لكني لا أعرف لماذا لم يكن ذلك يعمل. إذا واجهت نفس المشكلة ، فيمكنك استخدام JavaScript هذا. لكن عليك أن تفهم الرمز.

sfHover = function() { 
// You may have to change the "glossymenu" id with your one
    var sfEls = document.getElementById("glossymenu").getElementsByTagName("LI"); 


    for (var i=0; i<sfEls.length; i++) { 
        sfEls[i].onmouseover=function() { 
            this.className+=" over"; 
        } 
        sfEls[i].onmouseout=function() { 
            this.className=this.className.replace(new RegExp(" over\\b"), ""); 
        } 
    }  }  if (window.attachEvent) window.attachEvent("onload", sfHover);

في حالتي ، لدي معرف DIV يدعى "Glossymenu". عليك تغيير هذا مع هويتك. ويجب أن تعلن أيضًا فئة أخرى من CSS تسمى "Over". في حالتي -

.glossymenu li:hover ul, .glossymenu li.over ul
{
    display: block;
}

هذا يكفي لقائمة المنسدلة مستوى واحد. أنت لا تحتاج إلى أي شيء: تحوم إذا كان من المقبول معك.