Question

我有一个非常简单的但我似乎无法得到它。我是一名基础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;
}

Answer 1

像 davidpauljunior 所说，你需要将.navItem:hover div更改为div.navItem:hover，因为你没有修改类navItem中的div - 你正在修改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;
}

弹出一个导航菜单

1 个答案: