Question

我有一个导航菜单，可以在大屏幕和移动屏幕上完美地工作，但只要我在它上面添加一个div，就会打破大屏幕和移动屏幕上的导航菜单。请看这里的小提琴 - https://jsfiddle.net/AwesomeHat/t9q2p2ut/。

导航菜单单独工作完全正常时请看这里的小提琴 - https://jsfiddle.net/AwesomeHat/dwzhh6L1/。

请增加＆amp;减小输出窗口的大小，以查看菜单的响应性，看看它是如何打破两个屏幕上的菜单。

    <!--Social Icons-->
<div id="social">
<a href="#" class="icon-button wikipedia"><i class="fa fa-wikipedia-w" aria-hidden="true"></i>
<a href="#" class="icon-button linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i>
<a href="#" class="icon-button google-plus"><i class="fa fa-google-plus" aria-hidden="true"></i>
<a href="#" class="icon-button twitter"><i class="fa fa-twitter" aria-hidden="true"></i>
<a href="#" class="icon-button facebook"><i class="fa fa-facebook" aria-hidden="true"></i>
</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="#" class="support">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

CSS代码 -

    /* logo */
.logo {
float: left;
margin-left: 55px;
margin-top: 30px;
}
/* Social Icons */
.icon-button {
display: inline-block;  
color: white;
border: 0px;
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);
}
/* Navigation Menu */
nav ul {
list-style-type:none;
margin-top: 170px;
padding:0;
position: absolute;
width: 100%;
z-index: 2;
}
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 {
width: 25%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #161616;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
@media screen and (max-width : 760px){
nav ul {
position: relative;
margin-top: 0px;
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;
}
}

Answer 1

在第1分区，您的代码将是这样的：

<div id="social">
<a href="#" class="icon-button wikipedia"><i class="fa fa-wikipedia-w" aria-hidden="true"></i></a>
<a href="#" 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>

您忘记完成锚定标记</a>

Answer 2

语法错误，在社交div中关闭锚标记

<div id="social">
<a href="#" class="icon-button wikipedia"><i class="fa fa-wikipedia-w" aria-hidden="true"></i></a>
<a href="#" 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>

https://jsfiddle.net/Nagasai_Aytha/t9q2p2ut/2/

div完全打破导航菜单

2 个答案: