Подменю не работает в IE и Chrome .. Работает в FF, Opera

Ниже приведен код, который я пишу в HTML, и я получаю то, что я хочу отлично в FF, Opera. Мой друг тоже может работать в IE, но я не ... Также я не могу видеть выход Chrome. Любая причина??Подменю не работает в IE и Chrome .. Работает в FF, Opera

<html> 
<head> 
<style> 
#nav, #nav ul { 
    line-height: 1.5em; 
    list-style-position: outside; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#nav a:link, #nav a:active, #nav a:visited { 
    background-color: #333333; 
    border: 1px solid #333333; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
    visibility: visible; 
} 

#nav a:hover { 
    background-color: #FFFFFF; 
    color: #333333; 
} 
#nav li { 
    position: relative; 
    width: 100px; 
} 

#nav ul { 
    display: none; 
    left: 100px; 
    position: absolute; 
    width: 192px; 
    top:0; 
} 

#nav li ul a { 
    float: left; 
    width: 192px; 
} 

#nav ul ul { 
    top:0; 
} 

#nav li ul ul { 
    left: 192px; 
    top:25px; 
    margin: 0 0 0 13px; 
} 

#nav li ul ul ul { 
    left: 192px; 
    top:0px; 
    margin: 0 0 0 13px; 
} 


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ 
    display: none; 
} 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { 
    display: block; 
} 
</style> 
</head> 
<body> 
<ul id="nav"> 
<li><a href="#">cat1</a><ul class="jaccordion"> 
<li><a href="#">cat1.1</a><ul class="jaccordion"></ul></li> 
<li><a href="#">cat1.2</a><ul class="jaccordion"> 
<li><a href="#">cat1.2.1</a><ul class="jaccordion"> 
<li><a href="#">cat1.2.1.1</a><ul class="jaccordion"></ul></li></ul></li></ul></li> 
<li><a href="#">cat1.3</a><ul class="jaccordion"></ul></li> 
</ul></li> 
<li><a href="#">cat2</a><ul class="jaccordion"> 
<li><a href="#">cat2.1</a><ul class="jaccordion"></ul></li></ul></li> 
</ul> 
</body> 
</html>

Заранее спасибо ...

источник

2012-02-04 Fahim Parkar

Вы еще что-нибудь пробовали? Если у вас еще нет ответа, я отправлю вам решение завтра. Написание текста лота со смартфоном отстой;) – Christoph

Я добавил решение для ответа. Проверьте это. – Christoph

спасибо Christoph –

У вас есть много дублирующих стилей в вашем CSS. Попытайтесь их устранить. Особенно ульты имеют множество правил, которые переопределяют друг друга. Попытайтесь использовать классы для разных уровней ваших умений, чтобы сделать их более конкретными.

EDIT:

все CSS код, который нужно: (test it)

#nav, #nav ul { 
    line-height: 1.5em; 
    list-style:none; /* <- shorthand declaration is enough */ 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#nav a:link, #nav a:active, #nav a:visited { 
    background-color: #333333; 
    border: 1px solid #333333; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
} 

#nav a:hover { 
    background-color: #FFFFFF; 
    color: #333333; 
} 
#nav li { 
    position: relative; 
    width: 80px;  /* <- This defines the width, no need to declare elsewhere */ 
} 

#nav ul { 
    display: none; 
    left: 100%;  /* <- % makes you indepentent of declared with in li*/ 
    position: absolute; 
    top:0; 
} 

#nav li:hover > ul{ 
    display:block; /* <- does all the hovermagic for you, no matter how many ul-levels you have */ 
}

по нескольким причинам, этот код не будет работать в IE 6 (если вам нужно, чтобы поддержать его, вам нужно некоторые действительно неприятные обходные пути)

источник

2012-02-04 19:30:07 Christoph

Основная проблема заключается в том, что в IE после нажатия мыши над 'cat 1' подменю' cat1' не отображалось ... –

спасибо за помощь :) –

Часть вопроса состоит в том, что вы не объявили doctype в своем HTML. Никакой объявленный doctype не помещает IE в quirksmode, а затем ведет себя иначе, чем вы ожидаете.

Вы хотите разместить <!DOCTYPE html> в верхней части документа. Quirksmode Explanation

Кроме того, я думаю, что существует множество надежных решений, которые будут работать немного лучше, чем ваши. Как уже упоминалось ранее, у вас много декларированных стилей, что, вероятно, также вызывает проблемы.

Быстрая поисковая игра google со следующим решением, которое работает очень хорошо. CSS3 Dropdown Menu

Я сделал быструю модификацию кода и применил его к вашему. Не уверен, что это будет делать именно то, что вы ищете, но это начало.

<style> 

#nav { 
margin: 0; 
padding: 0; 
list-style: none; 
line-height: 1.5em; 
} 

#nav li { 
    position: relative; 
    width: 100px; 
} 

/* main level link */ 
#nav a:link, #nav a:active, #nav a:visited { 
    background-color: #333333; 
    border: 1px solid #333333; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
    visibility: visible; 
} 

#nav a:hover { 
    background: #ffffff; 
    color: #333333; 
} 

/* dropdown */ 
#nav li:hover > ul { 
display: block; 
} 

/* level 2 list */ 
#nav ul { 
    display: none; 
    left: 100px; 
    position: absolute; 
    width: 192px; 
    top: 0; 
} 

#nav ul li { 
float: none; 
margin: 0; 
padding: 0; 
} 

/* clearfix */ 
#nav:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#nav { 
    display: inline-block; 
} 

html[xmlns] #nav { 
display: block; 
} 

* html #nav { 
    height: 1%; 
} 
</style>

Надеюсь, что это поможет!

источник

2012-02-05 19:42:29 plumwd

Насколько я вижу, ваш код имеет некоторые проблемы. Я объясню это завтра. – Christoph

'*' hack действителен, но интерпретируется только IE6 - поскольку это выпадающее меню не работает в IE6, вы можете его опустить. 'html [xmlns]' для xhtml - поскольку вы используете html5 doctype, это бесполезно. clearfix через '#nav: after' не работает в IE 7. ' visibility' в a-selector не требуется. – Christoph

Подменю не работает в IE и Chrome .. Работает в FF, Opera

ответ

Смежные вопросы