导航菜单将其列表下拉到浮动图像下方而不是仅在其下方

时间：2016-08-05 07:07:00

标签： html css

我有一个导航菜单，它在移动响应模式下的左侧浮动徽标下方列表。这可能是由于徽标的浮动属性造成的。如何让下拉菜单显示在菜单按钮下方。点击菜单https://jsfiddle.net/AwesomeHat/rseuct2x/查看。

HTML代码 - 

<div id="header">
<img src="http://www.operadevelopers.com/images/logo.png" class="logo" />
<div id="social">
<a href="https://www.wikipedia.org" class="icon-button wikipedia"><i class="fa fa-wikipedia-w" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com" class="icon-button linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#" class="icon-button google-plus"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#" class="icon-button twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="icon-button facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</div>
<!--Navigation Bar-->
<nav>
<label for="show-menu" class="show-menu">Menu &#x2630;</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Whats New</a>
<ul class="hidden">
<li><a href="#">Just Launched</a></li>
<li><a href="#">Launching Soon</a></li>
<li><a href="#">Completed Projects</a></li>
</ul>
</li>
<li><a href="#">Referral</a></li>
<li><a href="#">Buyers Section</a>
<ul class="hidden">
<li><a href="#">EMI Calculator</a></li>
<li><a href="#">Apply For Loan</a></li>
<li><a href="#">Make an Enquiry</a></li>
</ul>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

CSS代码 - 

#header {
background: black;
width: 100%;
height: 210px;
min-height: 100%;
}
.logo {
float: left;
padding-left: 5%;
padding-top: 25px;
}
.icon-button {
color: white;
border: 0px;
display: inline-block;
font-size: 1.0rem;
line-height: 1.7rem;
margin: 1px;
text-align: center;
width: 1.7rem;
margin-top: 60px;
float: right;
overflow: hidden;
}
.facebook {
background-color: #3B5998;
}
.twitter {
background-color: #4099ff;
}
.google-plus {
background-color: #db5a3c;
}
.linkedin {
background-color: #007fb1;
}
.wikipedia {
background-color: white;
overflow: hidden;
color: black;
margin-right: 100px;
}
.icon-button:hover {
background-color: rgba(165,219,89,1);
transition: 1s;
transform: rotate(360deg);
}
nav ul {
list-style-type:none;
margin-top: 170px;
padding:0;
position: absolute;
width: 100%;
z-index: 20000;
}
nav ul li {
display:inline-block;
float: left;
width: 14.2857%; /* fallback for non-calc() browsers */
width: calc(100% / 7);
}
nav ul li a {
display:block;
min-width:140px;
height: 40px;
text-align: center;
line-height: 40px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #fff;
background: #161616;
text-decoration: none;
}
nav ul li:hover a {
color: rgb(165,219,89);
}
nav ul li:hover ul a {
color: #fff;
height: 40px;
line-height: 40px;
}
nav ul li:hover ul a:hover {
color: rgb(165,219,89);
}
nav ul li ul {
margin-top: 0px;
display: none;
}
nav ul li ul li {
display: block;
float: none;
width: 200px;
}
nav ul li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
float: right;
width: 70px;
height: 25px;
margin-top: 90px;
margin-right: -100px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: blue;
text-align: center;
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
@media screen and (max-width : 760px){
.logo {
padding-left: 10%;
}
.icon-button {
font-size: 0.8rem;
line-height: 1.5rem;
width: 1.5rem;
margin-top: 60px;
}
.wikipedia {
margin-right: 7%;
}
nav ul {
position: relative;
margin-top: 0;
float: right;
display: none;
}
nav ul li, li a {
width: 90%;
}
nav ul li ul {
margin-top: 0px;
display: block;
}
nav ul li ul li {
width: 90%;
}
.show-menu {
display:block;
}

3 个答案:

答案 0 :(得分：2)

尝试下面的代码，我认为这对你有帮助。

＆＃13;
＆＃13; 
#header {
	background: black;
	width: 100%;
	height: 210px;
	min-height: 100%;
}
.logo {
	float: left;
	padding-left: 5%;
	padding-top: 25px;
}
.icon-button {
    color: white;
	border: 0px;
	display: inline-block;
	font-size: 1.0rem;
	line-height: 1.7rem;
    margin: 1px;
	text-align: center;
	width: 1.7rem;
	margin-top: 60px;
	float: right;
	overflow: hidden;
}
.facebook {
  background-color: #3B5998;
}
.twitter {
  background-color: #4099ff;
}
.google-plus {
  background-color: #db5a3c;
}
.linkedin {
  background-color: #007fb1;
}
.wikipedia {
  background-color: white;
  overflow: hidden;
  color: black;
  margin-right: 100px;
}
.icon-button:hover {
  background-color: rgba(165,219,89,1);
  transition: 1s;
  transform: rotate(360deg);
}
nav ul {
	list-style-type:none;
	margin-top: 170px;
	padding:0;
	position: absolute;
	width: 75%;
	z-index: 20000;
}
nav ul li {
	display:inline-block;
	float: left;
	width: 14.2857%; /* fallback for non-calc() browsers */
    width: calc(100% / 7);
}
nav ul li a {
	display:block;
	min-width:140px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	color: #fff;
	background: #161616;
	text-decoration: none;
}
nav ul li:hover a {
	color: rgb(165,219,89);
}
nav ul li:hover ul a {
	color: #fff;
	height: 40px;
	line-height: 40px;
}
nav ul li:hover ul a:hover {
	color: rgb(165,219,89);
}
nav ul li ul {
	margin-top: 0px;
	display: none;
}
nav ul li ul li {
	display: block;
	float: none;
	width: 200px;
}
nav ul li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
nav ul li a:hover + .hidden, .hidden:hover {
	display: block;
}
.show-menu {
	float: right;
    width: 70px;
    height: 25px;
	margin-top: 90px;
	margin-right: -100px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: blue;
	text-align: center;
	display: none;
}
input[type=checkbox]{
    display: none;
}
input[type=checkbox]:checked ~ #menu{
    display: block;
}
@media screen and (max-width : 760px){
.logo {
	padding-left: 10%;
}
.icon-button {
	font-size: 0.8rem;
	line-height: 1.5rem;
	width: 1.5rem;
	margin-top: 60px;
}
.wikipedia {
  margin-right: 7%;
}
nav ul {
	position: relative;
	margin-top: 0;
    float: right;
	display: none;
}
nav ul li, li a {
		width: 90%;
	}
nav ul li ul {
	margin-top: 0px;
	display: block;
}
nav ul li ul li {
	width: 90%;
}
	.show-menu {
		display:block;
	}
  nav ul li ul li {
  width: 100%;
}
.hidden {
  width: 100%;
}
nav ul li, li a {
  width: 100%;
}
nav ul {
  margin-right: 0;
  margin-top: 60px;
}
nav ul li ul li a {
  padding: 0 16px;
}
＆＃13; 
<div id="header">
<img src="http://www.operadevelopers.com/images/logo.png" class="logo" />
<div id="social">
<a href="https://www.wikipedia.org" class="icon-button wikipedia"><i class="fa fa-wikipedia-w" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com" class="icon-button linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#" class="icon-button google-plus"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#" class="icon-button twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="icon-button facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</div>
<!--Navigation Bar-->
<nav>
<label for="show-menu" class="show-menu">Menu &#x2630;</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Whats New</a>
<ul class="hidden">
<li><a href="#">Just Launched</a></li>
<li><a href="#">Launching Soon</a></li>
<li><a href="#">Completed Projects</a></li>
</ul>
</li>
<li><a href="#">Referral</a></li>
<li><a href="#">Buyers Section</a>
<ul class="hidden">
<li><a href="#">EMI Calculator</a></li>
<li><a href="#">Apply For Loan</a></li>
<li><a href="#">Make an Enquiry</a></li>
</ul>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您已将nav ul li设置为float: left;，因此如果您将其更改为float: right;，请执行以下操作：

#header {
	background: black;
	width: 100%;
	height: 210px;
	min-height: 100%;
}
.logo {
	float: left;
	padding-left: 5%;
	padding-top: 25px;
}
.icon-button {
    color: white;
	border: 0px;
	display: inline-block;
	font-size: 1.0rem;
	line-height: 1.7rem;
    margin: 1px;
	text-align: center;
	width: 1.7rem;
	margin-top: 60px;
	float: right;
	overflow: hidden;
}
.facebook {
  background-color: #3B5998;
}
.twitter {
  background-color: #4099ff;
}
.google-plus {
  background-color: #db5a3c;
}
.linkedin {
  background-color: #007fb1;
}
.wikipedia {
  background-color: white;
  overflow: hidden;
  color: black;
  margin-right: 100px;
}
.icon-button:hover {
  background-color: rgba(165,219,89,1);
  transition: 1s;
  transform: rotate(360deg);
}
nav ul {
	list-style-type:none;
	margin-top: 170px;
	padding:0;
	position: absolute;
	width: 100%;
	z-index: 20000;
}
nav ul li {
	display:inline-block;
	float: right;
	width: 14.2857%; /* fallback for non-calc() browsers */
    width: calc(100% / 7);
}
nav ul li a {
	display:block;
	min-width:140px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	color: #fff;
	background: #161616;
	text-decoration: none;
}
nav ul li:hover a {
	color: rgb(165,219,89);
}
nav ul li:hover ul a {
	color: #fff;
	height: 40px;
	line-height: 40px;
}
nav ul li:hover ul a:hover {
	color: rgb(165,219,89);
}
nav ul li ul {
	margin-top: 0px;
	display: none;
}
nav ul li ul li {
	display: block;
	float: none;
	width: 200px;
}
nav ul li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
nav ul li a:hover + .hidden, .hidden:hover {
	display: block;
}
.show-menu {
	float: right;
    width: 70px;
    height: 25px;
	margin-top: 90px;
	margin-right: -100px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: blue;
	text-align: center;
	display: none;
}
input[type=checkbox]{
    display: none;
}
input[type=checkbox]:checked ~ #menu{
    display: block;
}
@media screen and (max-width : 760px){
.logo {
	padding-left: 10%;
}
.icon-button {
	font-size: 0.8rem;
	line-height: 1.5rem;
	width: 1.5rem;
	margin-top: 60px;
}
.wikipedia {
  margin-right: 7%;
}
nav ul {
	position: relative;
	margin-top: 0;
    float: right;
	display: none;
}
nav ul li, li a {
		width: 90%;
	}
nav ul li ul {
	margin-top: 0px;
	display: block;
}
nav ul li ul li {
	width: 90%;
}
	.show-menu {
		display:block;
	}
<div id="header">
<img src="http://www.operadevelopers.com/images/logo.png" class="logo" />
<div id="social">
<a href="https://www.wikipedia.org" class="icon-button wikipedia"><i class="fa fa-wikipedia-w" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com" class="icon-button linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#" class="icon-button google-plus"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#" class="icon-button twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="icon-button facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</div>
<!--Navigation Bar-->
<nav>
<label for="show-menu" class="show-menu">Menu &#x2630;</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Whats New</a>
<ul class="hidden">
<li><a href="#">Just Launched</a></li>
<li><a href="#">Launching Soon</a></li>
<li><a href="#">Completed Projects</a></li>
</ul>
</li>
<li><a href="#">Referral</a></li>
<li><a href="#">Buyers Section</a>
<ul class="hidden">
<li><a href="#">EMI Calculator</a></li>
<li><a href="#">Apply For Loan</a></li>
<li><a href="#">Make an Enquiry</a></li>
</ul>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

答案 2 :(得分：0)

我只能快速查看您的代码，但我认为您的菜单按钮始终处于同一位置。

所以你可以在你的CSS中添加一个margin-top标签​​。

ShortVarDecl = IdentifierList ":=" ExpressionList .

在我的电脑上，这很好用。但你必须在移动设备上试一试。

相关问题
最新问题