これが本当に初歩的なものである場合は申し訳ありませんが、私は水平ナビゲーションメニューがあるタイプパッドブログを持っています。一部のサブメニュー項目には非常に長い名前が付いています(クライアントごとに変更することはできません)。幸い、これらはすべて1つの「セクション」に含まれています。幅のスタイルはすべてのサブメニューに適用されるため、サブメニューを広げるだけではテンプレートにとって問題があり、ファンキーにも見えます。
1つのサブメニュー(この場合は「トレーニングモジュール」という名前の2番目のサブメニュー)を取得して、それだけにスタイルを適用する方法があることを望んでいますが、何が何をオーバーライドするのかについて困惑しています。それでもうまくいかない場合は、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>