Question

I have a layout bug when trying to render two lines in a menu as can be seen from the lowest element:

The HTML that does this is

<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>

I also have a stylesheet menu.css that looks like this

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

Can you tell me what I need to do to resolve this layout bug? Thank you

Answer 1

Not sure if I’m understanding this correctly, but I think it’s because the button backgrounds are images, and therefore can’t stretch to fit the text. There are better ways of doing what you’re after, including modern CSS3 techniques.

Also, while you’re at it, please consider reviewing your CSS – it looks as if it needs a good deal of optimization.