まず、コードは次のとおりです。
#menu {
padding:0;
margin-top:0px;
position:absolute;
top:0px;
width:100%;
float:left;
overflow:hidden;
}
#menu li {
list-style:none;
float: left;
position: relative;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border:1px solid black;
background-image: linear-gradient(#F2FF00, #AEFF00);
margin-left:10px;
}
#menu a {
display:block;
padding:auto;
text-align:center;
padding:10px 10px;
color: #0095FF;
text-transform: uppercase;
font: bold 25px Arial, Helvetica;
text-decoration: none;
text-shadow: 1px 1px 2px #0095FF;
}
ウィンドウを縮小するとボタンが下に移動します。高さをメニューに設定して変更できない場合でも、ボタンがメニュー要素の外に出てしまうのはなぜですか?
ここに jsFiddle があります: http://jsfiddle.net/nqdXc/