0

これが本当に初歩的なものである場合は申し訳ありませんが、私は水平ナビゲーションメニューがあるタイプパッドブログを持っています。一部のサブメニュー項目には非常に長い名前が付いています(クライアントごとに変更することはできません)。幸い、これらはすべて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>

4

2 に答える 2

0

あなたが試してみたいかもしれないもう一つのことは

display:block;

表示ブロックは、メニューのブロック内の要素を保持するため、そのメニュー項目の色付きの部分の外側で要素が折り返されるという問題は発生しません。

于 2013-01-05T07:19:50.063 に答える
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;}

すべてのリストアイテムの高さを宣言しています。つまり、2行に伸びているものは折り返され、コンテナは拡張されません。状況を改善するには、高さ宣言を削除するだけです。このように少し変化します。

#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;}

これはJSFiddle(CSSが分離されている)にあるので、どのように見えるかを確認できます。 http://jsfiddle.net/RpXd8/1/

于 2013-01-04T22:15:34.883 に答える