VPF::менюшка в браузерах - Форум программистов

Del_Flg

Дата 5.4.2007, 19:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 30.3.2007

Репутация: нет
Всего: нет

есть трехуровневая менюшка
http://typo3.orgate.ru/bookstore/menu/menu.html

цсска для нее http://typo3.orgate.ru/bookstore/menu/stylesheet_menu.css

все было прекрасно, пока не поставила 7 ие.
меню вообще не раскрывается в нем. в шестом все было замечательно.
сейчас подправила для фокса и оперы.
меню реализовано с помощью списков и в стилях просто прописано visibility:visible; для элементов ul второго и третего уровня по наведению.

код страницы

Код


<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="LTR" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Книжный магазин</title>
<link rel="stylesheet" type="text/css" href="stylesheet_menu.css">
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">
  <tr>
    <td width="125" valign="top"><table border="0" width="125" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<!-- categories //-->
          <tr>
            <td>
             
        <table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    
    <td width="100%" height="14" class="infoBoxHeading"><a href="http://localhost/oscom/catalog/categories.php?osCsid=eabcdfd7e9ac5157a66c2b34a1bed267"  class="box_href">Пороемся в каталоге?</a></td>

  </tr>
</table>
<script language="javascript">
                                function positon(id){
                                var a = document.getElementById(id)
                                var b = document.getElementById('ul'+id)
                                b.style.top = ''+(a.offsetTop-1)+'px';}                                
                            </script>
        <div class="menu" id=menu><ul id="ul0">
<li><a href="http://localhost/oscom/catalog/index.php?cPath=29&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">новая категория
</a>

</li>
<li onMouseOver="positon(1)" id="1"><a href="http://localhost/oscom/catalog/index.php?cPath=1&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Художественная литература
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul id="ul1">
<li><a href="http://localhost/oscom/catalog/index.php?cPath=1_17&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Биографии. Мемуары. Публицистика
</a>

</li>
<li><a href="http://localhost/oscom/catalog/index.php?cPath=1_4&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Исторический роман
</a>

</li>
<li onMouseOver="positon(8)" id="8"><a href="http://localhost/oscom/catalog/index.php?cPath=1_8&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Книга и кино
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul id="ul8">
<li><a href="http://localhost/oscom/catalog/index.php?cPath=1_8_21&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">123
</a>

</li>
<li><a href="http://localhost/oscom/catalog/index.php?cPath=1_8_30&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">321
</a>

</li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://localhost/oscom/catalog/index.php?cPath=1_6&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Проза
</a>

</li>
<li><a href="http://localhost/oscom/catalog/index.php?cPath=1_9&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Поэзия
</a>

</li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li onMouseOver="positon(2)" id="2"><a href="http://localhost/oscom/catalog/index.php?cPath=2&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Компьютерная литература
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul id="ul2">
<li><a href="http://localhost/oscom/catalog/index.php?cPath=2_19&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Базы данных
</a>

</li>
<li><a href="http://localhost/oscom/catalog/index.php?cPath=2_18&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Интернет и Web-страницы
</a>

</li>
<li><a href="http://localhost/oscom/catalog/index.php?cPath=2_20&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Основы программирования
</a>

</li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li onMouseOver="positon(3)" id="3"><a href="http://localhost/oscom/catalog/index.php?cPath=3&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Детская литература
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul id="ul3">
<li><a href="http://localhost/oscom/catalog/index.php?cPath=3_12&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Познавательная литература для детей
</a>

</li>
<li><a href="http://localhost/oscom/catalog/index.php?cPath=3_13&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Справочная литература для детей
</a>

</li>
<li><a href="http://localhost/oscom/catalog/index.php?cPath=3_15&osCsid=eabcdfd7e9ac5157a66c2b34a1bed267">Досуг1 и творчество детей
</a>

</li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>            </td>
          </tr>
          </table>
<!-- categories_eof //-->
<br>
</body>
</html>

цсска

Код



.menu {
z-index:1000;
font-size:90%;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
position:relative;
border:1px solid #c7d9ae;
border-width:1px 1px 0 1px;
background:#f8f8f9;
}

.menu li {
background:transparent;
_height:26px;
min-height:36px;
}
* html .menu li {margin-left:-16px; margin-left:0;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
_height:25px;
line-height:25px;
min-height:35px;
vertical-align:middle;
text-align:center;
width:150px;
color:#000;
text-indent:5px;
border-bottom:1px solid #c7d9ae;
background:transparent;
}
/* style the link hover */
* html .menu a:hover {color:#000; background:#e8e8e8;}

.menu :hover > a {
background:#f8f8f9;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:-1px;
left:100px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
background:#f8f8f9;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
background:#f8f8f9;
}


.menu ul.top2 {top:25px;}
.menu ul.top3 {top:51px;}

<!--[if IE 7]-->
.menu li {float:left;}
<!--[endif]-->



BODY {
  padding:0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin:10px;
}

A {
  text-decoration: underline;
    color:#666666;
}

A:hover {
  text-decoration: none;
    color:#9b5f61;    
}
table {
    color:#000000;
    font-size:12px;
}    
div {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
input {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}



.infoBox {
 // background: #b6b7cb;
 background: #c7d9ae;
}

.infoBoxContents {
  background: #f8f8f9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
 // background: #bbc3d3;
  background: #c7d9ae;
  color: #82645c;
}

TD.infoBox, SPAN.infoBox {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

умные люди, подскажите в чем проблема?

Del_Flg

Дата 6.4.2007, 16:26 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 30.3.2007

Репутация: нет
Всего: нет

спасибо за ответы, решение нашла сама
собственно вот тут не надо было делать хидден
.menu ul ul {
visibility:hidden;
}
и еще, если кому надо =)
http://www.webmascon.com/topics/coding/42a.asp

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »