如何将下拉菜单中的项目与我的父菜单栏

时间：2016-08-23 14:38:23

标签： javascript html css

我似乎无法正确对齐我的MENU和PROMOTION下拉菜单。

我的导航栏固定在顶部，所以即使向下滚动它仍然会在那里。

当我将text-align:center添加到ul.topnav课程时，我才遇到此问题。

我正在使用Adobe Dreamweaver CS6来获取这些代码。我使用这个软件的流体网格布局，但导航栏与此无关，所以我缺少这个布局给出的其他CSS和JS文件，如boilerplate.css和respondmin.js。

想象我的问题：

Image of the problem

我真正想要的是让下拉列表中的项目直接在PROMOTIONS下方对齐。

P / S：我使用了响应式导航栏，所以请放大浏览器以查看仅在全屏时出现的问题。

我的代码如下：

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  top: 0;
  position:fixed;
  width: 100%;
  background-color: rgba(0,0,0,0.75);
  text-align:center;
}

ul.topnav li {float: left;}

ul.topnav li a, .dropbtn {
  display: inline-block;
  color: #FFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 13.75px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight:bold;
}

ul.topnav li a:hover, .dropdown:hover .dropbtn {background-color: #F00;}

ul.topnav li.dropdown {
	display: inline-block;
}

ul.topnav .dropdown-content{
    display:none;
    position: absolute;
    background-color: #000;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	text-align:center;
}

ul.topnav .dropdown-content a{
	color: #FFF;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
ul.topnav .dropdown-content a:hover {
	background-color: #999;
}

ul.topnav .dropdown:hover .dropdown-content {display: block;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

.topnav li {
	width: 19%;
	margin: 0;
	padding:0;
}

/*Footer CSS*/

body{
	padding: 0;
	display: flex;
	min-height: 100vh;
	flex-wrap: wrap;
}

.wrapper{
	padding:20px;
	height:auto;
}

footer{
	background-color:#666;
	color: #FFF;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    font-size:17.75px;
    font-weight:bold;
	align-self: flex-end;
	line-height: 3;
	text-align: center;
	width: 100%;
}

footer img{
	width:42px;
	height: 42px;
	margin: 0 1em;
}

hr{
	width:100%;
}

footer p{white-space:pre;}
<!doctype html>
<html class="">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Untitled Document</title>

<link href="_css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="_css/fluid-grid.css" rel="stylesheet" type="text/css">
<link href="_css/headfoot.css" rel="stylesheet" type="text/css">

<script src="_script/respond.min.js"></script>
<script src="_script/headfoot.js"></script>
</head>
  
<html>
  
<body>
<ul class="topnav" id="myTopnav">
  <li><a class="active" href="#home">HOME</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">MENU</a>
    <div class="dropdown-content">
      <a href="#">Appetizer</a>
      <a href="#">Main Course</a>
      <a href="#">Dessert</a>
      <a href="#">Soup</a>
      <a href="#">Drinks</a>
      <a href="#">Side Snacks</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="#" class="dropbtn">PROMOTIONS</a>
    <div class="dropdown-content">
      <a href="#">Breakfast</a>
      <a href="#">Lunch</a>
      <a href="#">Dinner</a>
    </div>
  </li>
  <li><a href="#aboutus">ABOUT US</a></li>
  <li><a href="#contactus">CONTACT US</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
</div>

<div class="gridContainer clearfix">
  <div id="header">This is the content for Layout Div Tag "header"</div>
  <div id="maincontent">This is the content for Layout Div Tag "maincontent"</div>
  <div id="food1">This is the content for Layout Div Tag "food1"</div>
  <div id="food2">This is the content for Layout Div Tag "food2"</div>
  <div id="food3">This is the content for Layout Div Tag "food3"</div>
  <div id="content">This is the content for Layout Div Tag "content"</div>
</div>

<footer>
	<div class="wrapper">
  		<img src="Social%20Media%20Icons/facebook-icon.png" alt="Facebook"/>
  		<img src="Social%20Media%20Icons/icon-twitter.png" alt="Twitter"/>
  		<img src="Social%20Media%20Icons/YouTube-icon-full_color.png" alt="YouTube"/>
  		<img src="Social%20Media%20Icons/original_instagram-circle-icon.png" alt="Instagram"/>
  		<img src="Social%20Media%20Icons/tumblr-logo-icon-8.png" alt="Tumblr"/>
  		<img src="Social%20Media%20Icons/google-plus-icon.png" alt="GooglePlus"/>
  		<hr>
  		<p>S   T   A   Y       C   O   N   N   E   C   T   E   D</p>
	</div>
</footer>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

我在您的菜单链接中添加display: block，并在您的菜单li中添加“position：relative”，以便在left: 0上使用.dropdown-content。我还将.dropdown-content宽度更改为100%。

所以改变你的css：

body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  top: 0;
  position:fixed;
  width: 100%;
  background-color: rgba(0,0,0,0.75);
  text-align:center;
}

ul.topnav li {float: left;}

ul.topnav li a, .dropbtn {
  display: block; /* change */
  color: #FFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 13.75px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight:bold;
}

ul.topnav li a:hover, .dropdown:hover .dropbtn {background-color: #F00;}

ul.topnav li.dropdown {
    display: inline-block;
    position: relative; /* Change */
}

ul.topnav .dropdown-content{
    display:none;
    position: absolute;
    background-color: #000;
    /* min-width: 160px; Change */
    width: 100%; /* Change */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align:center;
    left: 0; /* Change */
}

ul.topnav .dropdown-content a{
    color: #FFF;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
ul.topnav .dropdown-content a:hover {
    background-color: #999;
}

ul.topnav .dropdown:hover .dropdown-content {display: block;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

  ul.topnav.responsive .dropdown-content{
    width: auto;
    min-width: 160px;
    left: 0;
  }

  ul.topnav li.dropdown{
    position: static;
  }
}

.topnav li {
    width: 19%;
    margin: 0;
    padding:0;
}

/*Footer CSS*/

body{
    padding: 0;
    display: flex;
    min-height: 100vh;
    flex-wrap: wrap;
}

.wrapper{
    padding:20px;
    height:auto;
}

footer{
    background-color:#666;
    color: #FFF;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    font-size:17.75px;
    font-weight:bold;
    align-self: flex-end;
    line-height: 3;
    text-align: center;
    width: 100%;
}

footer img{
    width:42px;
    height: 42px;
    margin: 0 1em;
}

hr{
    width:100%;
}

footer p{white-space:pre;}

直播：https://jsfiddle.net/9rwvsso5/

答案 1 :(得分：0)

您遇到的问题是您的悬停状态顶线导航更改已应用于 a ，但下拉列表与 li 元素对齐。

您需要调整填充和悬停状态，以便它们适用于li元素，而不是标记 - 这应该可以解决您的问题！

相关问题
最新问题