0

私はかなり簡単なものを手に入れましたが、それを手に入れることができないようです。私は基本的な HTML と CSS のクラスを受講している学生で、明日締め切りの課題がありますが、ナビゲーションを仕様に合わせることができません。

次のように表示され、ポップアップするはずです。

http://ista230.com/images/assignments/7/page1.jpg

http://ista230.com/images/assignments/7/page2.jpg

現在、divをポップアップさせようとしていますが、行き詰っています。最初はナビゲーション リンクに ul を使用していましたが、div を使用した他の例を見ました。それが私がいるところです。

ナビゲーションの HTML は次のとおりです。

<nav id="nav">
       <a href="#"><div class="navItem">Home</div></a>
       <a href="#"><div class="navItem">Upcoming Flights</div></a>
       <a href="#"><div class="navItem">About Us</div></a>
       <a href="#"><div class="navItem">Travel Guide</div></a>
       <a href="#"><div class="navItem">Contact Us!</div></a>
</nav>

そして、これが私がCSSについてこれまでに持っているものです:

/* Navigation */
nav{
    margin-left:5%;
    margin-right:5%;
    margin-bottom:5%;
    margin-top:10%;
    width:100%;
}

#nav a{
    text-decoration:none;
    color:black;
}

div.navItem
{

    list-style:none;
    padding:2% 4%;
    display:inline;
    background-color:orange;
    border:5px solid #597CBB;
    border-radius:10px;
}
.navItem div{

    -moz-transition: height 1s ease; /* Firefox 4 */
    -webkit-transition: height 1s ease; /* Safari and Chrome */
    -o-transition: height 1s ease; /* Opera */
    -ms-transition: height 1s ease; /* IE9 (maybe) */
    transition:height 1s ease;

}

.navItem:hover div
{
    height:500px;
}
4

1 に答える 1

0

davidpauljuniorが言ったように、クラス内で div を変更していないため、に変更.navItem:hover divする必要があります。クラスで div 自体を変更しています。div.navItem:hovernavItemnavItem

display:inline-blockdiv の高さを設定できるように、クラス navItem の表示も変更する必要があります。display:inline要素の高さを設定することはできません。

css に加える必要がある変更は次のとおりです。

/* Navigation */
nav{
    margin-left:5%;
    margin-right:5%;
    margin-bottom:5%;
    margin-top:10%;
    width:100%;
}

#nav a{
    text-decoration:none;
    color:black;
}

div.navItem
{

    list-style:none;
    padding:2% 4%;
    display:inline-block;
    background-color:orange;
    border:5px solid #597CBB;
    border-radius:10px;
    -moz-transition: height 1s ease; /* Firefox 4 */
    -webkit-transition: height 1s ease; /* Safari and Chrome */
    -o-transition: height 1s ease; /* Opera */
    -ms-transition: height 1s ease; /* IE9 (maybe) */
    transition:height 1s ease;

}

div.navItem:hover{
    height:500px;
}
于 2013-11-11T04:05:43.110 に答える