如何優化導航欄的大小調整？

我剛剛在6天前開始學習html和css。我每天做一個小時，而且我有很多樂趣。我嘗試瞭解我自己的大部分問題，但我一直在尋找解決此問題的資源的麻煩。如何優化導航欄的大小調整？

@import url(http://fonts.googleapis.com/css?family=Merriweather); 

* 
{ 
    text-decoration: none; 
    box-sizing: border-box; 
} 

body 
{ 
    background-color: #ff9900; 
    font-family: 'Merriweather', serif; 
} 

#page 
{ 
    margin: -8px; 
} 

#wrapper 
{ 
    /*margin: 1px;*/ 
} 

h2>a 
{ 
    margin: -25px; 
    float: left; 
    background-color: #ffde00; 
    color: #097054; 
    padding: 20px; 
} 

h2>a:hover 
{ 
    color: #ffde00; 
    transition: .5s ease; 
    background-color: #6599ff; 
} 

.container 
{ 
    padding: 6px; 
    padding-right: 50px; 
    padding-left: 20px; 
    text-align: center; 
    background-color: #097054; 
} 

ul li 
{ 
    background-color: #ffde00; 
    display: inline; 
    margin: 0 auto; 
    padding: 10px; 
    color: #097054; 
    font-weight: 900; 
    font-size: 14pt; 
} 


ul li:hover 
{ 
    transition: .5s ease; 
    background-color: #097054; 
    border-color: #25C1BC; 
    color: #ffde00; 

} 

#p1 
{ 
    color: #097054; 
    height: 25em; 
    width: 25em; 
    background-color: #097054; 
    margin-left: 8px; 
    margin-top: 20px; 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
} 

p 
{ 
    background-color: #ffde00; 
    padding: 20px; 
    margin-top: 8px; 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
} 

#p1:hover; 
{ 
    /*background-color: #000000;*/ 
} 

p:hover 
{ 
    height: -75%; 
    width: -75%; 
    padding-bottom: 3.8em; 
    box-shadow: -5px -5px 0px 0px #097054; 
    margin-top: 3em; 
    color: #ffde00; 
    background-color: #6599ff; 
    font-weight: 600; 
}

本質上發生的是我的導航欄在調整大小後會變得非常混亂。這會導致鏈接重疊，看起來非常糟糕。

謝謝你的時間和考慮。

http://jsfiddle.net/JZ9LZ/

來源

2014-02-14 travishaviv