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

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

0 голосов
/ 04 февраля 2012

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

<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>

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

Ответы [ 2 ]

3 голосов
/ 04 февраля 2012

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

РЕДАКТИРОВАТЬ:

весь необходимый вам код CSS: ( проверить это ) 

#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 */
}

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

0 голосов
/ 05 февраля 2012

Отчасти проблема в том, что вы не объявили тип документа в своем HTML. Ни один из объявленных doctype не поместит IE в режим quirksmode, и тогда он будет вести себя не так, как вы ожидаете.

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

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

Быстрый поиск в Google со следующим решением, которое работает очень хорошо. Выпадающее меню CSS3

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

<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>

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

...