Question

所以我的问题是我无法将我的导航链接集中。当您尝试单击链接时，它不会保持聚焦，因此下拉框仅显示一秒钟。 This is the navigation我正在尝试。

*{
margin: 0px;
padding: 0px;
list-style-type: none;}
header,nav,article,section,footer,aside {
display: block;}
#container {
width: 100%;
margin: 0px auto;}

.nav-main {
width: 100%;
background-color: #222;
height: 70px;
color: #fff;}
.logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height:40px;}
.nav-main > ul {
float: left;}
.nav-main > ul > li {
float: left;}
.nav-item:hover {
background-color: #444;}
.nav-item {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 15px;
height: 40px;
line-height: 40px;}
.sub-link {
text-decoration: none;
color: #fff;}
.nav-content {
position: absolute;
background-color: #444;
height: 200px;
max-height: 0px;
overflow: hidden;}
.nav-content-sub {
padding: 20px;}
.nav-content a:hover {
text-decoration: underline;}
.sub-link {
display: inline-block;
padding: 15px;
line-height: 10px;}
.nav-item:focus {
background-color: #444;}
.nav-item:focus ~ .nav-content {
max-height: 200px;}

        <nav class="nav-main">
        <div class="logo">Website</div>
        <ul>
            <li>
                <a href="" class="nav-item">News</a>
                <div class="nav-content">
                    <div class="nav-content-sub">
                        <ul>
                            <li><a href="" class="sub-link">Safsafasf</a></li>
                            <li><a href="" class="sub-link">Safsasagsagasg</a></li>
                            <li><a href="" class="sub-link">Qgagsag</a></li>
                            <li><a href="" class="sub-link">wKgagsagsagsgsagsaga<a></li>
                        </ul>
                    </div>
                </div>
            </li>

Answer 1

您忘了给<a href="" class="nav-item">News</a>指示方向（指向网站或网页的链接）。如果您不希望新闻项链接到某个网页，请使用"#"代替""，<a href="#" class="nav-item">News</a>

<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0px;
padding: 0px;
list-style-type: none;}
header,nav,article,section,footer,aside {
display: block;}
#container {
width: 100%;
margin: 0px auto;}

.nav-main {
width: 100%;
background-color: #222;
height: 70px;
color: #fff;}
.logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height:40px;}
.nav-main > ul {
float: left;}
.nav-main > ul > li {
float: left;}
.nav-item:hover {
background-color: #444;}
.nav-item {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 15px;
height: 40px;
line-height: 40px;}
.sub-link {
text-decoration: none;
color: #fff;}
.nav-content {
position: absolute;
background-color: #444;
height: 200px;
max-height: 0px;
overflow: hidden;}
.nav-content-sub {
padding: 20px;}
.nav-content a:hover {
text-decoration: underline;}
.sub-link {
display: inline-block;
padding: 15px;
line-height: 10px;}
.nav-item:focus {
background-color: #444;}
.nav-item:focus ~ .nav-content {
max-height: 200px;}
</style>
</head>
<body>
        <nav class="nav-main">
        <div class="logo">Website</div>
        <ul>
            <li>
                <a href="#" class="nav-item">News</a>
                <div class="nav-content">
                    <div class="nav-content-sub">
                        <ul>
                            <li><a href="" class="sub-link">Safsafasf</a></li>
                            <li><a href="" class="sub-link">Safsasagsagasg</a></li>
                            <li><a href="" class="sub-link">Qgagsag</a></li>
                            <li><a href="" class="sub-link">wKgagsagsagsgsagsaga<a></li>
                        </ul>
                    </div>
                </div>
            </li>
           </nav>
</body>
</html>

无法获得主要链接悬停焦点留下来

1 个答案: