Question

我想创建一个下拉导航菜单，其上显示悬停时出现的模态框。

在我的示例中，Products标题需要打开4列子标题，这些子标题将自己对齐到像网格一样的引导程序中。

我接近结果，但我面临一些障碍：我的悬停似乎不起作用。此外，我的子标题仅出现在导航栏的周边内 - 而我希望它显示在导航栏下方，有一些填充。

我看了这两个例子，但他们没有帮助我：

stackoverflow reference 1

stackoverflow reference 2

请找到代码并指导我正确的方向：

＆＃13;

.topnav {
		background-color: white;
		overflow: hidden;
	}

	.topnav a {
		float: left;
		display: block;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 17px;
		color: grey;
	}
	.nav {
		list-style: none;
		display: -webkit-flex;
		-webkit-flex-direction: row;
		-webkit-justify-content: space-between;
		-webkit-flex-wrap: wrap;
	}
	.nav li:first-child {
		margin-right: auto;
	}

	.nav li {
		position: relative;
	}

	.dropdown {
		position: relative;
		display: inline-block;
	}

	.dropdown-content {
		position: absolute;
		background-color: #f9f9f9;
		min-width: 560px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 20;
		border: 1px solid white;
		padding: 80px;
		height: 220px;
	}

	.dropdown-content ul {
		display: block;
	}

	.arrow-up {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 5px solid black;
	}

	.noshow {
		display: none;
	}

	.dropdown-content:hover .noshow {
		display: block
	}

	.subheading {
		font-weight: 700;
	}

＆＃13;

<nav class="topnav">
				<ul class="nav">
					<li><a class="active" href="#title"> Title</a></li>
					<li>

						<a href="#" class="icon icon-after icon-chevrondown dropdown">Products</a>
						<div class="dropdown-content arrow-up noshow">
										<ul class="column large-3 each-column">
											<li class="subheading">subheading</li>
												<li>
													<a href="#">subheading1</a>
												</li>
												<li>
													<a href="#">subheading2</a>
												</li>
                        <li>
													<a href="#">subheading3</a>
												</li>
									</ul>
						</div>
					</li>
					<li><a href="#">link2</a></li>
					<li><a href="#">link3</a></li>
					<li><a href="#account"><img src="http://lorempixel.com/30/30/" width="30" height="30" alt="User Account Icon"></a></li>
				</ul>
			</nav>

＆＃13;

Answer 1

    <!DOCTYPE html>
<html>

<head>
    <style>
    .left_menu {
        float: left;
        width: 50%;
    }

    .right_menu {
        float: left;
        width: 50%;
    }

    .right_menu ul {
        float: right;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: white;
    }

    li {
        float: left;
    }

    li a,
    .dropbtn {
        display: inline-block;
        color: grey;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover,
    .dropdown:hover .dropbtn {
        /* background-color: red;*/
        /*color: white;*/
    }

    li.dropdown {
        display: inline-block;
    }

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

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
    </style>
</head>

<body>
    <div class="left_menu">
        <ul>
            <li><a href="">Title</a></li>
        </ul>
    </div>
    <div class="right_menu" style="float: left; width: 50%">
        <ul>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">Product</a>
                <div class="dropdown-content">

菜单的下拉列表仅占用导航栏空间+悬停不起作用

1 个答案: