Question

我写过非常原始的导航栏。通过阅读代码，一切看似合乎逻辑且正确，但代码不起作用 - 当您将光标移动到＃34;新闻＆＃34;栏下拉菜单不会出现。我错过了什么？

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
	<title>Learning</title>
<style>
	body{
		margin: 0px;}

	body a {
		display: inline-block;
		width:25%;
		padding: 14px 0px;
		margin: 0px;
		background-color: rgb(0,0,255);
		color: white;
		text-align: center;
		float: left;
		font-size: 1.5em;
		text-decoration: none;}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: rgb(0,0,255);
		color: white;
		min-height: 50px;
		width: 25%;}

	.dropdown-content a {
		display: block;
		color:white;
		text-decoration: none;
		padding: 20px 0px;
		text-align: center;}

	a.dropdown:hover .dropdown-content{
		display: block;}

	body > a:hover, .dropdown-content a:hover{
		background-color: rgb(0,0,128);}
</style>
</head>
<body>
	
	<a href="#">Home</a>
	<a href="#">Test</a>
	<a href="#" class="dropdown">News</a>
		<div class="dropdown-content">
			<a href="http://www.cnn.com">cnn</a>
			<a href="http://www.bbc.com">bbc</a>
		
		</div>
	<a href="#">About</a>
	
</body>
</html>

＆＃13;

Answer 1

这个应该让你开始：

https://jsfiddle.net/kezpw1e7/

我修改了一些CSS和HTML。下拉列表现在可以使用，您只需要调整宽度和一些样式。

<style>
    body{
        margin: 0px;}

.nav
{
  width:100%;

}
     div {
        display: inline-block;
        /*width:25%;*/
        padding: 14px 0px;
        margin: 0px;
        background-color: rgb(0,0,255);
        color: white;
        text-align: center;
        float: left;
        font-size: 1.5em;
        text-decoration: none;}
.dropdown
{
  position:relative;

}
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: rgb(0,0,255);
        color: white;
        min-height: 50px;
        /*width: 25%;*/
    top:53px;
    left:0px;}

    .dropdown-content a {
        display: block;
        color:white;
        text-decoration: none;
        padding: 20px 0px;
        text-align: center;}

    div.dropdown:hover .dropdown-content{
        display: block;}

    body > div:hover, .dropdown-content div:hover{
        background-color: rgb(0,0,128);}
</style>



<div class="nav">


  <div href="#">Home</div>
    <div href="#">Test</div>
    <div href="#" class="dropdown">News
        <div class="dropdown-content">
            <a href="http://www.cnn.com">cnn</a>
            <a href="http://www.bbc.com">bbc</a>

        </div>
    </div>
    <div href="#">About</div>
 </div>

Answer 2

链接不能在链接中。（Link inside a div link）

当您尝试执行此操作时，浏览器会取出内部链接。

尝试将新闻链接括在不同的HTML元素中。

Answer 3

.dropdown-content不是.dropdown的孩子，因此永远不会应用css。

尝试这样的事情

<div class="dropdown">News
    <div class="dropdown-content">
        <a href="http://www.cnn.com">cnn</a>
        <a href="http://www.bbc.com">bbc</a>
    </div>
</div>

相应地更改你的CSS

Answer 4

我希望它有所帮助

https://jsfiddle.net/usxk48d7/2/

<a href="#">Home</a>
<a href="#">Test</a>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

CSS

    body a {
        display: inline-block;
        width:25%;
        padding: 14px 0px;
        margin: 0px;
        background-color: rgb(0,0,255);
        color: white;
        text-align: center;
        float: left;
        font-size: 1.5em;
        text-decoration: none;}

.dropdown {
    position: relative;
    display: inline-block;
            width:25%;
        padding: 14px 0px;
        margin: 0px;
        background-color: rgb(0,0,255);
        color: white;
        text-align: center;
        float: left;
        font-size: 1.5em;
        text-decoration: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
    color:black;
}

Answer 5

首先，您应该更改嵌套。由于您不能将标签用于另一个标签，因此必须使用div进行类下拉列表：

<div class="dropdown">
        <a href="#0">News</a>
        <div class="dropdown-content">
            <a href="#0">cnn</a>
            <a href="#0">bbc</a>
        </div>
    </div>

你应该在挂钩你的下拉内容类时触发悬停事件：

.dropdown:hover > .dropdown-content {
    display: block;
}

由于您的下拉内容位于绝对位置，因此您应该从div的顶部和左侧值重新定位。将其添加到下拉内容类：

    left: 60%;
    top: 55px;

这是工作小提琴：https://jsfiddle.net/gp011zjp/

虽然我不推荐你的方法。您可以使用更好的技巧为您提供下拉菜单。

下拉列表不会出现在悬停状态

5 个答案: