Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Выпадающее меню
 
 автор: Shey   (28.08.2008 в 19:32)   письмо автору
 
 

Привет всем!!!
Народ, подскажите пожалуйста, как сделать, чтобы подменю находилось поверх основного меню.
Вот html-код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Меню из списка</title>
</head>
<body>
 <script language="javascript" type="text/javascript">
 // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
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", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
<style type="text/css">
 ul {
    margin:0px;
    padding:0px;
    list-style:none;
    width: 160px;
    border-bottom:1px solid #ccc;
    }
 ul li {
    position: relative;    
    }
 li ul {
    position: absolute;
    left: 109px;
    top:0px;
    display:none;
    z-index:2;
    }    
 ul li a {
    display: block;
    text-decoration: none;
    background:#fff;
    color: #777;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0px;
    }
 ul li font{
            display: block;
    color: #000;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0px;
 }    
 li:hover ul, li.over ul {display:block;}

* html ul li { float: left;}
* html ul li font{height:1%;}
* html ul li a {height:1%; }

</style>
<ul id="nav"> 
    <li><a href="#">Главная</a></li> 
    <li><font>Диск. программа</font> 
      <ul> 
        <li><a href="#">О программе</a></li> 
        <li><a href="#">Партнерам</a></li> 
        <li><a href="#">Каталог скидок</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Обратная связь</a> 
      <ul> 
        <li><a href="#">Вопрос - ответ</a></li> 
        <li><a href="#">Ваше мнение</a></li> 
        <li><a href="#">Отзывы</a></li> 
      </ul> 
    </li>
    <li><a href="#">Контакты</a></li> 
  </ul>
</body>
</html>


Скопируйте себе и откройте через Opera или FireFox. Там всё нормально. Но в IE свойство z-index: 2; не работает. Подскажите в чём дело.

  Ответить  
 
 автор: Shey   (29.08.2008 в 12:32)   письмо автору
 
   для: Shey   (28.08.2008 в 19:32)
 

Неужели ни кто не может помочь???
Кстати, прошу прощения за название темы. Она должна была называться "Выпадающее меню". :)

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования