链接互相重叠

Question

当您将鼠标悬停在他们上方时，我网站上的链接（关于图库和联系人）会重叠。在“关于”选项卡上中途有鼠标时，“画廊”选项卡将突出显示，同样，如果在“画廊”选项卡中间有鼠标，则“联系人”选项卡将突出显示。同样的问题发生在底部的选项卡上。

http://www.redechoevents.co.uk/

/*Logo 
------------------------------------------------------------ */ 
#logo-image { 
    position: absolute; 
    left: 100%; 
    bottom: 0; 
    width: 217px; 
    height: 628px; 
    z-index: 2; 
    overflow: hidden; 
} 

#about { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 89px; 
    width: 336px; 
} 

span.title-link { 
    font-size: 6.8em; 
    font-weight: bold; 
    font-family: 'Titillium Web', Arial, sans-serif; 
    text-decoration: none; 
    line-height: 93px; 
    cursor: pointer; 
    opacity: 0; 
    display: inline-block !important; 
} 

span.title-link a { 
    color: #FFF; 
    text-decoration: none; 
    display: inline-block !important; 
} 

.title-link a:hover { 
    color: #E91F4C; 
    display: inline-block !important; 
} 

#about-red { 
    left: -104px; 
    width: 545px; 
} 

#logo-red { 
    height: 93px; 
    width: 209px; 
    position: absolute; 
    left: 336px; 
} 

/*Echo 
------------------------------------------------------------ */ 
#gallery { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 92px; 
    width: 434px; 
} 

#gallery-echo { 
    left: -202px; 
    width: 714px; 
} 

#logo-echo { 
    height: 93px; 
    width: 280px; 
    position: absolute; 
    left: 434px; 
} 

/*Events 
------------------------------------------------------------ */ 
#contact-events { 
    left: -216px; 
    width: 862px; 
} 

#contact { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 92px; 
    width: 448px; 
} 

#logo-events { 
    height: 93px; 
    width: 414px; 
    position: absolute; 
    left: 448px; 
} 

Answer 1

试试这个

.container { 
    overflow-y: hidden; 
} 

而调整width为#about-red，#gallery-echo和#contact-events至少900px，所以你没得到一个水平滚动条。

#about-red, 
#gallery-echo, 
#contact-events { 
    width: 900px; 
}