1
我正在寫一個主頁，我需要一個保管箱菜單，所以我從谷歌搜索中找到了保存箱菜單的演示。但即使我應用演示，代碼也無法正常工作。它的佈局非常荒謬。保管箱菜單的主頁佈局很奇怪
#menubar與#site_content平行，但我打算放置#memubar，其中包含垂直投箱菜單，然後是#site_content。詳情請參閱下面的源代碼。
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
font: normal .80em trebuchet ms, sans-serif;
background: #EEE;
color: #5D5D5D;
}
#site_content h1 {
font: normal 140%'century gothic', arial, sans-serif;
}
a,
a:hover {
outline: none;
text-decoration: underline;
color: #000000;
}
a:hover {
text-decoration: none;
color: #747474;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul li {
float: left;
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
min-width: 100%;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
#main,
#logo,
#menubar,
#site_content,
#footer {
margin-left: auto;
margin-right: auto;
}
#main {
padding-bottom: 20px;
}
#header {
background: transparent;
height: 170px;
}
#menubar {
height: 24px;
width: 900px;
}
#site_content {
width: 858px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 10px 20px 20px 20px;
background: #fcfcfa;
border: 15px solid #FFF;
}
#site_content h1 a {
text-decoration: none;
}
#site_content.article {
font-size: 100%
}
.sidebar {
float: right;
width: 190px;
padding: 0 15px 20px 15px;
}
.sidebar ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
.sidebar li {
list-style: none;
padding: 0 0 7px 0;
}
.sidebar li a,
.sidebar li a:hover {
padding: 0 0 0 25px;
display: block;
background: transparent url(link.png) no-repeat left center;
}
.sidebar li a.selected {
color: #444;
text-decoration: none;
}
.dropdown {
position: relative;
/** Make it fit tightly around it's children */
display: inline-block;
}
.dropdown .dropdown-menu {
position: absolute;
/**
* Set the top of the dropdown menu to be positioned 100%
* from the top of the container, and aligned to the left.
*/
top: 100%;
left: 0;
/** Allow no empty space between this and .dropdown */
margin: 0;
list-style: none;
/** Remove list bullets */
width: 100%;
/** Set the width to 100% of it's parent */
padding: 0;
}
/**
* Apply these styles to .dropdown-menu when user hovers
* over .dropdown
*/
.dropdown:hover .dropdown-menu {
/** Show dropdown menu */
display: block;
}<!DOCTYPE HTML>
<html>
<head>
<title>main</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style/style.css?ver=1" />
</head>
<body>
<div id="main">
<div id="header">
<div id="logo">
<h1><a href="index.html"><span class="logo_colour">Homepage</span></a></h1>
<h2>Test</h2>
</div>
<div id="menubar">
<ul id="menu">
<li class="selected"><a href="index.html">Menu1</a>
</li>
<li> <a href="#">Menu2▾</a>
<ul class="dropdown">
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</li>
<li><a href="#" class="ellipsis">Memu3</a>
</li>
<li><a href="#" class="ellipsis">Menu4</a>
</li>
</ul>
</div>
</div>
<div id="site_content">
<h1>Welcome to Homepage<br/> We welcome you. <br/><br/><br/></h1>
</div>
<div id="footer">
<section align="left" class="visitor bg_white">
<b>Address:</b> Address
<br />
<b>Phone:</b> Phone
<br/>
<b>Email:</b> <a href="mailto:[email protected]">[email protected]</a>
<br/>
<br/>
</section>
<p class="day">Copyright © 2016 CAS Lab. All rights reserved.</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/common.js?ver=1"></script>
</body>
</html>
這是什麼意思？ –