[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: проблема с меню на цсс
Markus111
Здравствуйте.
Подскажите как сделать.
Есть правый и левый блок, я сделал их через float left
В левый блок ставлю меню, навожу на меню появляется подменю и это подменю выезжает на правый блок и когда я получается навожу на подменю и при этом навожу на правый блок подменю закрывается, подскажите что делать

_____________
Womans in your town
Markus111
вот код
#left{float: left;width: 300px;}
#right{float: left;width: 665px;margin-left: 15px;background: #000;opacity: 0.9;color: #fff;padding: 20px;}

.sf-menu, .sf-menu * {margin:0;padding: 0;list-style:none;}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em;
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit;
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em;
z-index: 99;
position: absolute;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
z-index: 99;
position: absolute;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em;
top: 0;
position: absolute;
z-index: 99;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
position: absolute;
z-index: 99;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em;
top: 0;
position: absolute;

}
.sf-menu a {
border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited {
color: #13a;
}
.sf-menu li {
background: #000;opacity: 0.9;
}
.sf-menu li li {
background: #000;opacity: 0.9;
}
.sf-menu li li li {
background: #000;opacity: 0.9;
}
.sf-menu li:hover, .sf-menu li.sfHover,.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #c1c1c1;opacity: 0.9;
outline: 0;
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em;
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../img/right.gif') no-repeat -10px -100px;
}
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
.sf-vertical, .sf-vertical li {
width: 17em;
}
.sf-vertical li:hover ul,.sf-vertical li.sfHover ul {
left: 17em;
top: 0;position: absolute;z-index: 1;}

.sf-vertical a > .sf-sub-indicator { background-position: 0 0; }





<div id="left">
<div
class="left_menu">

<ul
id="sample-menu-3" class="sf-menu sf-vertical">
<li
class="current">
<a
class="sf-with-ul" href="#a">1</a>
<ul>
<li
class="current">
<a
href="#aa">2</a>
</li>
<li
class="current">
<a
class="sf-with-ul" href="#ab">2</a>
<ul>
<li
class="current"><a href="#">menu item</a></li>
<li><a
href="#aba">menu item</a></li>
</ul>
</li>
<li>
<a
class="sf-with-ul" href="#">2</a>
<ul>
<li><a
href="#">menu item</a></li>
<li><a
href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a
class="sf-with-ul" href="#">2</a>
<ul>
<li>
<a
class="sf-with-ul" href="#">2tem</a>
<ul>
<li><a
href="#">menu item</a></li>
<li><a
href="#">menu item</a></li>
</ul>
</li>
<li>
<a
class="sf-with-ul" href="#">2</a>
<ul>
<li><a
href="#">menu item</a></li>
<li><a
href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
</ul>


</div>
</div>
<div
id="right">


</div>


_____________
Womans in your town
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.