抱歉，如果这真的是初级的，但我有一个typepad博客上有一个水平导航菜单。一些子菜单项有很长的名字(每个客户端都不能改变)——幸运的是，它们都在一个"部分"中。因为宽度样式适用于所有的子菜单，只是扩大子菜单对模板来说是有问题的——看起来也很时髦。
我希望有一种方法可以采取一个子菜单(在这种情况下第二个名为"培训模块")，并单独应用一种风格-但我被难住了，什么是要覆盖什么。如果这不起作用，是否有一种方法允许高度只增加项目，可能需要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>
这个更改将影响整个菜单，但这是最简单的方法。如果您查看列表项的样式，
#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小提琴(与CSS分隔)，所以你可以看到它的样子。http://jsfiddle.net/RpXd8/1/
您可能想要尝试的另一件事是
display:block;
显示块将元素保持在菜单块中，这样您就不会有它们在该菜单项的彩色部分外换行的问题。