Вертикальное выпадающее меню ограничивается границей блока?

Leonidk · September 2, 2010

Доброго времени суток!

Сразу оговорюсь: далеко не волшебник, а только учусь.

При создании вертикального выпадающего меню столкнулся с проблемой:

Если меню ставить вне блока - все нормально работает, но когда это же меню вставляю в блок - при наведении на пункт с подкатегорией выпадает меню только в пределах блока и под основным.

Помогите если возможно!

Заранее благодарен!

Сайт: http://ipplaneta.ru

Линк:

<head>
<link rel="stylesheet" type="text/css" href="{THEME}/css/cssverticalmenu.css"/>
<script type="text/javascript" src="{THEME}/css/cssverticalmenu.js">
</script>
</head>

код блока:

<div class="text">
<h3 class="dbx-handle">Тест блока</h3>
<div class="dbx-content">
<ul id="verticalmenu" class="glossymenu">
<li><a href="#">Тест</a></li>
<li><a href="#">Тест1</a></li>
<li><a href="#">Тест2</a></li>
<li><a href="#">Тест3</a>
<ul>
<li><a href="#">Тест4</a></li>
<li><a href="#">Тест5</a></li>
<li><a href="#">Тест6</a></li>
</ul>
</li> <li><a href="#">Тест7</a></li>
<li><a href="#">Тест8</a></li>
<li><a href="#">Тест9</a>
<ul>
<li><a href="#">Тест10</a></li>
<li><a href="#">Тест11</a></li>
<li><a href="#">Тест12</a></li>
<li><a href="#">Тест13</a></li>
<li><a href="#">Тест14</a></li>
<li><a href="#">Тест15</a></li>
</ul>
</li>
</ul>
</div>
</div>

CSS

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
}
.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(arrow.gif) no-repeat center right;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */

javascript

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.
function createcssmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

Searcher · September 2, 2010

Есть такое свойство overflow, вот оно то и заведует отображением того, что выходит за пределы элемента.

Leonidk · September 2, 2010

Есть такое свойство overflow, вот оно то и заведует отображением того, что выходит за пределы элемента.

Спасибо, сейчас попробую

Searcher · September 2, 2010

Обратите внимание на класс dbx-content в нем то и вся загвоздка

Leonidk · September 2, 2010

Я извиняюсь за назойливость (и безграмотность) но не подскажите, где поставить "overflow,"?

Searcher · September 2, 2010

Я извиняюсь за назойливость (и безграмотность) но не подскажите, где поставить "overflow,"?

Ставить не надо. Свойство это в блоке с классом dbx-content установлено уже. Свойство это имеет значение там hidden. Почитав о значениях этого свойства вы узнали бы: hidden скрывает все выходящее за пределы блока.

По умолчанию имеют элементы значение свойства overflow как visible, т.е. видно все, что выходит за пределы. Вывод какой? Удалите из класса dbx-content это свойство и скрываться ничто не будет от взгляда.

Leonidk · September 2, 2010

Спасибо за науку, сейчас буду изучать эту тему.

Sign In

Вертикальное выпадающее меню ограничивается границей блока?

Question

Leonidk

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Leonidk

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Leonidk

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Leonidk

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information