This is my header image, i want the same as footer而不是左边的谷歌，我需要在页脚部分保留版权，标题中有相同的填充，即70px。我有另一个问题，我已经在链接中创建了一个子菜单，但该链接无法正常工作。我需要在页脚部分使用相同的菜单作为＆＃34; dropup＆＃34;。
这是我的代码段
注意：请在完整窗口中运行，同时使用代码段
body {
margin: 0;
padding: 0;
max-width: 100%;
overflow-x: hidden;
line-height: 1.5em;
color: #333;
font-family: Arial, Verdana, sans-serif;
}
#logo {
width: 130px;
height: 55px;
margin: 5px 0 5px 70px;
}
nav {
background-color: #222;
}
ul {
float: right;
list-style: none;
}
ul li {
display: inline-block;
clear: both;
position: relative;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
padding: 10px 20px;
background: #222;
color: #fff;
}
ul li a:hover {
background: #000;
color: #fff;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #fff;
color: #000;
}
li:hover li a:hover {
width:;
background: #f5f5f5;
color: #262626;
padding: 10px 15px;
}
/*jumbotron*/
.content {
padding: 20px 0 0;
background-color: #eee;
text-align: center;
height: 150px;
}
.heading {
font-size: 50px;
font-weight: bold;
}
/*default props for img gallery*/
.imggal {
display: inline-flex;
}
/*row1 img*/
.col1 #tech {
vertical-align: middle;
margin: 40px;
}
/*default column props on rows*/
.col1,.col2 {
width: 50%;
padding: 10px 20px;
text-align: justify;
vertical-align: middle;
}
/*default props for all images except row1 */
.img {
height: 150px;
width: 150px;
margin: 5px;
overflow: hidden;
float: left;
}
.imgthumbnail {
display: block;
margin: auto;
}
/*row3 img's*/
.r3c1, .r3c2 {
height: 150px;
width: 150px;
margin: auto;
display: block;
}
/*to stop overflowing on the img*/
.r2imgtxt {
overflow: hidden;
}
.r3imgtxt {
text-align: center;
}
footer {
width: 100%;
background-color: #222;
padding: 10px 0;
color: #fff;
bottom: 0;
}
footer nav {
float: right;
}
footer nav ul {
margin:20px 0;
}
footer nav ul li {
display: inline-block;
margin-left: 20px;
list-style-type: none;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<title>A sample web page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<nav>
<img id="logo" src="images/google_logo.png" alt="google logo">
<ul class="headermenu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul class="headersub">
<li><a href="#">Mission</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">Services</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a> </li>
</ul>
</nav>
<!-- content -->
<div class="content">
<h1 class="heading">Welcome to Google</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!-- body -->
<div class="imggal">
<div class="col1">
<img id="tech" src="images/tech.png" alt="technology">
</div>
<div class="col2">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div> <!-- EOF row1 -->
<!-- row2 -->
<div class="imggal">
<div class="col1">
<img class="img r2c1" src="images/www.png" alt="earth as www">
<div class="r2imgtxt">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col2">
<img class="img r2c2" src="images/technology.png" alt="technology">
<div class="r2imgtxt">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div> <!-- EOF row2 -->
<!-- row3 -->
<div class="imggal">
<div class="col1">
<div class="imgthumbnail">
<img class="r3c1" src="images/apple.png" alt="apple logo">
</div>
<div class="r3imgtxt">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div> <!-- EOF col1row3 -->
<div class="col2">
<div class="imgthumbnail">
<img class="r3c2" src="images/computer.png" alt="computer">
</div>
<div class="r3imgtxt">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div> <!-- EOF col2row3 -->
</div> <!-- EOF row3 -->
<!-- EOF body -->
<footer>
<nav>
<p id="copyrights">© Copyrights Reserved. Google Inc.</p>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">Services</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a> </li>
</ul>
</nav>
</footer> <!-- EOF footermenu -->
</div> <!-- EOF container -->
</body>
</html>
答案 0 :(得分：0)
试试这个简单的mod：
footer nav {
float: none;
}
nav ul {
float: none;
}
nav li:hover ul {
bottom: 25px;
}
ul.headersub li {
display: block;
}