2012-01-25 135 views
1

我有一個佈局錯誤試圖呈現在菜單中兩行可以從最低的元素可以看出,當:如何解決這個佈局錯誤?

enter image description here

,這是否是

<li class="top level1 parent"><a href="how-it-works/" title="It Works" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" /><span class="level1">Opportunity</span><span class="level2">Opportunity</span><img class="level2" src="/welcome/static/images/bullet07.png" border="0" alt="" /></a><ul> 
    <li class="top first level2 parent"><a href="/how-to-join/" title="Nano Silver Works" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" /><span class="level1">How to join</span><span class="level2">How to join</span></a><ul> 
<!-- <li class="first level3"><a href="how-it-works/proving/scientific-testing" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Scientific Testing</a></li> 
<li class="last level3"><a href="how-it-works/proving/medical-testing" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Medical Testing</a></li>--> 

</ul></li> 
<li class="level2"><a href="how-it-works/history-of" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Why is MLM the Answer</a></li> 
<li class="top last level2 parent"><a href="how-it-works/not-ionic-silver/" title="" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" /><span class="level1">Why are we right now right here for you</span><span class="level2">Why are we right now right here for you</span><img class="level2" src="/welcome/static/images/bullet07.png" border="0" alt="" /></a><ul> 
    <li class="first level3"><a href="how-it-works/not-ionic-silver/not-colloidal-silver" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Marketing plan</a></li> 
<li class="last level3"><a href="how-it-works/not-ionic-silver/silver-particle-size-matters" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Volume bonus</a></li> 
<li class="last level3"><a href="how-it-works/not-ionic-silver/silver-particle-size-matters" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Growth and Incentives</a></li> 
</ul></li> 

</ul></li> 

我也有HTML樣式表menu.css看起來像這樣

#multi-ddm { 
    list-style:none; 
    padding:20px 0 0 0; 
    margin:0; 
    float:right; 
} 

#multi-ddm li { 
    float:left; 
    margin:0 2px 0 2px; 
    font-size:16px; 
} 

#multi-ddm li li { 
    float: none; 
} 

#multi-ddm li li a { 
    float: none; 
} 

#multi-ddm li a { 
    display: block; 
    padding:0 5px 0 0; 
    color:#a9cfdd; 
    cursor:pointer; 
    float:left; 
} 

#multi-ddm li a span.level1 { 
    float:left; 
    padding:7px 6px 7px 11px; 
} 

#multi-ddm li a img.level2 { 
    position: absolute; 
    margin-top: -14px; 
    margin-left: 145px; 
} 

#multi-ddm li.first a img.level2 { 
    position: absolute; 
    margin-top: -13px; 
    margin-left: 145px; 
} 

#multi-ddm li.level1.active a, 
#multi-ddm li.level1 a:hover { 
    text-decoration:none; 
    color:#f6f6f6; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.png) no-repeat 100% -32px; 
} 

#multi-ddm li.active a span.level1, 
#multi-ddm li a:hover span.level1 { 
    text-decoration:none; 
    color:#f6f6f6; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.png) no-repeat; 
} 

#multi-ddm li.top a.parent-hover 
{ 
    text-decoration:none; 
    color:#f6f6f6; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active2.png) no-repeat 100% -32px; 
} 

#multi-ddm li.top a.parent-hover span.level1 { 
    text-decoration:none; 
    color:#f6f6f6; 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active2.png) no-repeat; 
} 

#multi-ddm li a .cufon { 
    float:left; 
    margin:0 !important; 
} 

#multi-ddm li a img { 
    display: none; 
} 

#multi-ddm li a span.level2 { 
    display:none; 
} 

#multi-ddm li ul a { 
    width: 147px; 
    padding: 7px 10px 7px 18px !important; 
    font-size: 12px; 
    border-bottom: 1px #02699f solid; 
    border-top: 1px #14a2df solid; 
    background:#148bb4; 
    text-transform:none !important; 
} 

#multi-ddm ul li.level2 a { 
    background:#148bb4 !important; 
    color:#f6f6f6; 
} 

#multi-ddm ul li.level2 a:hover { 
    color:#aae7f9 !important; 
} 

#multi-ddm li ul a img { 
    display:block !important; 
} 

#multi-ddm li ul a span.level1 { 
    display:none !important; 
} 

#multi-ddm li ul a span.level2 { 
    display:block !important; 
} 

#multi-ddm li ul li ul a { 
    width: 147px; 
    padding: 7px 10px 7px 18px !important; 
    font-size: 12px; 
    border-bottom: 1px #02699f solid; 
    border-top: 1px #14a2df solid; 
    background:#148bb4; 
    text-transform:none !important; 
} 

#multi-ddm li ul li ul { 
    margin-left:168px !important; 
    margin-top:-31px !important; 
} 

*:first-child + html #multi-ddm li ul li ul, 
*:first-child + html #multi-ddm li ul li.first ul, 
*:first-child + html #multi-ddm li ul li.last ul { 
    margin-left:168px !important; 
    margin-top:-34px !important; 
} 

#multi-ddm ul li.first a { 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat !important; 
    border-top:none; 
} 

#multi-ddm ul li.last a { 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat 0 -31px !important; 
    border-top: 1px #14a2df solid; 
    border-bottom:none; 
} 

#multi-ddm ul li.last ul li a { 
    background:#148bb4 !important; 
    border-bottom: 1px #02699f solid; 
} 

#multi-ddm ul li.last ul li.first a { 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat !important; 
    border-top: none; 
    border-bottom: 1px #02699f solid; 
    margin-top:1px; 
} 

#multi-ddm ul li.last ul li.last a { 
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat 0 -31px !important; 
    border-bottom: none; 
    border-top: 1px #14a2df solid; 
} 

#multi-ddm li ul { 
    display: none; 
    list-style: none; 
    position: absolute; 
    margin-top: 29px; 
    margin-left: -2px; 
    z-index: 10000; 
    padding: 0; 
} 

*:first-child + html #multi-ddm li ul { 
    margin-left:-100% !important; 
} 

*:first-child + html #multi-ddm li ul li { 
    margin-left:0 !important; 
} 

*:first-child + html #multi-ddm ul li.top.level2.parent { 
    margin-bottom: -3px; 
} 

你能告訴我我需要做什麼來解決這個佈局BU G?謝謝

回答

4

不知道我是否理解正確,但我認爲這是因爲按鈕背景是圖像,因此無法伸展以適應文本。有更好的方式來做你的事情,包括現代的CSS3技術。

另外,當你在它的時候,請考慮檢查你的CSS - 它看起來好像需要大量的優化。