How to solve this layout bug?

Question

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

enter image description here

The HTML that does this is

OpportunityOpportunity
  How to joinHow to join



Why is MLM the Answer
Why are we right now right here for youWhy are we right now right here for you
  Marketing plan
Volume bonus
Growth and Incentives

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

avramov · Accepted Answer

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.

How to solve this layout bug?

Answers (1)

Related Questions