Question

我创造了一个位置：固定;我的网页顶部的导航栏和其中一个项目应该是一个名为“services”的下拉列表，它应该显示悬停下拉列表，但它不起作用。

以下是HTML页面代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainpage.css">
<title>Company name</title>

</head>
<body>
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
    <li><a href="">HOME</a></li>
    <li><a href="about/about.html">ABOUT US</a></li>
    <li >
        <a class="dropdown" href="">SERVICES</a>
        <div class="dropdownlist">
            <a href="">AUDIT & ASSURANCE</a>
            <a href="">TAXATION</a>
            <a href="">CORPORATE FINANCE</a>
            <a href="">SERVICES</a>
            <a href="">MANAGEMENT CONSULTING</a>
            <a href="">RISK MANAGEMENT</a>
            <a href="">SECTORS</a>
            <a href="">HUMAN RESOURCES</a>
            <a href="">ACCOUNTING, AUDIT & TAX</a>
        </div>
    </li>
    <li><a href="">PARTNERS</a></li>
    <li><a href="">CONTACT US</a></li>
</ul>
</div>  
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>

</div>
</body>
</html>

这是CSS样式表代码：

body {
background-color:white;
}
.divbody {
margin-top:12%;
height:100%;
padding:0;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}

.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0; 
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px;
overflow:hidden;
}
.nav li {
float:left;
}
.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}

.nav li a:hover {
background-color:black;

}

.nav .dropdownlist {
display: none;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.nav .dropdown:hover .dropdownlist {
display: block;
}

Answer 1

以下更改将帮助您仅显示悬停下拉，但您需要进行少量CSS更改才能正确显示下拉列表

您需要替换以下CSS

.nav .dropdown:hover .dropdownlist {
display: block;
}

。通过

.nav .dropdown:hover + .dropdownlist { display: block; }

Answer 2

此代码不起作用，因为dropdownlist不是dropdown的孩子，它们只是相邻元素，因此您需要使用+符号才能达到您想要的效果

这是一个有效的例子：

body {
background-color:white;
}
.divbody {
margin-top:12%;
height:100%;
padding:0;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}

.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0; 
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px;
overflow:hidden;
}
.nav li {
float:left;
}
.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}

.nav li a:hover {
background-color:black;

}

.nav .dropdownlist {
display: none;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.nav .dropdown:hover + .dropdownlist,
.dropdownlist:hover {
display: block;
}

<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
    <li><a href="">HOME</a></li>
    <li><a href="about/about.html">ABOUT US</a></li>
    <li >
        <a class="dropdown" href="">SERVICES</a>
        <div class="dropdownlist">
            <a href="">AUDIT & ASSURANCE</a>
            <a href="">TAXATION</a>
            <a href="">CORPORATE FINANCE</a>
            <a href="">SERVICES</a>
            <a href="">MANAGEMENT CONSULTING</a>
            <a href="">RISK MANAGEMENT</a>
            <a href="">SECTORS</a>
            <a href="">HUMAN RESOURCES</a>
            <a href="">ACCOUNTING, AUDIT & TAX</a>
        </div>
    </li>
    <li><a href="">PARTNERS</a></li>
    <li><a href="">CONTACT US</a></li>
</ul>
</div>  
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>
</div>
</div>

Answer 3

以下是代码。希望这会对你有所帮助。

＆＃13;

body {
background-color:white;
}

.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}

ul.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0; 
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px; float:left;
}
ul.nav li {
float:left;
}
ul.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}

ul.nav li a:hover {
background-color:black;

}

ul.nav li ul.dropdownlist {
display: none;
background-color: #ccc;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); position:absolute; right:0; top:38px;
}
ul.nav li:hover ul.dropdownlist {
display: block;
}
ul.nav li ul.dropdownlist li a {
color:#333;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainpage.css">
<title>Company name</title>

</head>
<body>
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
    <li><a href="">HOME</a></li>
    <li><a href="about/about.html">ABOUT US</a></li>
    <li>
        <a class="dropdown" href="">SERVICES</a>
        <ul class="dropdownlist">
            <li><a href="">AUDIT & ASSURANCE</a></li>
            <li><a href="">TAXATION</a></li>
            <li><a href="">CORPORATE FINANCE</a></li>
            <li><a href="">SERVICES</a></li>
            <li><a href="">MANAGEMENT CONSULTING</a></li>
            <li><a href="">RISK MANAGEMENT</a></li>
            <li><a href="">SECTORS</a></li>
            <li><a href="">HUMAN RESOURCES</a></li>
            <li><a href="">ACCOUNTING, AUDIT & TAX</a></li>
        </ul>
    </li>
    <li><a href="">PARTNERS</a></li>
</ul>
</div>  
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>

</div>
</body>
</html>

＆＃13;

html / css导航栏中的下拉列表未显示

3 个答案: