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说的那样，您需要更改.navItem:hover div为div.navItem:hover，因为您没有修改类内部的 div navItem- 您正在使用类修改 div 本身navItem。

您还需要将类 navItem 的显示更改为，display:inline-block以便能够设置 div 的高度。您不能设置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 回答