Не отображается само меню

голоса: +3

Сделал тестовую страницу для меню сайта для narod.ru. Меню раскрывающееся. На ПК все работает четко. Загрузил на сервер - перестал отображаться список меню. Все остальное работает нормально.

Вот код html:

<CODE>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dark Demon</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/menu.js"></script>
</head>

<body>
<ul id="nav">
      <li class="top"><a id="products" class="top_link"><span class="down">Меню</span></a>
  <ul class="sub">
   <li><a href="index.html" class="fly">Главнаяa></a></li>
   <li><a href="prog.htm" class="fly">Программы</a></li>
   <li><a href="comp.htm" class="fly">Компоненты</a></li>
   <li><a href="foto.htm" class="fly">Фото</a></li>
   <li><a href="model.htm" class="fly">3D Модели</a></li>
   <li><a href="helper.htm" class="fly">Справочная</a></li>
   <li><a href="
http://dark-demon.narod.ru/gb" class="fly">Гостевая</a></li>
   <li><a href="
http://dark-demon.narod.ru/index/0-3" class="fly">Обратная связь</a></li>
         </ul>
       </ul>
</body>
</html>
</CODE>

и код CSS:

<CODE>#nav {padding:0; margin:0; height:357px; width:262px; background: url('../img1/13.png') repeat-x; position:relative; z-index:200; font-family:Gothic; list-style-type:none}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#000000; text-decoration:none; font-size:18px; font-weight:bold; cursor:pointer; padding-left:93px; padding-right:0; padding-top:86px; padding-bottom:0}
#nav li a.top_link span {float:left; display:block; height:35px; padding-left:12px; padding-right:24px; padding-top:0; padding-bottom:0px}
#nav li:hover a.top_link,
#nav a.top_link:hover {color:#ff0000; background: url('../img1/14.png') no-repeat;height:271px; width:262px;}
#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}
#nav :hover ul.sub {left:63px; top:120px; padding:3px; white-space:nowrap; width:170px; height:170px; z-index:300;}
#nav :hover ul.sub li a {display:block; font-size:14px; height:18px; text-align:center; font-weight:bold; width:128px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;}
#nav a:hover a:hover ul,
#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > ul {left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav li:hover li:hover > a.fly {color:#0000ff;}
</CODE>
В кодах для HTML красным выделено, что перестало отображаться. Как это исправить - не знаю.

Вот ссылка тестовой страницы:
http://dark-demon.narod.ru/test.html

Адрес сайта http://dark-demon.narod.ru
| Автор: | Категория: Дизайн сайта

Ответов: 1

голоса: +4
 
Лучший ответ
Вот эти две строчки уверены, что прописаны правильно?
 

#nav :hover ul.sub {left:63px; top:120px; padding:3px; white-space:nowrap; width:170px; height:170px; z-index:300;}
#nav :hover ul.sub li a {display:block; font-size:14px; height:18px; text-align:center; font-weight:bold; width:128px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;}
| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk
На ПК, как я уже писал выше, все работает нормально. Загруженный на сервер исходник (с него я брал коды для HTTP и CSS) тоже не отображает выпадающее меню. Хотя на родном сайте в ДЕМО работает нормально. Проверил несколько выпадающих меню с разных сайтов - сработало только одно на этом сервере, остальные не срабатывают. На родных сайтах в ДЕМО работают - тут не хотят. В чем проблема - не пойму.
http://jsfiddle.net/vf1onyqa/ попробуйте скопировать и вставить ещё раз на тест сайт.
Сделал как Вы написали. На комповском варианте работает, а на серверном не хочет.

Вот код жавы, может тут вся проблема:

stuHover = function() {
    var cssRule;
    var newSelector;
    for (var i = 0; i < document.styleSheets.length; i++)
        for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
            {
            cssRule = document.styleSheets[i].rules[x];
            if (cssRule.selectorText.indexOf("LI:hover") != -1)
            {
                 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
                document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
            }
        }
    var getElm = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<getElm.length; i++) {
        getElm[i].onmouseover=function() {
            this.className+=" iehover";
        }
        getElm[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

В Вашей ссылке в окне Result - работает. А на моей странице не хочет. Почему? Не пойму.

В самом верху HTML вставил <!DOCTYPE html>. Без этого на компе тоже самое что на сервере с этим. Может здесь надо что-то изменить?

В качестве исходника я взял вот это меню:
http://dark-demon.narod.ru/menu.rar

Оно также не отображает на сервере выпадающее меню. Только основное. Почему?
Попробуйте с этим
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Эффект тот же. На компе отображает, при загрузки с сервера - нет.

Нашел меню без жавы - HTTP и CSS. Результат тот же.
Мысли закончились... попробуй поискать меню которое всё таки заработает.
Пересмотрел все подобные меню. Эффект тот же. Везде стоит <!DOCTYPE HTML>. Убираю на компе - эффект как на сервере - пусто. С <!DOCTYPE HTML> на компе работает, а на сервере не хочет. Похоже этот сервер не поддерживает <!DOCTYPE HTML>. Бред какой-то. Первый раз с таким сталкиваюсь. На НАРОДЕ такие меню работали нормально.
А куда ставишь доктайп? на страницу? нужно в ПУ настройки-общие настройки, найти поле значение тэга доктайп и там вписать нужный.
Нашел. Только что туда и как вписывать - без малейшего понятия. Сайт у меня Народовский. Так вписать можно только в гостевуху. На тестовую страницу сомневаюсь что впишет.

На одном из форумов писали, что надо отключить в IE 10 сжатие js и css. Где оно отключается в IE 10 не нашел.

Вот еще одна тестовая страница

http://dark-demon.narod.ru/demo.html

Без жавы. Только HTML и CSS. В FireFox работает нормально - в IE 10 не хочет.
...