【发布时间】：2014-12-20 23:42:17
【问题描述】：
我在我的博客上创建了这个下拉菜单，我想向它添加另一个级别。因此，如果我有“目的地”和国家/地区列表，我希望将其拆分为例如：欧洲 - 波兰等，亚洲 - 东京......等等。我在这里查看了许多其他问题并按照说明进行操作，但我所做的只是没有显示出额外的水平。
我的代码在这里：
<div id='menubar'>
<ul id='menus'>
<li><a href='LINK'>Travelling</a>
<ul>
<li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Report'>Reports</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Guide'>Guides</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Advice'>Advice</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Budget%20Travel'>Budget Travel</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Publications'>Publications</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Travel%20Misc'>Other</a></li>
</ul>
<li><a href='LINK'>Destinations</a>
<ul>
<li><a href='http://www.theroamingrenegades.com/search/label/Egypt'>Egypt</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Poland'>Poland</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Ukraine'>Ukraine</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/USA'>The USA</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Russia'>Russia</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Japan'>Japan</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Hungary'>Hungary</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Portugal'>Portugal</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/England'>England</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/France'>France</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Wales'>Wales</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Scotland'>Scotland</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Ireland'>Ireland</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Greece'>Greece</a></li>
</ul>
<li><a href='LINK'>Adventures</a>
<ul>
<li><a href='http://www.theroamingrenegades.com/search/label/Adventures%20Mountains'>Mountains</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Adventures%20Climbing'>Climbing</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Adventures%20Urbex'>Urbex</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Adventure%20Slackline'>Slackline</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Adventure%20Skateboarding'>Skateboarding</a></li>
</ul>
<li><a href='http://www.theroamingrenegades.com/search/label/Experiences%2F%20Stories'>Experiences</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Motivational'>Motivation/ Rants</a></li>
<li><a href='https://www.facebook.com/Hilditchshortexplore/photos_stream?tab=photos_albums'>Travel Photos</a></li>
<li><a href='LINK'>Music</a>
<ul>
<li><a href='http://www.theroamingrenegades.com/search/label/Music%20Gigs'>Gigs</a></li>
<li><a href='http://www.theroamingrenegades.com/p/music.html'>Bands Seen List</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Music%20Festivals'>Festivals</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Music%20Experiences'>Experiences</a></li>
</ul>
<li><a href='LINK'>Other</a>
<ul>
<li><a href='http://www.theroamingrenegades.com/search/label/Other%20Tattoos'>Tattoos</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Other%20Pets'>Pets</a></li>
<li><a href='http://www.theroamingrenegades.com/2014/09/getting-married-in-nyc.html'>Our NEW YORK Wedding!</a></li>
<li><a href="http://www.nichilditch-short.co.uk"_blank">Nic's Art & Design Blog</a></li>
<li><a href='http://www.theroamingrenegades.com/search/label/Other%20Year%20Review%2F%20Plan'>Year Plans & Reviews</a></li>
</ul>
</li></li></li></li></li></ul>
我认为相关的 CSS 是：
<b:variable default='960px' name='content.width' type='length' value='1010px'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='300px'/>
<![CDATA[
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
【问题讨论】：
-
如果您在不丢失问题的情况下将 HTML 和 CSS 缩减到尽可能小，将不胜感激；特别是，HTML 中的所有这些菜单条目大多是不必要的。只需在一个菜单中放入一两个，在另一个菜单中放入一两个即可。
-
您发布的 CSS 与您拥有的 HTML 无关。找到正确的 CSS 并更改它
标签： html drop-down-menu blogger cascadingdropdown