CSS меню не выпадет в IE

artvor96 · 10.07.2010

Доброго времени суток!
Значит тема такая: меню выпадающее сделано в сss (так как js не знаю), прописано в файле, который встраивается через РНР с помощью require() (код меню ниже)
Это меню не выскакивает в IE, а также не меняет цвет (hover)
Нужна помощь...

МЕНЮ

Код:

<div id=\"menunav\" valign=top> 
   <ul> 
      <li><a href=\"" . URL_SITE . "\">Главная</a> 
            
      </li> 
      <li><a href=\"#\">Учителя</a> 
            <ul> 
			<li><a href=\"" . URL_SITE . "teachers/adm.php\">Администрация</a></li>
               <li><a href=\"" . URL_SITE . "teachers/math.php\">МО учителей математики</a></li> 
               <li><a href=\"" . URL_SITE . "teachers/istigeo.php\">МО учителей истории и географии</a></li> 
               <li><a href=\"" . URL_SITE . "teachers/slov.php\">МО учителей-словесников</a></li> 
               <li><a href=\"" . URL_SITE . "teachers/eng.php\">МО учителей английского языка</a></li> 
			   <li><a href=\"" . URL_SITE . "teachers/estestvo.php\">МО учителей естествознания</a></li>
			   <li><a href=\"" . URL_SITE . "teachers/nach.php\">МО учителей начальных классов</a></li>
			   <li><a href=\"" . URL_SITE . "teachers/pe.php\">Учителя физической культуры</a></li>
			   <li><a href=\"" . URL_SITE . "teachers/izo.php\">Учителя изобразительного искусства</a></li>
			   <li><a href=\"" . URL_SITE . "teachers/obs.php\">Учителя ОБЖ</a></li>
            </ul>      
      </li> 
      <li><a href=\"#\">Расписание</a> 
            <ul> 
               <li><a href=\"" . URL_SITE . "timetable/5a.php\">5а</a></li> 
               <li><a href=\"" . URL_SITE . "timetable/5b.php\">5б</a></li> 
               <li><a href=\"" . URL_SITE . "timetable/6a.php\">6а</a></li> 
               <li><a href=\"" . URL_SITE . "timetable/6b.php\">6б</a></li> 
			   <li><a href=\"" . URL_SITE . "timetable/7a.php\">7а</a></li>
			   <li><a href=\"" . URL_SITE . "timetable/7b.php\">7б</a></li>
<li><a href=\"" . URL_SITE . "timetable/8a.php\">8а</a></li> 
<li><a href=\"" . URL_SITE . "timetable/8b.php\">8б</a></li>
<li><a href=\"" . URL_SITE . "timetable/9a.php\">9а</a></li>  	
<li><a href=\"" . URL_SITE . "timetable/9b.php\">9б</a></li> 	
<li><a href=\"" . URL_SITE . "timetable/10a.php\">10а</a></li>
<li><a href=\"" . URL_SITE . "timetable/10b.php\">10б</a></li>
<li><a href=\"" . URL_SITE . "timetable/11a.php\">11а</a></li>   
<li><a href=\"" . URL_SITE . "timetable/11b.php\">11б</a></li> 	   
            </ul>      
      </li> 
      <li><a href=\"#\">Газета</a> 
            <ul> 
               <li><a href=\"" . URL_SITE . "newspaper/about.php\">О газете</a></li>
				<li><a href=\"" . URL_SITE . "newspaper/new.php\">Свежий номер</a></li>			   
               
                
                
            </ul>      
      </li> 
	  <li><a href=\"#\">История школы</a> 
            <ul> 
               <li><a href=# onclick=\"document.getElementById('wind').style.display='block'; return false;\" title=\"Всплывающее окно\">Фильм</a></li> 
               <li><a href=\"" . URL_SITE . "history/1936-1957.php\">с 1936 по 1957</a></li> 
               <li><a href=\"" . URL_SITE . "history/1958-1978.php\">с 1958 по 1978 </a></li> 
               <li><a href=\"" . URL_SITE . "history/1979.php\">с 1979 по настоящее время</a></li> 
            </ul>  
			<li><a href=\"" . URL_SITE . "gbook.php\">Гостевая</a></li> 
			<li><a href=\"" . URL_SITE . "documents.php\">Документы</a></li> 
			<li><a href=\"" . URL_SITE . "gallery/\">Галерея</a></li>
			<li><a href=\"" . URL_SITE . "news.php\">Новости</a></li> 			
			<li><a href=\"" . URL_SITE . "ege.php\">ЕГЭ</a></li> 			
      </li> 
   </ul> 
</div>

СТИЛЕВОЙ ФАЙЛ

Код:

/* Горизонтальное меню */ 

div#menunav { 
   vertical-align:top;
   float: left;  /* добавляем список в div */ 
   z-index:2;
   
   font-size: 13px;  /* задаем размер шрифта */ 
    
   padding: 0px 0px 0px 20px;  /* отступ ul от края контейнера */ 
} 
div#menunav ul { 
   margin: 0px; 
   padding: 0px; 
} 
* html div#menunav ul { 
   float: left;  /* заставляет ul вместить все li */ 
   border-left: none   /* добавляет левую вертикальную черту к ul */ 
   vertical-align:top;
} 
div#menunav li { 
   float: left;   /* располагаем список по горизонтали */ 
   position: relative;  /* контекст позиционирования для раскрывающегося меню с абсолютным позиционированием */    
   list-style-type: none;  /* удаляем маркеры */ 
    background-color:red;
	padding:5 5 5 5;
   border-right: none;  /* создаем разделительные линии между элементами li */ 
} 
div#menunav li:first-child { 
   border-left: none;  /* первая вертикальная линия в меню */ 
} 
div#menunav a { 
   display: block;  /* пункты вложенного меню выделяются при наведении указателя */ 
   text-decoration: none;  /* удаляем подчеркивание ссылок */ 
   border-bottom:none;
   text-align:left;
   vertical-align:top;
   padding: 0px 5px 0px 0px;  /* создаем пространство с обеих сторон текста пункта меню */ 
   color: white;  /* задаем цвет шрифта */ 
} 
div#menunav a:hover { 
   color: white; 
} 
div#menunav li:hover { 
   background-color: #b3b3b3;  /* задает фон пунктов списка */ 
} 

/* Раскрывающееся меню */ 

div#menunav ul li ul { 
   margin: 0px; 
   position: absolute;  /* размещает выпадающий ul относительно родительского li */ 
   left: 0px;  /* выравнивает раскрывающееся меню */ 
   width: 200px; 
} 
div#menunav ul li ul li  { 
   width: 100%;  /* элементы списка заполняют контейнер (ul) */
border-bottom:1px dotted #b3b3b3;   
  
} 
div#menunav ul li ul li:first-child { 
  
} 
body div#menunav ul li ul { 
   display: none; 
} 
div#menunav ul li:hover ul, div#menunav ul li ul:hover { 
   display: block; 
} 
* html div#menunav ul li ul {  /* добавляет верхнюю границу раскрывающегося меню для IE */ 
   border-left: 0рх;  /* устраняет наследование границ ul раскрывающимся меню */ 
}

tigra60 · 10.07.2010

Великое творение дядюшки Билли, неизвестно с какого перепуга, напрочь отказывается реагировать на псевдоэлемент hover любым элементом, кроме А, то есть

Код:

a:hover

мы понимаем, а

Код:

li:hover

пусть останется для других браузеров.
Отсюда вывод - переделать меню так, чтобы не было li:hover.
Удачи!

artvor96 · 10.07.2010

спасибо, подумаю)

а можете написать для моего меню скрипт, чтоб дизайн не менять (я пример скрипта нашёл, а под себя переделать не могу)
ниже ссыль на пример
http://www.cssor.ru/css/polezno-interesnoe/cssmenu

tigra60 · 10.07.2010

Вот пример по ссылке в Ваших стилях:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Еще одно выпадающее меню</title>
<style type="text/css">
ul#cssmenu {
        margin: 0;
        border: 0 none;
        padding: 0;
        list-style: none;
	   	font-size: 13px;  /* задаем размер шрифта */
		padding-left:20px;
}

ul#cssmenu li {
        margin: 0;
        border: 0 none;
        padding: 0;
        float: left;
        display: inline;
        list-style: none;
        position: relative;
		background:red; 
}

ul#cssmenu ul {
        margin: 0;
        border: 0 none;
        padding: 0;
        width: 160px;
        list-style: none;
        display: none;
        position: absolute;
}

ul#cssmenu ul:after {
        clear: both;
        display: block;
        font: 1px/0px serif;
        content: ".";
        height: 0;
        visibility: hidden;
}

ul#cssmenu ul li {
        width: 250px;
        float: left;
        display: block !important;
        display: inline;
border-bottom:1px dotted #b3b3b3;   
}

/* Main Menu */
ul#cssmenu a {
        border: 0px;
        padding: 5px;
        float: none !important;
        float: left;
        display: block;
        background: red;
        color: #FFFFFF;
        text-decoration: none;
        height: auto !important;
        height: 1%;
}

/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
	background-color: #b3b3b3;
}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
        float: none;
        background: red;
        color: #FFFFFF;
}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
	background-color: #b3b3b3;
}

ul#cssmenu ul ul {
        display: none;
        position: absolute;
        top: 0;
        left: 170px;
}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
        display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
        display: block;
}
</style>
</head>

<body>

<ul id="cssmenu">
		<li><a href="http://my-site/">Главная</a></li> 
		<li><a href="#">Учителя</a> 
		<ul>
        	<li><a href="http://my-site/teachers/adm.php">Администрация</a></li>
            <li><a href="http://my-site/teachers/math.php">МО учителей математики</a></li> 
            <li><a href="http://my-site/teachers/istigeo.php">МО учителей истории и географии</a></li> 
            <li><a href="http://my-site/teachers/slov.php">МО учителей-словесников</a></li> 
            <li><a href="http://my-site/teachers/eng.php">МО учителей английского языка</a></li> 
            <li><a href="http://my-site/teachers/estestvo.php">МО учителей естествознания</a></li>
            <li><a href="http://my-site/teachers/nach.php">МО учителей начальных классов</a></li>
            <li><a href="http://my-site/teachers/pe.php">Учителя физической культуры</a></li>
            <li><a href="http://my-site/teachers/izo.php">Учителя изобразительного искусства</a></li>
            <li><a href="http://my-site/teachers/obs.php">Учителя ОБЖ</a></li>
		</ul>      
      	</li> 
      	<li><a href="#">Расписание</a> 
        <ul> 
        	<li><a href="http://my-site/timetable/5a.php">5а</a></li> 
            <li><a href="http://my-site/timetable/5b.php">5б</a></li> 
            <li><a href="http://my-site/timetable/6a.php">6а</a></li> 
            <li><a href="http://my-site/timetable/6b.php">6б</a></li> 
            <li><a href="http://my-site/timetable/7a.php">7а</a></li>
           	<li><a href="http://my-site/timetable/7b.php">7б</a></li>
			<li><a href="http://my-site/timetable/8a.php">8а</a></li> 
			<li><a href="http://my-site/timetable/8b.php">8б</a></li>
			<li><a href="http://my-site/timetable/9a.php">9а</a></li>    
			<li><a href="http://my-site/timetable/9b.php">9б</a></li>    
			<li><a href="http://my-site/timetable/10a.php">10а</a></li>
			<li><a href="http://my-site/timetable/10b.php">10б</a></li>
			<li><a href="http://my-site/timetable/11a.php">11а</a></li>   
			<li><a href="http://my-site/timetable/11b.php">11б</a></li>     
		</ul>      
      	</li> 
      	<li><a href="#">Газета</a> 
        <ul> 
        	<li><a href="http://my-site/newspaper/about.php">О газете</a></li>
            <li><a href="http://my-site/newspaper/new.php">Свежий номер</a></li>                    
		</ul>      
      	</li> 
        <li><a href="#">История школы</a> 
        <ul> 
        	<li><a href=# onclick="document.getElementById('wind').style.display='block'; return false;" title="Всплывающее окно">Фильм</a></li> 
            <li><a href="http://my-site/history/1936-1957.php">с 1936 по 1957</a></li> 
            <li><a href="http://my-site/history/1958-1978.php">с 1958 по 1978 </a></li> 
            <li><a href="http://my-site/history/1979.php">с 1979 по настоящее время</a></li> 
		</ul>
		
		</li>
		  
        <li><a href="http://my-site/gbook.php">Гостевая</a></li> 
        <li><a href="http://my-site/documents.php">Документы</a></li> 
        <li><a href="http://my-site/gallery/">Галерея</a></li>
        <li><a href="http://my-site/news.php">Новости</a></li>                       
        <li><a href="http://my-site/ege.php">ЕГЭ</a></li>                    
</ul>

<script type="text/javascript">
function cssmenuhover()
{
        if(!document.getElementById("cssmenu"))
                return;
        var lis = document.getElementById("cssmenu").getElementsByTagName("LI");
        for (var i=0;i<lis.length;i++)
        {
                lis[i].onmouseover=function(){this.className+=" iehover";}
                lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");}
        }
}
if (window.attachEvent)
        window.attachEvent("onload", cssmenuhover);
</script>
</body>
</html>

В ИЕ-8 все и так работает (7 и 8 hover уже нормально хавают). Монстра ИЕ-6 под рукой нет, поэтому проверяйте, пожалуйста, самостоятельно.
Удачи!

artvor96 · 12.07.2010

Большое спасибо!
Только оно обратно не сворачивается, если в РНР вставить...

кстати, друг написал ещё один способ, тлько файл .htc не скачать!
http://vkontakte.ru/note29569795_9935973

и в IE ещё и сдвигаются подпункты
а я просто это поместил в echo""; и все " заменил на \"

SIGMAHOST · 12.07.2010

Поставьте jquery меню, там всё элементарно, даже без знаний спокойно установите, исходников в сети достаточно.

CSS меню не выпадет в IE

artvor96

Well-Known Member

tigra60

Спасатель

artvor96

Well-Known Member

tigra60

Спасатель

artvor96

Well-Known Member

Вложения

SIGMAHOST

Новичок

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей