| |
|
|
| | Возникла проблема, делаю многоуровневое меню, и не получается сделать третий уровень, чтобы выпадал в право. Помогите плиз, уже какой день бьюсь!!!
<!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=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
margin: auto;
}
/* the horizontal menu starts here */
#listmenu a {
display:block;
text-decoration:none;
color:#069;
padding-left:4px;
padding-top:3px;
padding-bottom:3px;
}
#listmenu a:hover {
color:#F33;
}
#listmenu_drop_down a {
background-color:#fff;
}
#listmenu_drop_down a:hover {
color:#F33;
background-color:#a5d6f3;
}
#listmenu {
width:1000px; /* ширина блока */
float:left; /*выравнивание блока */
border-top:1px solid #105a7b; /* draws line */
border-bottom:1px solid #105a7b; /* draws line */
font-size:120%; /* Размер шрифта */
}
#listmenu_main {
margin-left:200px;
margin-top:0px;
margin-bottom:0px;
}
#listmenu_main li {
font-size:110%;
padding-right:30px;
float:left;
position:relative;
list-style-type:none;
}
#listmenu_drop_down {
border-left:1px solid #069; /* three sides of each drop-down item */
border-bottom:1px solid #069;
border-right:1px solid #069;
font-size:70%;
padding-left:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
width:100%; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
left:-1px;
}
#listmenu_drop_down li {
width:100%;
}
#listmenu_drop_down {
display:none;
}
#listmenu_main li:hover #listmenu_drop_down {
display:block;
}
#listmenu_pop-out_menu li {
font-size:100%;
}
/* pop-out starts here */
body div#listmenu #listmenu_main li #listmenu_drop_down li #listmenu_pop-out_menu {
visibility:hidden; /* same effect as display:none in this situation */
top:-1px;
left:150px;
}
div#listmenu #listmenu_main li #listmenu_drop_down li:hover #listmenu_pop-out_menu {
visibility:visible;
}
-->
</style>
</head>
<body>
<div id="listmenu">
<ul id="listmenu_main">
<li><a href="#">Главная</a></li>
<li><a href="#">Каталог продукции</a>
<ul id="listmenu_drop_down">
<li><a href="#">Лодки</a></li>
<li><a href="#">Грузила</a></li>
<li><a href="#">Крючки</a>
<ul id="listmenu_pop-out_menu">
<li><a href="#">одинарные</a></li>
<li><a href="#">двойные</a></li>
<li><a href="#">Другие крючки для вас</a></li>
</ul>
</li>
<li><a href="#">Удачки</a></li>
</ul>
</li>
<li><a href="#">Наши работы</a>
<ul id="listmenu_drop_down">
<li><a href="#">Оформление </a></li>
<li><a href="#">Оформление</a></li>
<li><a href="#">Оформление</a></li>
<li><a href="#">Другие работы</a></li>
</ul>
</li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<div id="leftside"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
|
| |
| |
|
