您好我正在一个快速响应的网站上工作。现在我的导航问题,我无法集中在我的div中。此外,我的下拉菜单有问题,当导航开始适合div时,会破坏otder。
的index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test</title>
</head>
<body>
<div id="body_wrapper">
<div id="header_wrapper" class="clearfix">
<div id="header_content" class="content_container">
<div id="language_wrapper">
<div class="language active">
<span>Deutsch</span>
</div>
<div class="language">
<a href="#">
<span>Englisch</span>
</a>
</div>
</div>
<div id="hLogo_wrapper">
<a href="#">
<img src="images/starbucks.png">
</a>
</div>
</div>
</div>
<div id="inner_content" class="content_container">
<div class="mainMenu clearfix" >
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">Aktuelles</a></li>
<li>
<a href="#">Speisekarte ↓</a>
<ul class="hidden">
<li><a href="#">Mittagstisch</a></li>
<li><a href="#">Frühstück</a></li>
</ul>
</li>
<li><a href="#">Reservierung</a></li>
<li><a href="#">Gallerie</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</div>
</div>
<div id="footer_wrapper"></div>
</div>
</body>
</html>
这是我目前的css文件
* {
margin: 0;
padding: 0;
font-family: Trebuchet MS;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img {border: 0;}
.clearfix:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.content_container{
margin: 0 auto;
width: 62.5%;
}
#inner_content{
}
#header_wrapper{
height: 220px;
background: url('images/header.png');
}
#hLogo_wrapper img{
max-width: 100%;
}
#language_wrapper{
float: right;
}
#language_wrapper .language{
display: inline;
}
#hLogo_wrapper{
float: left;
}
.mainMenu{
height: 60px;
margin: 0 auto;
}
.mainMenu ul {
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 10%;
}
.mainMenu li {
display:inline;
float: left;
margin-right: 1px;
}
.mainMenu li a {
display:inline-block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
.mainMenu li:hover a {
background: #19c589;
}
.mainMenu li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
z-index: 120;
}
/*Hover state for dropdown links*/
.mainMenu li:hover ul a:hover {
background: #19c589;
color: #fff;
}
.mainMenu li ul {
display: none;
}
.mainMenu li ul li {
display: block;
float: none;
}
.mainMenu li ul li a {
width: auto;
min-width: 140px;
padding: 0 20px;
}
.mainMenu ul li a:hover + .hidden, .hidden:hover {
display: block;
}
答案 0 :(得分:0)
您的菜单ul上已标记为10%,这导致您的下拉内容偏离中心。
.mainMenu ul {
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 10%;
将左侧更改为0;会理顺这一点。
.mainMenu ul {
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 0;