Добрый день.
Не давно столкнулся вот с такой проблемой. Мне требуется разработать раскрывающееся меню на базе CSS. Желательно без использования JS. В крайнем случаи если и использовать его то только без добавления в HTML (т.е. не каких там событий в объектах). Нашел кот такой код в Интернете
| Код |
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
<STYLE>
body
{
margin : 0;
padding : 10px;
font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
behavior: url(csshover.htc);
background-color: #ffffff;
}
div#menunav
{
width: 100%;
float: left;
border-top: 1px
border-bottom: 1px solid #000000;
font-size: 11px;
background-color: #b3b3b3;
padding: 0 0 0 30px;
}
div#menunav ul
{
margin: 0px;
padding: 0px;
}
* html div#menunav ul
{
float: left;
border-left: 1px solid #000000;
margin-left: 15px;
}
div#menunav li
{
float: left;
position: relative;
list-style-type: none;
background-color: #ffebc6;
border-right: 1px solid #000000;
}
div#menunav li:first-child
{
border-left: 1px solid #000000;
}
div#menunav a
{
display: block;
text-decoration: none;
padding: 0px 10px 0px 10px;
color: #006699;
}
div#menunav a:hover
{
color: #ff3333;
}
div#menunav li:hover
{
background-color: #ffffff;
}
div#menunav ul li ul
{
margin: 0px;
position: absolute;
left: -1px;
width: 10em;
}
div#menunav ul li ul li
{
width: 100%;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}
div#menunav ul li ul li:first-child
{
border-top: 1px solid #000000;
}
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
{
border-top: 1px solid #000000;
border-left: 0рх;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="menunav">
<UL>
<LI><A href="#">раздел №1</A>
<UL>
<LI><A href="#">подраздел №1</A></LI>
<LI><A href="#">подраздел №2</A></LI>
<LI><A href="#">подраздел №3</A></LI>
<LI><A href="#">подраздел №4</A></LI>
</UL>
</LI>
<LI><A href="#">раздел №2</A>
<UL>
<LI><A href="#">подраздел №1</A></LI>
<LI><A href="#">подраздел №2</A></LI>
<LI><A href="#">подраздел №3</A></LI>
<LI><A href="#">подраздел №4</A></LI>
</UL>
</LI>
<LI><A href="#">раздел №3</A>
<UL>
<LI><A href="#">подраздел №1</A></LI>
<LI><A href="#">подраздел №2</A></LI>
<LI><A href="#">подраздел №3</A></LI>
<LI><A href="#">подраздел №4</A></LI>
</UL>
</LI>
<LI><A href="#">раздел №4</A>
<UL>
<LI><A href="#">подраздел №1</A></LI>
<LI><A href="#">подраздел №2</A></LI>
<LI><A href="#">подраздел №3</A></LI>
<LI><A href="#">подраздел №4</A></LI>
</UL>
</LI>
</UL>
</DIV>
</BODY>
</HTML>
|
В принципе мне подходит в самый раз. Но есть одна проблема он совершенно не хочет работать в IE 6. Начал искать проблему и обнаружил, что браузер не понимает вот этот параметр:
| Код |
div#menunav ul li:hover ul, div#menunav ul li ul:hover
{
display: block;
}
|
Ничего не могу понять, почему IE6 не нравится эта конструкция, кто подскажет, если решения данной проблемы?
|