鏈接互相重疊

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