html 中的下拉元素没有 link

Question

我只是 html 和 css 的初学者。我目前正在开发我的 activity，我已经在其中添加了从教程中获得的导航栏。我的问题是下拉菜单中的 link 不起作用。这是我的代码：

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <title> CWP - 111 HW1</title>
        <link href = "style.css" rel = "stylesheet">
    </head>

    <body>

         <div id="container">

           <header><image src = "ue.jpg" style = "width: 1300px; height: 200px" > </header>

        <nav class= "nav-main">
            <ul>
                <li class = "dropdown">Home</li>    

                    <li><a href  = "#" class = "dropdown">Assignments</a>
                    <div class = "content">
                        <div class = "content-sub">
                            <ul>
                                <li><a href = "test.html #">test 1</a></li><!doesn work>
                                <li><a href = "test.html">test 2</a></li><!doesn work>
                            </ul>
                        </div>

                    </div>
                </li>

                <li><a href  = "#" class = "dropdown">Activities</a>
                        <div class = "content">
                                <div class = "content-sub">
                                    <ul>
                                     <!Link testing>
                                    <li><a href = "test.html #">test 3</a></li><!doesn work>
                                    <li><a href = "test.html">test 4</a></li><!doesn't work>
                                </ul>
                            </div>

                    </div>
                </li>



            <li class = "dropdown">About</li>
        </ul>
    </nav>

CSS

#container {
    margin: auto;
    width: 1300px;
}
header,nav,div,footer{
    display: block;
}
.nav-main{

    width: 100%;
    background-color: #660000;
    padding: 0px;
    margin-top: 10px;
    height: 70px;

}
.nav-main > ul{

        margin: 0;
        padding: 0;
        float: left;
        list-style-type: none;

}
.nav-main > ul > li{

        float: left;
}
.dropdown{
    display: inline-block;
    padding: 15px 20px ;
    height: 40px;
    line-height: 40px;
    color: white;
    text-decoration: none;
}

.dropdown:hover{
    background-color: #A80000;

}

.content{

    position: absolute;
    max-height: 0px;
    overflow: hidden;
    background-color: #660000;

}
.content a{

    color: white;
    text-decoration: none;
}

.content a:hover{

    text-decoration: underline;
}

.content-sub{
    padding: 20px;
}
.content-sub ul{
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.content-sub ul li a{
    padding: 5px 0px;
    display: inline-block;
}



.dropdown:focus{

    background-color: #A80000;
}

.dropdown:focus ~ .content{

    max-height: 400px;
    -webkit-transition: max-height 0.4s ease-in;
    -moz-transition: max-height 0.4s ease-in;
    transition: max-height 0.4s ease-in;
}


body{


     background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
}

.section{
    background-image: url("years.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: white;
    padding: 10px 10px 10px 10px;
    margin: 10px;

    overflow: auto;
}
footer{
    background-color: black;
    padding: 5px;
    margin-top: 10px;



}
h1{
    text-align: center;
    color: White;
}


.divide2{

background-color: #11233b;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;

    width: 600px;


}

.lyrics{
    background-image: url("years1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
background-color: white;
text-align: left;
margin: 10px 10px 10px 10px;
padding: 10px 10px;
white-space: nowrap;



}
p{

color: white;
}
    #title{
    color: White;

}

JSfiddle

https://jsfiddle.net/smurf16/x74Lobgt/

Answer 1

试试这个。请更改代码如下

.content-sub {
    /*padding: 20px;*/
}
.content{
    position: absolute;
    /*max-height: 0px;
    overflow: hidden;*/
    background-color: #660000;
}
ul li .content ul{
    min-width: 125px;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
}
ul li:hover .content ul{
    display: block; 
}
ul li .content ul li{
    display: block; 
    background: #660000;
}
ul li .content ul li a{
    padding: 10px;
    width: 100px;
}
ul li .content ul li a:hover{
    background: #A80000;
    text-decoration: none;
}

演示 Link jsfiddle

html 中的下拉元素没有 link

Dropdown elements in html doesn't link

html

css

drop-down-menu