1
http://i.stack.imgur.com/dSQDe.jpg一個<nav>標籤
我的問題下有使用CSS垂直菜單的麻煩：在垂直菜單，下拉部分推動以下內容進一步向下，而不是過度研磨以下內容上方。此網頁使用CSS媒體查詢。
@charset "utf-8"; \t
\t #wrapper{
\t \t margin:0 auto;
\t \t margin-top:-15px;
\t \t max-width:1020px;
\t \t width:97%;
\t \t background-color:#FFF;
\t \t border:1px solid #000;
\t \t border-radius:2px;
\t \t box-shadow:0 0 10px 0px rgba(12,3,25,1.8);
\t \t }
\t #slider{
\t \t overflow:hidden;
\t \t text-align:center;
\t \t min-width:320px;
\t \t height:auto;
\t \t width:100%;
\t \t }
\t #slider img{
\t \t width:inherit;
\t \t }
\t
\t #header{
\t \t min-height:150px;
\t \t overflow:hidden;
\t \t z-index:5;
\t \t background-color:#fff;
\t \t width:100%;
\t \t display:inline;
\t \t }
\t #header img{ \t \t
\t \t width:218px;
\t \t height:139px;
\t \t }
\t
\t nav{
\t \t width:auto;
\t \t } \t
ul {
\t list-style-type:none;
\t margin:0;
\t padding:0;
\t }
/*Create a horizontal list with spacing*/
li {
\t display:inline-block;
\t float: left;
\t margin-right:#CF0;
\t }
/*Style for menu links*/
li a {
\t display:block;
\t min-width:150px;
\t height:100px;
\t text-align: center;
\t line-height:100px;
\t color: #fff;
\t background: #34D675;
\t text-decoration: none;
\t }
/*Hover state for top level links*/
li:hover a {
\t background: #99D829;
\t }
/*Style for dropdown links*/
li:hover ul a {
\t background: #f3f3f3;
\t color: #2f3036;
\t height: 40px;
\t line-height: 40px;
\t }
/*Hover state for dropdown links*/
li:hover ul a:hover {
\t background: #19c589;
\t color: #fff;
\t }
/*Hide dropdown links until they are needed*/
li ul {
\t display: none;
\t }
/*Make dropdown links vertical*/
li ul li {
\t display: block;
\t float: none;
\t }
/*Prevent text wrapping*/
li ul li a {
\t width: auto;
\t min-width: 100px;
\t padding: 0 20px;
\t }
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
\t display: block;
\t }
\t
/*Style 'show menu' label button and hide it by default*/
.show-menu {
\t font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
\t text-decoration: none;
\t color: #fff;
\t background: #19c589;
\t text-align: center;
\t padding: 10px 0;
\t display: none;
\t }
/*Hide checkbox*/
input[type=checkbox]{
\t display: none;
\t }
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
\t display: block;
\t }
\t
/*Responsive Styles*/
@media screen and (max-width : 760px){
\t /*Make dropdown links appear inline*/
\t ul {
\t \t position: static;
\t \t display: none;
\t \t }
\t /*Create vertical spacing*/
\t li {
\t \t margin-bottom: 1px;
\t \t }
\t /*Make all menu links full width*/
\t ul li, li a {
\t \t width: 100%;
\t \t }
\t /*Display 'show menu' link*/
\t .show-menu {
\t \t display:block;
\t \t }
\t }<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NFF - Sri Lanka</title>
</head>
<body>
<div id="wrapper">
<div id="header">
\t <nav>
<a href="#">
\t <img src="file:///E|/NFF -Website/images/nfflogo.jpg" alt="NFF Sri Lanka Logo" width="218" height="139" title="NFF Sri Lanka Logo" ></a>
\t
<label for="show-menu" class="show-menu">Show</br>Menu</label>
<input type="checkbox" id="show-menu" role="button">
\t <ul id="menu">
<li><a href="#">HOME</a></li>
<li><a href="#">INFO ￬</a>
<ul class="hidden">
<li><a href="#">National Rainforests</a></li>
<li><a href="#">Aninmals & Plants</a></li>
<li><a href="#">Nature Convservation</a></li>
</ul>
</li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ABOUT ￬</a>
<ul class="hidden">
<li><a href="#">Our Mission & Vision</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Donate us</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="slider">
\t
\t <img src="images/slider.jpg" alt="NFF Sri Lanka slider" title="NFF Sri Lanka Slider">
</div>
\t </div>
<p style="text-align:center; padding:0px;"> © Copyright 2014 - Damitha N. Wanniarachchi </p>
</body>
</html>
真棒！有用！ -謝謝。 – redseptember24 2014-10-17 03:16:00