对不起，如果这真的很初级，但我有一个打字板博客，上面有一个水平导航菜单。一些子菜单项的名称很长（每个客户都不能更改） - 幸运的是它们都在一个“部分”中。由于宽度样式适用于所有子菜单，因此仅扩大子菜单对模板来说是有问题的——而且看起来也很时髦。
我希望有一种方法可以获取一个子菜单（在这种情况下是第二个名为“Training Modules”的子菜单）并单独对其应用一种样式 - 但我对什么会覆盖什么感到困惑。如果这不起作用，有没有办法只在可能需要 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>