0

css を使用してドロップダウン メニューを作成しました。ドロップダウンは垂直リストではなく水平行として表示されます。私の唯一の問題は、ドロップダウン メニューがメニューの残りの部分と一致しないことです。ナビゲーションバーの左側と同じ高さにしたい。

このページは次のアドレスにあります: http://concept82.com/CBHweb/index2.html

私のドロップダウンメニューのコードは次のとおりです。

#navholder{
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
 }
#nav {
    margin: 1px;
    padding: 0px;
}
#nav li {
   list-style: none;
   float: left;
}
#nav li a {
    display: block;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    margin-top: 5px;
    text-transform: uppercase;
    text-decoration: none; 
    letter-spacing: 3px;
    width: 140px;
}
#nav li a:hover {
   color: #201E30;
}
#nav li ul {
   display: none;
}
#nav li ul a{
    width: auto;
    font-size: 11px;
}
#nav li:hover ul, #nav li.hover ul {
   position: absolute;
   left: 0;
   display: inline;
   padding-top: 5px;
}
#nav li:hover li, #nav li.hover li {
    float: left;
    display: block;
    text-decoration: none;
    color: #594361;
    font-size: 11px;
    border-right: 1px solid #594361;
    padding: 0px 15px 0px 15px;
    margin-top: 3px;
    margin-bottom: 3px;
    white-space: nowrap;
 }
 #nav li.first, #nav li.hover li.first {
    float: left;
    display: block;
    text-decoration: none;
    color: #594361;
    font-size: 11px;
    border-left: 1px solid #594361;
    padding: 2px 15px 2px 5px;
    margin-top: 3px;
    white-space: nowrap;

}
#nav li:hover li a, #nav li.hover li a {
   color: #201E30;
   background-color: #FFFFFF;
   }
#nav li li a:hover {
   color: #201E30;
   }

お早めにどうぞ！

4

2 に答える 2

0

左を 0 px として指定したリストにカーソルを合わせたときに ul を定義し、ページの左側に揃えて、余白の幅に変更すると、適切な場所に配置されます

#nav li:hover ul, #nav li.hover ul {
    position: absolute;
    left: 0;
    display: inline;
    padding-top: 5px;
}
于 2013-03-28T22:30:09.023 に答える
0

#navholderの位置を相対的に変更する必要があります。

#navholder{
position: relative;
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
 }
于 2013-03-28T22:30:30.460 に答える