向左浮动并向右浮动不工作+位于第一个UL项目下的子菜单？

Question

最近一直在学习CSS和HTML，虽然我已经知道像浮动，定位，边距，填充等等，但由于某种原因，拆分这两件事并不起作用......

我的子菜单也有点不对，请参考下图：

正如您在菜单下看到的，当我将鼠标悬停在团队上时，子菜单显示在家中？不知道为什么，在移动菜单栏之前这不是问题。

其次，你可以看到＆＃34;你好＆＃34;和＆＃34; limpsum等＆＃34;文字不在＆＃34; COMPANY＆＃34;尽管如此，我告诉它向左浮动，同样是博客形象＆＃34;应显示在联系

下

基本上，COMPANY +菜单都在容器（nav）和hello / limsum +博客图片中，都在他们自己的容器中。两者都是100％宽度，你好/ limsum浮在左边，博客图片在右边，但它们的位置不会改变。

＆＃13;

＆＃13;

/*
	Business Website
	Author: Joel Male;
	Date Started: 20/06/2015;
	Date Finished: **;
*/

/* 
	////////////////////////////////////
	/////////// WEB STUFF //////////////
	////////////////////////////////////
*/

@font-face {
	font-family: BebasFont;
	src: url("bebas-font.ttf");
}

/* 
	////////////////////////////////////
	////// HANDLE DEFAULT MARKUPS //////
	////////////////////////////////////
*/

body {
	background-color: #666;
	color: #000305;
	font-size: 87.5%;
	font-family: Arial, 'Lucida Sans Unicode';
	line-height: 1.5;
	text-align: left;
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
}

a:link, a:visited {

}

a:hover, a:active {

}

/* 
	////////////////////////////////////
	//// HANDLE HEADER/CONTAINER ///////
	////////////////////////////////////
*/

header {
	margin: 0 auto; /* Centers the page */
	width: 100%;
	clear: both; /* Nothing floats on the page */
}

.content {
	width: 70%;
	margin: 0 auto;
}

/* 
	////////////////////////////////////
	////// HANDLE MAINHEADER HERE //////
	////////////////////////////////////
*/

.mainheader {
	width: 100%;
	background-color: #022930;
	height: 300px;
}

.mainheader nav {
	padding-top: 2%;
	height: 40px;
}

.mainheader nav h1 {
	color: white;
	font-family: 'BebasFont';
	margin-top: -12px;
	float: left;
	padding-left: 15%;
	font-size: 40px;
}

.mainheader nav ul {
	padding-right: 15%;
	float: right;
	padding-left: 0; /* THIS REMOVES THE PADDING BETWEEN NAV AND HOME */
	list-style: none;
	margin: 0 auto;
}

.mainheader nav ul li {
	font-family: 'BebasFont';
	position: relative;
	display: inline;
}

.mainheader nav ul li ul {
	position: absolute;
	left: 0;
	top: 160%;
}

.mainheader nav a:link, .mainheader nav a:visited {
	color: #FFF;
	display: inline-block;
	padding: 10px 25px;
	height: 20px;
}

.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
	background-color: #CF5C3F;
	text-shadow: none;
}

.mainheader nav ul li a {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.mainheader .subheader {
	width: 100%;
	height: 200px;
}

.mainheader .subheader .left-content {
	padding-top: 3%;
	float: left;
	width: 30%;
}

.mainheader .subheader .left-content h1 {
	font-family: 'BebasFont';
	color: #FFF;
}

.mainheader .subheader .right-content{
	float: right;
	width: 30%;
	height: 200px;
}

/* 
	////////////////////////////////////
	//// HANDLE THE DROP DOWN MENUS ////
	////////////////////////////////////
*/

.mainheader nav ul li:hover ul {
	display: block; /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
	z-index: 10;
	padding-right: 0;
}


.mainheader nav ul ul {
	display: none;
	position: absolute;
	background-color: #666;
}

.mainheader nav ul ul li {
	display: block;
	padding-right: 0;
	min-width: 178px;
}

.mainheader nav ul ul li:hover {
	background-color: #CF5C3F;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

/* 
	////////////////////////////////////
	/////// HANDLE THE SLOGAN TEXT /////
	////////////////////////////////////
*/

.subheader {
	height: 130px;
}

.subheader .slogan-wrapper {
	float: left;
	width: 45%;
	padding-top: 4%;
	padding-left: 15%;
}

.subheader p b i {
	font-size: 30px;
	color: #CF5C3F;
}

.subheader .logo-wrapper {
	float: right;
	margin-top: -5px;
	padding-right: 15%;
}

.subheader img {
	width: 160px;
	height: 160px;
}

/* 
	////////////////////////////////////
	//// HANDLE THE FIRST SECTION //////
	////////////////////////////////////
*/

.firstsection {
	width: 100%;
	float: left;
	line-height: 25px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.firstsection .firstarticle {
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 0%;
	margin-top: 2.8%;
	height: 220px;
	background-color: #CCC; /* THIS CHANGES THE BACKGROUND COLOR OF THE TOP CONTENT BACKGROUND */
}

.firstsection .firstarticle .image-wrapper {
	width: 32%;
	padding-left: 2%;
	float: left;
}

.firstsection .firstarticle h1 {
	margin-top: 0;
}

.firstsection .firstarticle .leftcontent {
	width: 26%;
	float: left;
}

.firstsection .firstarticle .leftcontent a {
	color: #07bac1;
}

.firstsection .firstarticle .leftcontent a:hover {
	text-decoration: underline;
}

.firstsection .firstarticle .rightcontent {
	padding-right: 2%;
	width: 26%;
	float: right;
}

.firstsection .firstarticle .rightcontent img {
	padding-right: 3%;
}

.firstsection .firstarticle .rightcontent i {
	font-style: italic;
	color: #999;
	font-size: 85%;
}

/* 
	////////////////////////////////////
	//////// HANDLE THE FOOTER /////////
	////////////////////////////////////
*/

.mainfooter {
	width: 100%;
	height: 140px;
	float: left;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-top: 2%;
	background-color: #666;
	color: white;
}
.mainfooter a {
	color: #FFF;
}

.mainfooter .top-row {
	width: 100%;
	height: 100%;
	line-height: 5px;
}

.mainfooter .top-row h1 {
	padding-top: 1%;
	padding-bottom: 3%;
}

.mainfooter .top-row .leftrow {
	padding-left: 15%;
	padding-top: 5%;
	float: left;
}

.mainfooter .top-row .right-leftside {
	width: 300px;
	float: right;
}

.mainfooter .top-row .right-rightside {
	width: 300px;
	padding-right: 7%;
	float: right;
}

/* 
	////////////////////////////////////
	/// HANDLE PHONE/SMALLER SCREENS ///
	////////////////////////////////////
*/

@media only screen and (min-width: 150px) and (max-width: 600px)
{
	.body {
		width: 90%;
		font-size: 95%;
	}

	.mainheader img {
		width: 30%;
	}

	.mainheader nav {
		background: #666;
		height: 200px;
		line-height: 30px;
		margin-bottom: 0;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	.mainheader nav ul {
		list-style: none; 
		margin: 0 auto;
		padding-left: 0;
	}

	.mainheader nav li {
		width: 100%;
		margin-left: 0 auto;
	}

	.mainheader nav a:link, .mainheader nav a:visited {
		color: #FFF;
		display: block;
		height: 30px;
		padding: 5px 0;
		text-decoration: none;
	}

	.mainheader nav a:active,
	.mainheader nav .active a:link, .mainheader nav .active a:visited {
		background: #CF5C3F;
		color: #fff;
		text-shadow: none !important;
	}

	.mainheader nav li a {
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
			
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	.content {
		width: 100%;
		float: left;
		margin-top: 2%;
	}

	.top-content {
		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 3% 5%;
		margin-top: 2%;
	}

	.bottom-content {
		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 3% 5%;
		margin-top: 2px;
	}
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
		<title> Computer Company </title>
		<meta charset="utf-8" />

		<link rel="stylesheet" href="stylesheet.css" type="text/css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body onLoad="slideA()">

	<header>
		<div class="mainheader">
			<nav>
				<h1>Company</h1>
				<ul>
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Solutions & Services</a>
						<ul>
							<li><a href="#">Internet</a></li>
							<li><a href="#">Networking</a></li>
							<li><a href="#">Website</a></li>
							<li><a href="#">Home Computers</a></li>
							<li><a href="#">Servers</a></li>
						</ul>
					</li>
					<li><a href="#">Team</a>
						<ul>
							<li><a href="#">Founder</a></li>
							<li><a href="#">Graphics</a></li>
						</ul></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>

			<div class="subheader">
				<div class="left-content">
					<h1>Hello!</h1>

					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
				</div>

				<div class="right-content">
					<img src="images/logo.jpg"/>
				</div>
			</div>

		</div>
	</header>

	<div class="subheader">
		<div class="slogan-wrapper">
			<p><b><i>An incredibly efficient I.T agency</i></b></p>
		</div>
		<div class="logo-wrapper">
			<img src="images/logo.jpg"/>
		</div>
	</div>


<div class="content">

	<div class="firstsection">
			<article class="firstarticle">
				<div class="image-wrapper">
					<img src="images/computer.jpeg"/>
				</div>
				<content class="leftcontent">
					<h1>Efficient, Affordable, Reliable</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
					<p><a href="#">› Contact us</a></p>
				</content>
				<content class="rightcontent">
					<h1>Latest Feedback</h1>
					<p><img src="images/plus.gif"/>Solved my problem quickly and efficiently! <i>- Melissa, QLD</i></p>
					<p><img src="images/plus.gif"/>Called Joel to organize an appointment, he came over and fixed the problem the same day!<i>- Zac, QLD </i></p>
				</content>
			</article>
	</div>

</div>


<footer class="mainfooter">
	<div class="top-row">

		<p class="leftrow"> &copy; 2015 <a href="index.html">Computer Company</a></p>

		<div class="right-rightside">
			<h1>Contact</h1>
			<p>Joel Male @</p>
			<p>Mobile</p>
			<p>Email</p>
		</div>
		<div class="right-leftside">
			<h1>Opening Hours</h1>
			<p>Monday - Friday: 9am - 5pm</p>
			<p>Saturday: 10am - 4pm</p>
			<p>Sunday: Closed</p>
			<p>Public Holidays: Closed</p>
		</div>
	</div>
</footer>
</div>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;

它可能与位置有关吗？我还没有处理过这些，所以我不知道绝对，亲戚等是做什么的：（

谢谢:(

编辑：我意识到pastebin代码已经过时了，而html，所以我更新了它们。也反映了第一个答案建议的变化。

Answer 1

提供nav ul li相对位置：poisition:relative，nav ul li ul应符合以下规则：

position:absolute;
left:0;
top:27px; /* so it will bedirectly underneath */

最后，要使悬停工作正常，请使用nav ul li:hover>a选择器作为悬停效果，而不是nav ul li a:hover。

更改了代码：

.mainheader nav ul li {
  font-family: 'BebasFont';
  display: inline;
  z-index: -10px;
  position:relative; /* added this */
}

.mainheader nav li:hover>a, /*changed this from .mainheader nav li a:hover */
.mainheader nav a:active,
.mainheader nav .active a:link,
.mainheader nav .active a:visited {
  background-color: #CF5C3F;
  text-shadow: none;
}

.mainheader nav ul li:hover ul {
  display: block;
  /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
  z-index: 10;
  padding-right: 0;
  /*NEW STUFF*/
  position:absolute;
  top:27px;
  left:0;
  /*END OF NEW STUFF*/
}

工作演示：

＆＃13;

＆＃13;

/*
        Business Website
        Author: Joel Male;
        Date Started: 20/06/2015;
        Date Finished: **;
*/

/*
        ////////////////////////////////////
        /////////// WEB STUFF //////////////
        ////////////////////////////////////
*/

@font-face {
  font-family: BebasFont;
  src: url("bebas-font.ttf");
}
/*
        ////////////////////////////////////
        ////// HANDLE DEFAULT MARKUPS //////
        ////////////////////////////////////
*/

body {
  background-color: #666;
  color: #000305;
  font-size: 87.5%;
  font-family: Arial, 'Lucida Sans Unicode';
  line-height: 1.5;
  text-align: left;
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
a:link,
a:visited {} a:hover,
a:active {}
/*
        ////////////////////////////////////
        //// HANDLE HEADER/CONTAINER ///////
        ////////////////////////////////////
*/

header {
  margin: 0 auto;
  /* Centers the page */
  width: 100%;
  clear: both;
  /* Nothing floats on the page */
}
.content {
  width: 70%;
  margin: 0 auto;
}
/*
        ////////////////////////////////////
        ////// HANDLE MAINHEADER HERE //////
        ////////////////////////////////////
*/

.mainheader {
  width: 100%;
}
.mainheader nav {
  padding-right: 15%;
  background-color: #022930;
  height: 300px;
  padding-top: 2%;
}
.mainheader nav h1 {
  color: white;
  font-family: 'BebasFont';
  margin-top: -12px;
  float: left;
  padding-left: 15%;
  font-size: 40px;
}
.mainheader nav ul {
  float: right;
  padding-left: 0;
  /* THIS REMOVES THE PADDING BETWEEN NAV AND HOME */
  list-style: none;
  margin: 0 auto;
}
.mainheader nav ul li {
  font-family: 'BebasFont';
  display: inline;
  z-index: -10px;
  position:relative; /* added this */
}
.mainheader nav a:link,
.mainheader nav a:visited {
  color: #FFF;
  display: inline-block;
  padding: 10px 25px;
  height: 20px;
}
.mainheader nav li:hover>a, /*changed this from .mainheader nav li a:hover */
.mainheader nav a:active,
.mainheader nav .active a:link,
.mainheader nav .active a:visited {
  background-color: #CF5C3F;
  text-shadow: none;
}
.mainheader nav ul li a {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
/*
        ////////////////////////////////////
        //// HANDLE THE DROP DOWN MENUS ////
        ////////////////////////////////////
*/

.mainheader nav ul li:hover ul {
  display: block;
  /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
  z-index: 10;
  padding-right: 0;
  /*NEW STUFF*/
  position:absolute;
  top:27px;
  left:0;
  /*END OF NEW STUFF*/
}
.mainheader nav ul ul {
  display: none;
  position: absolute;
  background-color: #666;
}
.mainheader nav ul ul li {
  display: block;
  padding-right: 0;
  min-width: 178px;
}
.mainheader nav ul ul li:hover {
  background-color: #CF5C3F;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
/*
        ////////////////////////////////////
        // HANDLE THE CONTACT RIGHT SIDE ///
        ////////////////////////////////////
*/

.mainheader p {
  float: right;
  margin-top: 10px;
  padding-right: 18%;
  color: #FFF;
}
.mainheader p b {
  text-decoration: underline;
}
/*
        ////////////////////////////////////
        /////// HANDLE THE SLOGAN TEXT /////
        ////////////////////////////////////
*/

.subheader {
  height: 130px;
}
.subheader .slogan-wrapper {
  float: left;
  width: 45%;
  padding-top: 4%;
  padding-left: 15%;
}
.subheader p b i {
  font-size: 30px;
  color: #CF5C3F;
}
.subheader .logo-wrapper {
  float: right;
  margin-top: -5px;
  padding-right: 15%;
}
.subheader img {
  width: 160px;
  height: 160px;
}
/*
        ////////////////////////////////////
        //// HANDLE THE FIRST SECTION //////
        ////////////////////////////////////
*/

.firstsection {
  width: 100%;
  float: left;
  line-height: 25px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.firstsection .firstarticle {
  background-color: #FFF;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 2% 0%;
  margin-top: 2.8%;
  height: 220px;
  background-color: #CCC;
  /* THIS CHANGES THE BACKGROUND COLOR OF THE TOP CONTENT BACKGROUND */
}
.firstsection .firstarticle .image-wrapper {
  width: 32%;
  padding-left: 2%;
  float: left;
}
.firstsection .firstarticle h1 {
  margin-top: 0;
}
.firstsection .firstarticle .leftcontent {
  width: 26%;
  float: left;
}
.firstsection .firstarticle .leftcontent a {
  color: #07bac1;
}
.firstsection .firstarticle .leftcontent a:hover {
  text-decoration: underline;
}
.firstsection .firstarticle .rightcontent {
  padding-right: 2%;
  width: 26%;
  float: right;
}
.firstsection .firstarticle .rightcontent img {
  padding-right: 3%;
}
.firstsection .firstarticle .rightcontent i {
  font-style: italic;
  color: #999;
  font-size: 85%;
}
/*
        ////////////////////////////////////
        //////// HANDLE THE FOOTER /////////
        ////////////////////////////////////
*/

.mainfooter {
  width: 100%;
  height: 140px;
  float: left;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin-top: 2%;
  background-color: #666;
  color: white;
}
.mainfooter a {
  color: #FFF;
}
.mainfooter .top-row {
  width: 100%;
  height: 100%;
  line-height: 5px;
}
.mainfooter .top-row h1 {
  padding-top: 1%;
  padding-bottom: 3%;
}
.mainfooter .top-row .leftrow {
  padding-left: 15%;
  padding-top: 5%;
  float: left;
}
.mainfooter .top-row .right-leftside {
  width: 300px;
  float: right;
}
.mainfooter .top-row .right-rightside {
  width: 300px;
  padding-right: 7%;
  float: right;
}
/*
        ////////////////////////////////////
        /// HANDLE PHONE/SMALLER SCREENS ///
        ////////////////////////////////////
*/

@media only screen and (min-width: 150px) and (max-width: 600px) {
  .body {
    width: 90%;
    font-size: 95%;
  }
  .mainheader img {
    width: 30%;
  }
  .mainheader nav {
    background: #666;
    height: 200px;
    line-height: 30px;
    margin-bottom: 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  }
  .mainheader nav ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
  }
  .mainheader nav li {
    width: 100%;
    margin-left: 0 auto;
  }
  .mainheader nav a:link,
  .mainheader nav a:visited {
    color: #FFF;
    display: block;
    height: 30px;
    padding: 5px 0;
    text-decoration: none;
  }
  .mainheader nav a:active,
  .mainheader nav .active a:link,
  .mainheader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
  }
  .mainheader nav li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  }
  .content {
    width: 100%;
    float: left;
    margin-top: 2%;
  }
  .top-content {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
  }
  .bottom-content {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2px;
  }
}

.mainheader nav ul li:hover ul {
  display: block;
  /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
  z-index: 10;
  padding-right: 0;
  /*NEW STUFF*/
  position:absolute;
  top:27px;
  left:0;
  /*END OF NEW STUFF*/
}

＆＃13;

<header>
  <div class="mainheader">
    <nav>
      <h1>Company</h1>
      <ul>
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">Solutions & Services</a>
          <ul>
            <li><a href="#">Internet</a>
            </li>
            <li><a href="#">Networking</a>
            </li>
            <li><a href="#">Website</a>
            </li>
            <li><a href="#">Home Computers</a>
            </li>
            <li><a href="#">Servers</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Team</a>
          <ul>
            <li><a href="#">Founder</a>
            </li>
            <li><a href="#">Graphics</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
      <!--<p class="mainheader-phone"> Call Joel at <b>0468-575-424</b> </p>-->
    </nav>
  </div>
</header>

<div class="subheader">
  <div class="slogan-wrapper">
    <p><b><i>An incredibly efficient I.T agency</i></b>
    </p>
  </div>
  <div class="logo-wrapper">
    <img src="images/logo.jpg" />
  </div>
</div>


<div class="content">

  <div class="firstsection">
    <article class="firstarticle">
      <div class="image-wrapper">
        <img src="images/computer.jpeg" />
      </div>
      <content class="leftcontent">
        <h1>Efficient, Affordable, Reliable</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
        <p><a href="#">› Contact us</a>
        </p>
      </content>
      <content class="rightcontent">
        <h1>Latest Feedback</h1>
        <p>
          <img src="images/plus.gif" />Solved my problem quickly and efficiently! <i>- Melissa, QLD</i>
        </p>
        <p>
          <img src="images/plus.gif" />Called Joel to organize an appointment, he came over and fixed the problem the same day!<i>- Zac, QLD </i>
        </p>
      </content>
    </article>
  </div>

</div>


<footer class="mainfooter">
  <div class="top-row">

    <p class="leftrow">&copy; 2015 <a href="index.html">Computer Company</a>
    </p>

    <div class="right-rightside">
      <h1>Contact</h1>
      <p>Joel Male @</p>
      <p>Mobile</p>
      <p>Email</p>
    </div>
    <div class="right-leftside">
      <h1>Opening Hours</h1>
      <p>Monday - Friday: 9am - 5pm</p>
      <p>Saturday: 10am - 4pm</p>
      <p>Sunday: Closed</p>
      <p>Public Holidays: Closed</p>
    </div>
  </div>
</footer>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请在LLpo Oksaned（li帮助）的帮助下复制并粘贴此代码。

<强>更新

CSS：

/*
        Business Website
        Author: Joel Male;
        Date Started: 20/06/2015;
        Date Finished: **;
*/

/*
        ////////////////////////////////////
        /////////// WEB STUFF //////////////
        ////////////////////////////////////
*/

@font-face {
        font-family: BebasFont;
        src: url("bebas-font.ttf");
}

/*
        ////////////////////////////////////
        ////// HANDLE DEFAULT MARKUPS //////
        ////////////////////////////////////
*/

body {
        background-color: #666;
        color: #000305;
        font-size: 87.5%;
        font-family: Arial, 'Lucida Sans Unicode';
        line-height: 1.5;
        text-align: left;
        padding: 0;
        margin: 0;
}

a {
        text-decoration: none;
}

a:link, a:visited {

}

a:hover, a:active {

}

/*
        ////////////////////////////////////
        //// HANDLE HEADER/CONTAINER ///////
        ////////////////////////////////////
*/

header {
        margin: 0 auto 10px; /* Centers the page */
        width: 100%;
        clear: both; /* Nothing floats on the page */
}

.content {
        width: 70%;
        margin: 0 auto;
}

/*
        ////////////////////////////////////
        ////// HANDLE MAINHEADER HERE //////
        ////////////////////////////////////
*/

.mainheader {
        width: 100%;
        background-color: #022930;
        height: auto;
}

.mainheader nav {
        padding-top: 2%;
        height: 40px;
}

.mainheader nav h1 {
        color: white;
        font-family: 'BebasFont';
        margin-top: -12px;
        float: left;
        padding-left: 15%;
        font-size: 40px;
}

.mainheader nav ul {
        padding-right: 15%;
        float: right;
        padding-left: 0; /* THIS REMOVES THE PADDING BETWEEN NAV AND HOME */
        list-style: none;
        margin: 0 auto;
}

.mainheader nav ul li {
        font-family: 'BebasFont';
        position: relative;
        display: inline;
}

.mainheader nav ul li ul {
        position: absolute;
        left: 0;
        top: 160%;
}

.mainheader nav a:link, .mainheader nav a:visited {
        color: #FFF;
        display: inline-block;
        padding: 10px 25px;
        height: 20px;
}

.mainheader nav li:hover>a, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
        background-color: #CF5C3F;
        text-shadow: none;
}

.mainheader nav ul li a {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

.mainheader .subheader {
        width: 100%;
        margin-left:auto;
        margin-right:auto;
        padding-bottom:10px;
        display:flex;

}

.inner_header {
    width:66%;
    margin:0 auto;
    margin-left:auto;
    margin-right:auto;
}
.mainheader .subheader .left-content {
        width: 50%;
        float: left;
}

.mainheader .subheader .left-content h1 {
        margin-top: 0;
        font-family: 'BebasFont';
        color: #FFF;
}

.mainheader .subheader .right-content{
        float:left;
        width:50%;

}

.mainheader .subheader .right-content img {
        width: 200px;
        height: 200px;
        float:right;
}

/*
        ////////////////////////////////////
        //// HANDLE THE DROP DOWN MENUS ////
        ////////////////////////////////////
*/

.mainheader nav ul li:hover ul {
        display: block; /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
        padding-right: 0;
        position: absolute;
        top: 27px;
        left: 0;
}


.mainheader nav ul ul {
        display: none;
        position: absolute;
        background-color: #666;
}

.mainheader nav ul ul li {
        display: block;
        padding-right: 0;
        min-width: 178px;
}

.mainheader nav ul ul li:hover {
        background-color: #CF5C3F;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

/*
        ////////////////////////////////////
        //// HANDLE THE FIRST SECTION //////
        ////////////////////////////////////
*/

.firstsection {
        width: 100%;
        float: left;
        line-height: 25px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

.firstsection .firstarticle {
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 2% 0%;
        margin-top: 2.8%;
        height: 220px;
        background-color: #CCC; /* THIS CHANGES THE BACKGROUND COLOR OF THE TOP CONTENT BACKGROUND */
}

.firstsection .firstarticle .image-wrapper {
        width: 32%;
        padding-left: 2%;
        float: left;
}

.firstsection .firstarticle h1 {
        margin-top: 0;
}

.firstsection .firstarticle .leftcontent {
        width: 26%;
        float: left;
}

.firstsection .firstarticle .leftcontent a {
        color: #07bac1;
}

.firstsection .firstarticle .leftcontent a:hover {
        text-decoration: underline;
}

.firstsection .firstarticle .rightcontent {
        padding-right: 2%;
        width: 26%;
        float: right;
}

.firstsection .firstarticle .rightcontent img {
        padding-right: 3%;
}

.firstsection .firstarticle .rightcontent i {
        font-style: italic;
        color: #999;
        font-size: 85%;
}

/*
        ////////////////////////////////////
        //////// HANDLE THE FOOTER /////////
        ////////////////////////////////////
*/

.mainfooter {
        width: 100%;
        height: 140px;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        margin-top: 2%;
        background-color: #666;
        color: white;
}
.mainfooter a {
        color: #FFF;
}

.mainfooter .top-row {
        width: 100%;
        height: 100%;
        line-height: 5px;
}

.mainfooter .top-row h1 {
        padding-top: 1%;
        padding-bottom: 3%;
}

.mainfooter .top-row .leftrow {
        padding-left: 15%;
        padding-top: 5%;
        float: left;
}

.mainfooter .top-row .right-leftside {
        width: 300px;
        float: right;
}

.mainfooter .top-row .right-rightside {
        width: 300px;
        padding-right: 7%;
        float: right;
}

/*
        ////////////////////////////////////
        /// HANDLE PHONE/SMALLER SCREENS ///
        ////////////////////////////////////
*/

@media only screen and (min-width: 150px) and (max-width: 600px)
{
        .body {
                width: 90%;
                font-size: 95%;
        }

        .mainheader img {
                width: 30%;
        }

        .mainheader nav {
                background: #666;
                height: 200px;
                line-height: 30px;
                margin-bottom: 0;
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
        }

        .mainheader nav ul {
                list-style: none;
                margin: 0 auto;
                padding-left: 0;
        }

        .mainheader nav li {
                width: 100%;
                margin-left: 0 auto;
        }

        .mainheader nav a:link, .mainheader nav a:visited {
                color: #FFF;
                display: block;
                height: 30px;
                padding: 5px 0;
                text-decoration: none;
        }

        .mainheader nav a:active,
        .mainheader nav .active a:link, .mainheader nav .active a:visited {
                background: #CF5C3F;
                color: #fff;
                text-shadow: none !important;
        }

        .mainheader nav li a {
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;

                border-radius: 5px;
                -moz-border-radius: 5px;

                -webkit-border-radius: 5px;
        }

        .content {
                width: 100%;
                float: left;
                margin-top: 2%;
        }

        .top-content {
                background-color: #FFF;
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                padding: 3% 5%;
                margin-top: 2%;
        }

        .bottom-content {
                background-color: #FFF;
                border-radius: 5px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                padding: 3% 5%;
                margin-top: 2px;
        }
}

和html：

<!DOCTYPE html>
<html lang="en">

<head>
                <title> Computer Company </title>
                <meta charset="utf-8" />

                <link rel="stylesheet" href="style3.css" type="text/css" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
        <header>
                <div class="mainheader">
                        <nav>
                                <h1>Company</h1>
                                <ul>
                                        <li class="active"><a href="#">Home</a></li>
                                        <li><a href="#">Solutions & Services</a>
                                                <ul>
                                                        <li><a href="#">Internet</a></li>
                                                        <li><a href="#">Networking</a></li>
                                                        <li><a href="#">Website</a></li>
                                                        <li><a href="#">Home Computers</a></li>
                                                        <li><a href="#">Servers</a></li>
                                                </ul>
                                        </li>
                                        <li><a href="#">Team</a>
                                                <ul>
                                                        <li><a href="#">Founder</a></li>
                                                        <li><a href="#">Graphics</a></li>
                                                </ul></li>
                                        <li><a href="#">Contact</a></li>
                                </ul>
                        </nav>

                        <div class="subheader">
                            <div class="inner_header">
                                <div class="left-content">
                                        <h1>Hello!</h1>

                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
                                </div>

                                <div class="right-content">
                                        <img src="images/logo.jpg"/>
                                </div>
                                <div style="clear:both;"></div>
                              </div>
                        </div>

                </div>
        </header>


<div class="content">

        <div class="firstsection">
                        <article class="firstarticle">
                                <div class="image-wrapper">
                                        <img src="images/computer.jpeg"/>
                                </div>
                                <content class="leftcontent">
                                        <h1>Efficient, Affordable, Reliable</h1>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
                                        <p><a href="#">› Contact us</a></p>
                                </content>
                                <content class="rightcontent">
                                        <h1>Latest Feedback</h1>
                                        <p><img src="images/plus.gif"/>Solved my problem quickly and efficiently! <i>- Melissa, QLD</i></p>
                                        <p><img src="images/plus.gif"/>Called Joel to organize an appointment, he came over and fixed the problem the same day!<i>- Zac, QLD </i></p>
                                </content>
                        </article>
        </div>

</div>


<footer class="mainfooter">
        <div class="top-row">

                <p class="leftrow"> &copy; 2015 <a href="index.html">Computer Company</a></p>

                <div class="right-rightside">
                        <h1>Contact</h1>
                        <p>Joel Male @</p>
                        <p>Mobile</p>
                        <p>Email</p>
                </div>
                <div class="right-leftside">
                        <h1>Opening Hours</h1>
                        <p>Monday - Friday: 9am - 5pm</p>
                        <p>Saturday: 10am - 4pm</p>
                        <p>Sunday: Closed</p>
                        <p>Public Holidays: Closed</p>
                </div>
        </div>
</footer>
</div>
</body>
</html>

请检查此代码并告诉我仍然有任何问题..

谢谢..