всплывающее меню css

myth · March 14, 2009

Есть проблема с меню из нета. Когда я его делаю в таблице, то в IE верхнее sub меню перекрывает нижняя меню. Т.е. когда разкрывается меню первой строки таблицы оно не полностью видно!

Я установил у меню второго уровня z-index в 10, все равно не работает. Хотя в Opere все нормально..

Как решать эту проблему? IE не понимает z-index?

<html> 
<style type=text/css> 
body { 
  font: normal 11px verdana; 
  } 
ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  width: 150px; /* Width of Menu Items */ 
  border-bottom: 1px solid #ccc; 
  } 

ul li ul li{ 
  position: relative; 
  z-index=10; 
  } 
ul li{ 
  position: relative; 

  } 
li ul { 
  position: absolute; 
  left: 49px; /* Set 1px less than menu width */ 
  top: 0; 
  display: none; 

  } 

/* Styles for Menu Items */ 
ul li a { 
  display: block; 
  text-decoration: none; 
  color: #777; 
  background: #fff; /* IE6 Bug */ 
  padding: 5px; 
  border: 1px solid #ccc; 
  border-bottom: 0; 

  } 

/* Fix IE. Hide from IE Mac \*/ 
* html ul li { float: left; height: 1%; } 
* html ul li a { height: 1%; } 
/* End */ 

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */ 

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ 

li:hover ul, li.over ul {  display: block; } /* The magic */ 
</style> 

<head> 
</head> 

<script> 
function startList(name_id) { 
  if (document.all&&document.getElementById) 
  { 
    navRoot = document.getElementById(name_id); 
    for (i=0; i<navRoot.childNodes.length; i++) 
    { 
      node = navRoot.childNodes[i]; 
      if (node.nodeName=="LI") 
      { 
        node.onmouseover=function() 
        { 
          this.className+=" over"; 
        } 
        node.onmouseout=function() 
        { 
          this.className=this.className.replace(" over", ""); 
        } 
      } 
    } 
  } 
} 
</script> 
<body> 
  <table border = 1 width = "100%"> 

  <tr> 
    <td> 
    <ul id="nav1"> 
        <li><a href="#">Services</a> 
        <ul> 
          <li><a href="#">Web Design</a></li> 
          <li><a href="#">Web Design</a></li> 
        </ul> 
        </li> 
    </ul> 
    <script> startList("nav1");</script> 
    </td> 
  </tr> 

  <tr> 
    <td> 
    <ul id="nav2"> 
        <li><a href="#">Services</a> 
        <ul> 
          <li><a href="#">Web Design</a></li> 
          <li><a href="#">Web Design</a></li> 
        </ul> 
        </li> 
    </ul> 
    <script> startList("nav2");</script> 
    </td> 
  </tr> 

  </table> 

</body> 
</html>

Edited March 14, 2009 by myth

Vlad · March 15, 2009

Мда, запись z-index=10 точно никто не понимает.

myth · March 15, 2009

:^)

Да ладно тебе, он и с двоеточием не работает. () неправильно набил, спешил..

Я разобрался с вопросом вчера, IE глюкавая, она z-index родителя тоже учитывает.

Edited March 15, 2009 by myth

Sign In

всплывающее меню css

Question

myth

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

myth

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information