1

私はここhttp://surfthecurve.ca/にこのサイトを持っています、そして私はドロップダウンメニューがある各ナビゲーションアイテムのためのナビゲーションを持っています、メニューはうまく働きます、私はそれを垂直に動かすことができないようです。

これがナビゲーション用のCSSです

.navigation{
    width:100%;
    background-color:#353636;
    font-size:18px;
    float:left;
}

.navigation ul {
    list-style-type: none;
    margin: 0 auto;
    width:825px;
}

.navigation li {
    float: left;
}


.navigation ul a {
    color: #ffffff;
    display: block;
    padding: 0 105px 0 0;
    text-decoration: none;
    width:100%;
    text-align:center;
    text-transform:uppercase;
}

ドロップダウンのCSS

.submenu {
    display: none;
}

.submenu li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 5px 15px 5px 15px;
    margin-left: 1px;
    white-space: nowrap;
}

.navigation li:hover .submenu {
    display: block;
    position: absolute;
}

.navigation li:hover .submenu li {
    float: left;
    font-size: 13px;
}


ul li a:hover {
background: #353636;
}

li:hover a { 
    background: #353636; 
}

li:hover li a:hover {
    background: #353636;
}

.navigation ul li ul li a{
    padding-left:10px !important;
    padding-right:10px !important;
    padding-top:0px !important;
    padding-bottom:0px !important;
}

これがHTMLです

<div class="navigation">
<ul>

<li><a href="http://surfthecurve.ca/?page_id=9">tutoring</a>
<ul class="submenu">
<li><a href="#">Our Approach</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</li>

<li><a href="http://surfthecurve.ca/?page_id=7">the cause</a>
<ul class="submenu">
<li><a href="#">How It Works</a></li>
<li><a href="#">How We Give</a></li>
<li><a href="#">Why We Give</a></li>
</ul>
</li>

<li><a href="http://surfthecurve.ca/?page_id=11">company</a>
<ul class="submenu">
<li><a href="#">About Us</a></li>
<li><a href="#">Let's Get In Touch</a></li>
</ul>
</li>

<li><a href="http://surfthecurve.ca/?page_id=13">get involved</a>
<ul class="submenu">
<li><a href="#">Students</a></li>
<li><a href="#">Work For Us</a></li>
</ul>
</li>

</ul>
</div><!--navigation-->

メニューが垂直になるようにこれを修正するにはどうすればよいですか？

よろしくお願いします。

J

4

1 に答える 1

1

これは、垂直に表示するのに十分簡単なはずです。

.submenu li {
  clear: both;
}

個々のli要素は異なるサイズであるため（要素はテキストのサイズにシュリンクラップされます）、ここでスタイルを設定する必要があります。

于 2012-09-21T15:22:40.190 に答える