我的下拉菜单未显示所有项目。应用程序在有更多内容后停止 这是我的代码。
/* TYPOGRAPHY */
body {
color: #2e2e2e;
font: 16px/24px "Helvetica Neue", Arial, sans-serif;
}
h1,
h3, {
font-family: "Georgia", serif;
font-weight: 400;
z-index: 2;
}
h1 {
font-size: 55px;
}
h3 {
font-size: 32px;
}
h4 {
color: #5c5d60;
font-size: 16px;
text-transform: uppercase;
}
p {
margin-bottom: 24px;
}
a {
color: #f46151;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* General LAYOUT RULES */
.container {
width: 1200px;
margin: 0 auto;
}
.row {
overflow: hidden;
}
.column-half {
margin: 0 12px 24px 12px;
width: 576px;
float: left;
}
.container-center {
margin: 0 auto
}
/* HEADER */
.header-homepage {
background: url(../images/header-homepage.jpg) 0 0 no-repeat;
height: 600px;
background-size: 100%;
margin-bottom: 96px;
}
.header-about {
background: url(../images/header-about.jpg) 0 0 no-repeat;
height: 330px;
background-size: 100%;
margin-bottom: 96px;
}
.logo {
float:left;
}
/* NAV */
.clearfix:after {
display:block;
clear:both;
}
/* Menu */
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(255,255,255,255);
}
.menu {
width:1000px;
margin 0px:auto;
}
.menu li{
margin:0px;
list-style:none;
font-family:'san-seriff';
}
.menu a {
transition:all linear 0.15s;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:grey;
}
/* top level */
.menu > ul > li {
float:right;
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1 px 0px;
}
.menu > ul > li:hover >a, .menu > ul > .current-tem > a {
background:white;
}
/* bottom */
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px;
}
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background: white;
}
.top-container {
overflow: hidden;
padding: 48px 0;
}
.header-hr {
background-color: rgba(255,255,255,255, .1);
border: 0;
height: 1px;
margin-top: 0;
margin-bottom: 96px;
}
.header-contents {
text-align: center;
color: white;
padding: 0 200px;
}
.header-contents p {
margin-bottom: 48px;
}
/* BUTTONS */
.btn {
display: inline-block;
height: 48px;
width: 200px;
border: 1px solid #f2ae5d;
color: #f2ae5d;
text-transform: uppercase;
font-weight: bold;
padding-top: 10px;
}
.btn:hover {
text-decoration: none;
background-color: #f2ae5d;
color: #2e2e2e;
}
/* FOOTER */
footer {
background-color: grey;
padding: 24px 0;
margin-top: 48px;
}
footer p {
color: white;
}
.copyright {
padding: 48px 0;
text-align: center;
}
/* Sidebar */
.sidebar {
width: 400px;
float: left;
margin-right: 48px;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul .active a {
color: #2e2e2e;
}
.main-content {
width: 752px;
float: right;
margin-bottom: 48px;
}
<!DOCTYPE html>
<html>
<head>
<title>Alternative Reality</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header -->
<header class="header-homepage">
<div class="container">
<div class="top-container">
<!-- Logo -->
<a href="index.html" class="logo"><img src="images/logo.png" alt="logo"></a>
<!-- MENU -->
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><a href="#">Menu<img scr="images/arrow-down.svg"></a>
<ul class="sub-menu">
<li><a href="#">Applications</a>
<ul>
<li><a href="https://docs.google.com/forms/d/1Arw3Rw2LtNijv81PhBQUur4k6h6uTRAzYwyTLn30ios/viewform?usp=send_form">Trial Moderator</a></li>
<li><a href="https://docs.google.com/forms/d/17ZRJm1sLBril0RbnZxwMmX-HdieOnmNJw2TmsIP04-k/viewform?usp=send_form">Forum Moderator</a></li>
<li><a href="https://docs.google.com/forms/d/14fPUp6o-eTt5kKIpkjJcF8IXKbz7hd18zAvUZvLlu7E/viewform?usp=send_form">Advertising Staff</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Donate</a></li>
<li><a href="http://alternativereality.freeforums.net">Forum</a></li>
<li><a href="http://steamcommunity.com/groups/ardp">Join Group</a></li>
<li><a href="#">Staff List</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div> <!-- end of top-container -->
<hr class="header-hr">
<div class="header-contents">
<h1> Your dreams fully realized.</h1>
<p>This is the time for everyone to band together and think about what you always wanted to do. What your wishes would be on a server where you could literally do anything.
We take all the unneccesary clutter and people who are looking to stop you from..</p>
<p><a href="about.html" class="btn">See Details</a></p>
</div> <!-- end of header-contents -->
</div> <!-- End container -->
</header>
<!-- Content area -->
<div class="container">
<div class="row">
<div class="column-half">
<a href="about.html"><img src="images/picture1.jpg" alt="Alt Reality"></a>
<h3>Events</h3>
<p> Take a look here for some of our upcoming events!</p>
<p><a href="http://steamcommunity.com/groups/ardp#events">See details →</a></p>
</div> <!-- end of column-half -->
<div class="column-half2">
<a href="donate"><img src="images/picture2.jpg" alt="Alt Reality"></a>
<h3>Features</h3>
<p> We offer many features that are available to our members!</p>
<p><a href="donate">See details →</a></p>
</div> <!-- end of column-half -->
</div> <!-- end -->
</div> <!-- Content area -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="column-half">
<!--VlexoFree_LinkBack-->
</div> <!-- end row-->
</div> <!-- end container-->
</footer>
<div class="copyright">
<p>© 2015 Mike G.</p>
</div> <!-- end copyright-->
</body>
</html>
此外，菜单似乎也没有在这里工作。下面是我打开index.html时看到的GIF http://gyazo.com/6369ada1b1406215359ddcb76430d7a2
答案 0 :(得分：2)
.top-container { overflow:hidden }
它是隐藏的，因为它不会溢出容器。从.top-container中删除“overflow：hidden”应解决它，但这可能会导致其他一些问题需要解决。