У меня есть меню, которое содержит подменю.Его исходный HTML-код выглядит следующим образом:
<ul id="menu">
<li>
<a href="javascript:;">Menu 1</a>
<ul>
<li><a href="javascript:;">Item 1<a></li>
<li>
<a href="javascript:;">Subitem 1</a>
<ul>
<li><a href="javascript:;">Subsubitem 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
После применения CSS и наведения порядка в JavaScript с Superfish меню в браузере выглядит следующим образом:
Меню http://img838.imageshack.us/img838/1288/menu.jpg
Второй элемент меню слишком большой, чтобы поместиться в его пространство, поэтому остальная часть текста отображается в тексте следующего элемента меню.Есть ли способ увеличить <ul>
, чтобы убедиться, что текст подходит?
Обновление : вот соответствующий код CSS:
ul#menu {
position: relative;
top: 160px;
left: 130px;
width: 700px;
}
ul#menu, ul#menu ul {
list-style-type: none;
}
ul#menu > li {
display: block;
float: left;
background: url(img/menuitem.png) top left;
width: 104px;
height: 37px;
margin-right: 5px;
text-align: center;
}
ul#menu > li:hover {
background-position: bottom left;
}
ul#menu > li > a {
height: 100%;
padding-top: 10px;
font-size: 80%;
font-weight: bold;
color: white;
}
ul#menu > li > a, ul#menu > li > ul a {
display: block;
text-decoration: none;
}
ul#menu > li ul {
min-width: 150px;
}
ul#menu > li > ul li {
color: black;
font-size: 10pt;
text-align: left;
padding-left: 5px;
padding-right: 5px;
height: 30px;
line-height: 30px;
background: url(img/menubg.png) repeat;
}
ul#menu > li > ul li:hover {
background-color: #9c938c;
}
ul#menu > li > ul a {
color: black;
}
ul#menu > li ul {
position: relative;
top: -10px;
}
ul#menu > li li.hoverItem > ul {
position: relative;
top: -30px;
}
ul#menu > li > a > span.sf-sub-indicator {
display: none;
}
ul#menu > li > ul > li a > span.sf-sub-indicator {
float: right;
margin-right: 5px;
}
span.sf-sub-indicator
и li.hoverItem
используются Superfish.sf-sub-indicator
используется, чтобы указать, что при наведении курсора на элемент меню открывается подменю следующим образом:
<li>
<a href="javascript:;" class="sf-with-ul">Menu item with submenu<span class="sf-sub-indicator"> »</span></a>
<ul>
<!-- Etc -->
</ul>
</li>
li.hoverItem
применяется ко всем пунктам меню, которые вы передали, чтобы попасть в меню, гдеуказатель мыши и пункт меню, над которым в данный момент наведена мышь.