我有一个名为hotlinks的下拉菜单网站是oxfordmakespace.com 它是礼仪上主页下拉列表的代码副本，而不是向左浮动。
使用.nav2在css中控制热链接下拉列表，而另一个是.nav 把你的bowser尺寸设置得比它更宽，它会进入下拉尺寸。
我的问题是它不合适，我无法弄清楚原因。
CSS：
body {
background-color: #999;
background-size: 100%;
background-repeat: repeat;
/* background-image: url(/Images/swanon.jpg); */
font-size: 87.5%;
font-family: Arial, serif-sans;
max-width: 1000px;
min-width: 380px;
}
.body {
/*text-align: left;*/
clear: both;
margin-left: auto;
margin-right: auto;
margin-top: 0%;
width: 80%;
}
div {
background: #1000;
}
.mainheader img {
margin: 0% auto;
width: 100%;
height: 8%;
padding: 10px 0 0 0;
}
/*
.mainheader nav {
background-color: #666;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: left;
display: inline;
}
.mainheader nav a, .mainheader nav a:link, .mainheader nav a:visited {
float: left;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link, .mainheader nav .active a:visited {
background: #253;
}
.mainheader nav ul li a {
border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
}
*/
.maincontent {
line-height: 15px;
border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
}
.Content {
background: #855;
/*red -----------*/
float: left;
width: 60%;
}
.topcontent {
background: #777;
/* grey -------------------*/
float: left;
width: 90%;
border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 1% 5%;
margin-top: 2px;
margin-bottom: 2px;
}
.bottomcontent {
background: #777;
/* grey -------------------*/
float: left;
width: 90%;
border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 1% 5%;
margin-top: 2px;
margin-bottom: 2px;
}
.post-info {
Font-style: italic;
color: #222;
fon-size: 85%;
}
.top-sidebar {
border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 1% 5%;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 0.5%;
width: 29.5%;
height: 160px;
float: left;
background: #fff url(Images/socialnight.jpg) no-repeat;
background-size: 100% 100%;
background-position: 0% 0%;
}
.top-sidebar article {
position: relative;
top: 30px;
right: 0px;
left: 45%;
width: 55%;
font-size: 90%
}
span p {
color: white;
font: bold 20px/25px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
.middle-sidebar {
border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 1% 5%;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 0.5%;
width: 29.5%;
float: left;
background-color: #254;
/* cyan green -------------------*/
}
.bottom-sidebar {
border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 1% 5%;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 0.5%;
width: 29.5%;
float: left;
background-color: #253;
/* green -------------------*/
}
.sitesearch {
border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 1% 5%;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 0.5%;
width: 29.5%;
height: 90px;
float: left;
background: #fff url(Images/searchoxhack.png) no-repeat;
background-size: 50%;
background-position: 30% 0%;
}
.mainfooter {
padding: 0;
margin: 0;
margin-top: 0%;
width: 100%;
height: 100%;
float: left;
background-color: #666;
border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
}
.mainfooter p {
text-align: center;
width: 92%;
padding-left: 0.8%;
padding-right: 0.2%;
padding-bottom: 0;
padding-top: 0;
}
a {
text-decoration: none;
}
.maincontent a {
padding: 0 5px;
text-decoration: none;
}
.maincontent a:link,
a:visited {
color: orange;
}
.maincontent a:hover,
a:active {
padding: 0 5px;
color: white;
background-color: black;
margin: 0px;
}
/* navbar desktop */
.nav {
float: right;
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav li {
float: right;
display: inline;
}
.nav a,
.nav a:link,
.nav a:visited {
float: left;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav a:active,
a:visited {
color: Black;
}
.nav .current a {
background: #499;
color: black;
/*this changes the desktop view current link*/
border-radius: 5px;
}
.nav a:hover,
.nav a:active,
.nav .active a:link,
.nav .active a:visited {
background: #253;
}
/*<!----------------------------------------------------------------->*/
.nav2 {
float: left;
/*desktopbackground*/
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav2 ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav2 li {
float: left;
display: inline;
}
.nav2 a,
.nav2 a:link,
.nav2 a:visited {
float: right;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav2 a:active,
a:visited {
color: Black;
}
.nav2 .current a {
background: #499;
color: black;
/*this changes the desktop view current link*/
border-radius: 5px;
}
.nav2 a:hover,
.nav2 a:active,
.nav2 .active a:link,
.nav2 .active a:visited {
background: #253;
}
@media only screen and (min-width: 450px) and (max-width: 600px),
(orientation: portrait) {
.top-sidebar {
height: 280px;
}
}
@media screen and (max-width: 600px) {
.top-sidebar {
height: 230px;
}
}
@media screen and (max-width: 500px) {
.top-sidebar {
height: 190px;
}
}
@media screen and (max-width: 400px) {
.top-sidebar {
height: 180px;
}
}
@media only screen and (min-width: 150px) and (max-width: 600px),
(orientation: portrait) {
.body {
width: 95%;
font-size: 100%;
}
.mainheader img {
width: 100%;
height: 100%;
}
/*
.mainheader nav {
background-color: #FFF;
height: 120px;
}*/
/*
.mainheader nav ul {
padding-left: 0%;
}
.mainheader nav ul li {
width: 100%;
margin: 0 auto;
text-align: center;
}
.mainheader nav a, .mainheader nav a:link, .mainheader nav a:visited {
float: none;
color: Black;
height: 20px;
display: block;
}
.mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link, .mainheader nav .active a:visited {
background: #199;
}
.mainheader nav ul li a {
} */
.maincontent {
line-height: 15px;
}
.Content {
background: #215;
/*blue-----------*/
float: left;
width: 100%;
margin-top: 2%;
}
.post-info {
display: none;
}
.topcontent,
.bottomcontent {
background: #777;
/* grey -------------------*/
float: left;
width: 90%;
padding: 1% 5%;
margin-top: 2%;
margin-bottom: 2%;
}
.top-sidebar,
.middle-sidebar,
.bottom-sidebar {
padding: 1% 5%;
margin-top: 0.5%;
margin-bottom: 0.5%;
margin-left: 0%;
width: 90%;
float: left;
}
.top-sidebar {
background: #fff url(Images/socialnight.jpg) no-repeat;
background-size: 100%;
background-position: 40% 0%;
}
.top-sidebar article {
position: relative;
top: 30%;
right: 0px;
left: 45%;
width: 55%;
font-size: 90%
}
.sitesearch {
border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 1% 5%;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2%;
margin-left: 0.5%;
width: 90%;
height: 100px;
float: left;
background: #fff url(Images/searchoxhack.png) no-repeat;
background-size: 30%;
background-position: 0% 0%;
}
/*NAVBAR--------------------------*/
.nav {
width: 100%;
position: relative;
min-height: 40px;
background-color: #999;
margin: 0px 0;
}
/*a {
color: Black;
height: 20px;
display: block;
}*/
/*No longer used*/
.nav ul {
width: 50%;
padding: 2% 2% 2% 2%;
/*this controls the displayed word padding*/
position: absolute;
top: 0;
/*physical position of box holding links*/
left: 46%;
/*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat;
/*background color for links*/
background-size: 15% 75%;
/*changes for image*/
background-position: 90% 50%;
}
.nav li {
width: 100%;
text-align: left;
float: left;
display: none;
/* hide all <li> items */
margin: 0;
}
.nav .current {
padding: 0 0 10px 0;
Background: none;
pointer-events: none;
/*allows you to click on the menu usinga touch screen and not make the page load*/
display: block;
/* show only current <li> item */
}
.nav .current a {
background: none;
color: Black;
/* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black;
/*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial, serif-sans;
}
.nav a:link {
color: black;
}
.nav a:hover {
/*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav ul:hover {
background-image: none;
/*hides the background image when the navbar exands to stop it stretching*/
}
.nav ul:hover li {
display: block;
margin: 0 0 15px;
/*space between each menu item*/
}
/*NAVBAR--------------------------*/
.nav2 ul {
width: 35%;
padding: 2% 2% 2% 2%;
/*this controls the displayed word padding*/
position: absolute;
top: 00%;
/*physical position of box holding links*/
left: 2.5%;
/*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat;
/*background color for links*/
background-size: 15% 70%;
/*changes for image*/
background-position: 10% 50%;
}
.nav2 li {
width: 100%;
text-align: left;
float: left;
display: none;
/* hide all <li> items */
margin: 0;
}
.nav2 .current {
padding: 0 0 10px 0;
Background: none;
pointer-events: none;
/*allows you to click on the menu usinga touch screen and not make the page load*/
display: block;
/* show only current <li> item */
}
.nav2 .current a {
background: none;
color: Black;
/* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav2 a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black;
/*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial, serif-sans;
}
.nav2 a:link {
color: black;
}
.nav2 a:hover {
/*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav2 ul:hover {
background-image: none;
/*hides the background image when the navbar exands to stop it stretching*/
}
.nav2 ul:hover li {
display: block;
margin: 0 0 15px;
/*space between each menu item*/
}
/*-------------------------------------------------------*/
}
/*media query end--------------------------*/
HTML：
<!doctype html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Testpage</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
<!--this tells html where css is-->
</head>
<!-- 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 -->
<body class="body">
<!------------------------------------------------------------------------------------------------------->
<header class="mainheader">
<img src="/Images/test.png" alt="quadcopter" >
<div>
<div class="nav">
<ul class="ul1">
<li class="current"><a href="Home">Home</a></li>
<li><a href="Illustration">Gallery</a></li>
<li><a href="Web design">About Oxhack</a></li>
<li><a href="Print Media">Topic Room</a></li>
<li><a href="Graphic Design">Calendar</a></li>
</ul>
</div>
<div class="nav2">
<ul class="ul2">
<li class="current"><a href="Usefullink">Hotlinks</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://youtube.com">YouTube</a></li>
<li><a href="Graphic Design">IRC Room</a></li>
<li><a href="Graphic Design">WIKI</a></li>
<li><a href="Graphic Design">Google+</a></li>
</ul>
</div>
</div>
<!--<nav><ul>
<li class="active"><a href="Home">Home</a></li>
<li><a href="About">About</a></li>
<li><a href="Portfolio">Portfolio</a></li>
<li><a href="Contact">Contact</a></li>
</ul></nav> -->
</header>
<div class="maincontent">
<div class="Content">
<article class="topcontent">
<header>
<h2><a href="#" title="First post"> First Post</a></h2>
</header>
<footer class="secondfooter">
<p class="post-info">This is Oxford hackspace </p>
</footer>
<content>
<p>this is the main content of the site Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</Content>
</article>
<!-- 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 -->
<article class="bottomcontent">
<h2><a href="#" title="Second post"> Second Post</a></h2>
<footer class="thirdfooter">
<p class="post-info">This is Oxford hackspace </p>
</footer>
<content>
<p>this is the main content of the site Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</Content>
</article>
</div>
</div>
<!-- 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 -->
<aside class="top-sidebar">
<article>
<h2></h2>
<span>
<p>Every Thursday 7PM - 11PM</p>
</span>
</article>
</aside>
<!-- 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 -->
<aside class="middle-sidebar">
<article>
<h2>Middle sidebar</h2>
<p>Lorem Ipsum has been the industrys standard dummy text.</p>
</article>
</aside>
<!-- 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 -->
<aside class="bottom-sidebar">
<article>
<h2>Bottom sidebar</h2>
<p>Lorem Ipsum has been the industrys standard dummy text.</p>
</article>
</aside>
<!-- 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 -->
<div class="sitesearch">
<aside>
<header>
<h2> </h2>
</header>
<script>
(function() {
var cx = '005475181379712347304:2om_l_x7m8m';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</aside>
</div>
</body>
<!-------------------------------------------------------------------------------------------------------------------->
<footer class="mainfooter">
<p class="post-info">this is Oxford hackspace </p>
</footer>
<!-- 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 -->
</html>