我有一个汉堡导航,我知道菜单本身的代码工作,因为我复制了同一网站上的其他页面。在此特定页面上,当我单击按钮时,下拉列表出现在它应该出现的空间之外,但是当我将鼠标悬停在链接所在的位置时,文本将被更改,就像它处于正确的位置一样。我已经尝试了几个小时来自己解决这个问题,我尝试过的一些事情已经清除*和body margin / padding,重新组织代码以及我读过的一堆其他技巧......什么都行不通。我的代码出了什么问题?
标记:
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="mobile-nav">
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</div>
<div class="responsive-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="mepage.html">About Me</a></li>
<li><a href="resumepage.html">Resume</a></li>
<li><a href="contactpage.html">Contact</a></li>
</ul>
</div>
</div>
<div class="headtext">
<h1>How you can contact me</h1>
</div>
</div>
</div>
<div class="ewrap">
<div class="elist">
<h2>You can join my email list</h2>
<div class="center">
<div id="mc_embed_signup">
<form action="//brettwray.us11.list-manage.com/subscribe/post?u=0019715a1627a714a1cca620c&id=e0cbe16c08" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_0019715a1627a714a1cca620c_e0cbe16c08" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
<p>I promise never to spam you, just to update you on my projects and the occasional picture of Dozer.</p>
</div>
<div class="email">
<h2>Joining a list isn't your thing?</h2>
<div id="envelope">
<a href="mailto:brett@brettwray.com?Subject=Brettwray.com%20inquiry" target="_top"><i class="fa fa-envelope-o fa-5x"></i></a>
</div>
<p>You can always <a href="mailto:brett@brettwray.com?Subject=Brettwray.com%20inquiry" target="_top">Email Me.</a></p>
</div>
</div>
<div id="social-header">
<h2>Is email too old school for you?</h2>
<h3>Then you can find me on social media.</h3>
</div>
<div class="social">
<div class="facebook">
<i class="fa fa-facebook-official fa-5x"></i>
</div>
<div class="insta">
<i class="fa fa-instagram fa-5x"></i>
</div>
<div class="twitter">
<i class="fa fa-twitter-square fa-5x"></i>
</div>
<div class="linkedin">
<i class="fa fa-linkedin-square fa-5x"></i>
</div>
</div>
</body>
CSS:
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
body {
background-color: rgba(189, 186, 186, 0.3);
}
.header {
position: absolute;
top: 0;
left: 0;
background-color: rgba(189, 186, 186, 0.3);
border-bottom: 2px solid #7EC9B1;
box-shadow: 0 4px 90px #7EC9B1;
width: 100%;
height: 400px;
line-height: 400px;
background: #fff url(http://i57.tinypic.com/2a796e0.jpg) no-repeat center;
background-size: cover;
}
.menu-btn div {
position: absolute;
top: 64%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
cursor: pointer;
}
.menu-btn span {
display: block;
width: 24px;
height: 4px;
margin: 5px 0;
background: rgb(0, 0, 0);
z-index: 99;
cursor: pointer;
}
.responsive-menu {
display: none;
}
.expand {
display: block !important;
float: right;
}
.menu-btn {
float: right;
padding: 10px 10px 10px 5px;
}
.responsive-menu li {
list-style-type: none;
border: 1px solid black;
width: 180px;
height: 40px;
background: #000222;
}
.responsive-menu ul li a {
text-decoration: none;
display: block;
text-align: center;
margin-top: 13px;
font-family: Helvetica, verdana, "trebuchet ms";
color: white;
}
.responsive-menu ul li a:hover {
text-decoration: underline;
font-size: 18px;
}
.responsive-menu li:hover {
border: 2px solid white;
}
.headtext {
width: 900px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
line-height: 200px;
}
.headtext h1 {
font-size: 80px;
font-family: 'Indie Flower', cursive;
color: #fff;
text-shadow: 3px 3px 6px #000;
text-align: center;
}
.ewrap {
position: absolute;
top: 440px;
display: table;
width: 100%;
height: 200px;
margin-top: 0px;
border-spacing: 10px;
}
.elist {
display: table-cell;
border: 2px solid #7EC9B1;
text-align: center;
width: 40%;
border-radius: 9px;
}
.email {
display: table-cell;
border: 2px solid #7EC9B1;
text-align: center;
width: 40%;
border-radius: 9px;
}
.email h2,
.elist h2 {
font-size: 32px;
font-family: 'Indie Flower', cursive;
padding-top: 10px;
text-shadow: 2px 2px 1px #7EC9B1;
}
.email p,
.elist p {
vertical-align: text-bottom;
font-size: 20px;
font-family: Helvetica, verdana, "trebuchet ms";
padding-bottom: 5px;
}
.email p {
padding-top: 35px;
}
.email a {
text-decoration: none;
color: #000;
font-size: 20px;
font-family: Helvetica, verdana, "trebuchet ms";
font-weight: bold;
}
#mc_embed_signup #mc-field-group {
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
.center {
display: inline-block;
}
#mc-embedded-subscribe-form {
padding: 20px;
}
div.mc-field-group {
padding: 10px;
}
#mc_embed_signup input.button {
background-color: #7EC9B1;
color: #fff;
height: 30px;
width: 150px;
margin-top: 10px;
border: none;
border-radius: 6px;
font-size: 18px;
font-family: Helvetica, verdana, "trebuchet ms";
}
#mc_embed_signup input.email {
height: 30px;
width: 300px;
font-size: 20px;
font-family: Helvetica, verdana, "trebuchet ms";
}
#social-header {
position: absolute;
top: 720px;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
.social {
position: absolute;
top: 820px;
width: 60%;
height: 100px;
margin: 0 20%;
display: table;
}
#social-header h2 {
font-size: 32px;
font-family: 'Indie Flower', cursive;
padding-top: 10px;
text-shadow: 2px 2px 1px #7EC9B1;
text-align: center;
}
#social-header h3 {
text-align: center;
font-size: 20px;
font-family: 'Indie Flower', cursive;
}
.facebook {
display: table-cell;
text-align: center;
font-size: 40px;
margin: auto 0;
}
.insta {
display: table-cell;
text-align: center;
font-size: 40px;
}
.twitter {
display: table-cell;
text-align: center;
font-size: 40px;
}
.linkedin {
display: table-cell;
text-align: center;
font-size: 40px;
}
.facebook:hover,
.insta:hover,
.twitter:hover,
.linkedin:hover {
color: #7EC9B1;
}
Jquery的:
jQuery(function($) {
$('.menu-btn').click(function() {
$('.responsive-menu').toggleClass('expand')
})
})
答案 0 :(得分:1)
更新以下css:
.responsive-menu ul li a {
text-decoration: none;
display: block;
text-align: center;
font-family: Helvetica, verdana, "trebuchet ms";
color: white;
/* added extra css rule */
line-height:35px;
height:35px;
margin-top:0;
}