很抱歉，如果这是非常基本的，但我有一个打字机博客，其中有一个横向导航菜单。一些子菜单项具有非常长的名称（每个客户端不可更改） - 幸运的是它们都在一个“部分”中。由于宽度样式适用于所有子菜单，因此仅扩大子菜单对于模板来说是有问题的 - 并且看起来也很时髦。
我希望有一种方法可以采用一个子菜单（在这种情况下，第二个名为“训练模块”）并单独应用一种风格 - 但我很难过什么会覆盖什么。如果这不起作用，有没有办法允许高度仅增加可能需要2行空间的项目？子菜单是自定义HTML，通常不能通过键盘UI进行编辑。
我还在学习CSS并且真的可以使用一些帮助。 谢谢!!
这是我的菜单http://jsfiddle.net/RpXd8/
<style type="text/css">
/* Derived from http://www.devinrolsen.com/pure-css-horizontal-menu/ */
#pagebody { position: inherit !important; width: 831px; } /* DO NOT EDIT */
#pagebody-inner { position: inherit !important; width: 100%; } /* DO NOT EDIT */
#alpha, #beta, #gamma, #delta {
display: none; /* DO NOT EDIT */
position: inherit !important; /* DO NOT EDIT */
float: left; /* DO NOT EDIT */
min-height: 1px; /* DO NOT EDIT */}
#centernav {width: 831px; /* if you want your nav centered, set this to the width of your container, if you don't want it centered, change this number to 100% */}
#dropnav
{height:40px; background:#d2d3d5;}
/* Changes the height and bg color of the main menu */
#dropnav ul
{margin:0px; padding:0px;}
#dropnav ul li
{display:inline; float:left; list-style:none; margin-left:0px; position:relative;
height: 15px;
padding: 10px 20px 15px 19px;
font-size: 14px;
valign: middle;
text-align: left;
text-decoration: none;
border-right: 1px solid #FFFFFF;
z-index: 99999}
/* only edit the last 2 items - sets the characteristics of the main menu */
#dropnav li a
{color:#000000; text-decoration:none;} /* Changes the link color of items on the main menu */
#dropnav li a:hover
{color:#900; text-decoration:none;}/* Changes the hover color of items on the main menu */
#dropnav li ul
{margin:0px; padding:0px; display:none; position:absolute; left:0px; z-index: 99999; top:40px; background-color:#d2d3d5;} /* Only edit the last 2 items - set the top margin and background color of the submenus */
#dropnav li:hover ul
{display:block;
padding: 0px;
width: 220px;
}/*sets the width of the submenus */
#dropnav li li
{list-style:none;
display:list-item;
border-right: 0 solid #000000;
border-bottom: 1px dotted #FFFFFF;
width: 220px;
padding: 5px 0 5px 20px;} /* DO NOT EDIT */
#dropnav li li a
{color:#000; text-decoration:none;} /* Changes the link color of items in the submenu */
#dropnav li li a:hover
{color:#900; text-decoration:none;} /* Changes the hover color of items in the submenu*/
li#main {padding-top: 6px;} /* Sets the padding of items in the main menu */
</style>
<div id="centernav">
<div id="dropnav">
<ul>
<li id="main">
<a href="#">Home</a>
<ul id="subnav">
<li><a href="#">About this site</a></li>
</ul>
</li>
<li id="main">
<a href="#">Training Modules</a>
<ul id="subnav">
<li><a href="#">Overview</a></li>
<li><a href="#">Technical Data Sheets</a></li>
<li><a href="#">Reference Documents</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Introduction to Modules</a></li>
<li><a href="#">1: Title</a></li>
<li><a href="#">2: Really really really really really really really long title</a></li>
<li><a href="#">3: </a></li>
<li><a href="#">4: </a></li>
<li><a href="#">5: </a></li>
<li><a href="#">6: </a></li>
<li><a href="#">7: </a></li>
<li><a href="#">8: Really really really long title</a></li>
<li><a href="#">9: </a></li>
<li><a href="#">10: </a></li>
<li><a href="#">11: Really really really really really long title</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>
<li><a href="#">16:</a></li>
<li><a href="#">17:</a></li>
<li><a href="#">18:</a></li>
<li><a href="#">19:</a></li>
</ul>
</li>
<li id="main">
<a href="#">Scientific Publications</a>
<ul id="subnav">
<li><a href="#">P</a></li>
<li><a href="#">P</a></li>
<li><a href="#">R</a></li>
<li><a href="#">C</a></li>
</ul>
</li>
<li id="main">
<a href="#">Marketing</a>
<ul id="subnav">
<li><a href="#">Brand Blueprint</a></li>
<li><a href="#">Print-ready Files</a></li>
<li><a href="#">Logos Photos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Other Sales Tools</a></li>
<li><a href="#">Webstore</a></li>
<li><a href="#">Request for Files</a></li>
<li><a href="#">Translations</a></li>
</ul>
</li>
<li id="main">
<a href="#">eNews</a>
</li>
<li id="main">
<a href="#">Attend Training</a>
<ul id="subnav">
<li><a href="#">Training Calendar</a></li>
<li><a href="#">RSVP for Training</a></li>
<li><a href="#">Typical Agenda</a></li>
<li><a href="#">Request Training</a></li>
</ul> </li>
<li id="main">
<a href="#">Contact us</a>
</li></ul>
</div>
答案 0 :(得分：0)
此更改将影响整个菜单，但这是最简单的方法。如果您查看列表项的样式，
#dropnav ul li {
display:inline;
float:left;
list-style:none;
margin-left:0px;
position:relative;
height: 15px;
padding: 10px 20px 15px 19px;
font-size: 14px;
valign: middle;
text-align: left;
text-decoration: none;
border-right: 1px solid #FFFFFF;
z-index: 99999;}
您正在声明所有列表项的高度。意味着延伸到两行的那些将会换行，容器将不会展开。为了补救，情况，只需删除高度声明。它会改变一点，看起来像这样。
#dropnav ul li {
display:inline;
float:left;
list-style:none;
margin-left:0px;
position:relative;
padding: 10px 20px 15px 19px;
font-size: 14px;
valign: middle;
text-align: left;
text-decoration: none;
border-right: 1px solid #FFFFFF;
z-index: 99999;}
这里是JS Fiddle（CSS分开）所以你可以看到它的外观。 http://jsfiddle.net/RpXd8/1/
答案 1 :(得分：0)
您可能想要尝试的另一件事是
display:block;
显示块会将元素保留在菜单块中，这样就不会有它们在该菜单项的彩色部分外包装的问题。