3

開いたページに子がある場合に展開するメニューに取り組んでいます。次のようになります。

http://jsfiddle.net/phacer/qzykv/

明るい灰色の内部メニューのすぐ下には、その < li > 親からのパディングが少しあります。行の高さを使用することを考えていましたが、メニュー項目が 2 行のテキストになっている場所があります。また、各アイテム間に点線の境界線を使用する必要があります。

私が今持っているものを手に入れる方法についての提案はありますが、子供を持つ親のためのパディングはありませんか?

html:

<nav>
<ul class="menu"><li class="first"><a href="#" title="" >Home</a></li>
<li class="active"><a href="#" title="" >Home</a><ul><li class="first"><a href="#" title="" >Home</a></li>
<li><a href="#" title="" >Home</a></li>
<li class="last"><a href="#" title="" >Home</a></li>
</ul></li>
<li><a href="#" title="" >Home</a></li>
<li><a href="#" title="" >HomeHome HomeHome Home HomeHome </a></li>
<li><a href="#" title="" >Home</a></li>
<li><a href="#" title="" >Home</a></li>
<li><a href="#" title="" >Home</a></li>
<li class="last"><a href="#" title="Contact" >Contact</a></li>
</ul>
</nav>​

CSS:

nav { width: 165px; min-height: 500px; position: relative; display: inline-block; float: left; }
nav ul li { padding: 10px 0 10px 20px; }
nav ul li a { margin-right: 10px; max-width: 125px; }
nav ul li.first { padding-top: 23px; }
nav ul li ul { margin-left: -20px; margin-top: 10px; }
nav ul li ul li { padding-left: 30px; }
nav ul li ul li.first { padding-top: 10px; }
nav ul li ul li ul { margin-left: -30px; margin-top: 10px; }
nav ul li ul li ul li{ padding-left: 40px; }
nav ul li ul li ul li.first { padding-top: 10px; }

nav ul li.active ul li a,
nav ul li.active ul li a:visited,
nav ul li.active ul li.active ul li a,
nav ul li.active ul li.active ul li a:visited       { color: #5c5c5c; }
nav a:hover,
nav ul li.active a                                  { color: #e0001b; }
nav ul li.active ul li.active a,
nav ul li.active ul li.active ul li.active a,
nav ul li.active ul li a:hover,
nav ul li.active ul li.active a:hover  { color: #91298e; }

nav                 { background: #5c5c5c repeat-x left top; }
nav ul li           { border-bottom: 1px dotted #fff; }
nav ul li ul        { background: #d6d6d7; }
nav ul li ul li     { border-bottom: none; border-top: 1px dotted #555; }
nav ul li ul li ul  { background: #ecedee; }

nav { font-size: 12px; list-style-type: none; line-height: 14.5px; text-align: left; }
4

2 に答える 2

1

css に追加して、アクティブのnav ul li.active{padding:10px 0 0 10px;}下部パディングを削除する必要がありますliul

http://jsfiddle.net/qzykv/5/を参照してください

于 2012-11-22T15:13:16.293 に答える
0

CSS に次の行を追加する必要があります。子を持つ親 li のパディングを削除します。

nav ul li.active{padding:0px;}
于 2012-11-22T15:02:47.957 に答える