我找到了一些人们问这样问题的地方，但这些地方的答案都没有帮助我。希望我能有更多的运气来问我自己的问题。
我正在尝试为我工作的公司设计基础/原型网站。在我们的服务页面上，我想要左侧的不同服务的侧边栏导航菜单，而内容在右侧。在我开始向页面添加内容并将段落包装到第二行之前，它工作得很好。一旦发生这种情况，内容div就会降低到侧边栏导航之下。我已经尝试将它们显示为内联块，就像在另一个问题中建议的那样，但这不起作用。我也试图用响应式内容练习，所以我不想给出一堆绝对宽度或任何东西让它们彼此相邻。任何人都可以帮我解决这个问题吗？
参见工作示例：https://jsfiddle.net/joshuahuff/qcckdqju/1/ *内容背景设置为黄色，以便在弄清楚这个问题时可见。一旦问题解决，背景将被删除。
我的HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tab Title</title>
<meta name="description" content="Description of Site">
<meta name="author" content="Name of Author">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<script src="js/scripts.js"></script>
<header>
<h1><a href="index.html">Atlas Land Office</a></h1>
<nav class="MainNavbar">
<div class="MainNavbarDropdown">
<ul>
<li><a href="index.html">Home</a></li>
<li class="selected"><a href="services.html">Services</a></li>
<li><a href="projects.html">Highlight Projects</a></li>
<li><a href="news.html">News</a></li>
<li id="contact-us" class="contact-us contact-us-selected"><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
</header>
<div class="PageContent">
<div class="PageContentNav">
<ul>
<li><a href="alta.html">ALTA/ACSM Land Title Survey</a></li>
<li><a href="as-built.html">As-Built Survey</a></li>
<li><a href="boundary.html">Boundary Survey</a></li>
<li><a href="construction.html">Construction Staking</a></li>
<li><a href="elevation.html">Elevation Certificate</a></li>
<li><a href="access.html">Legal Access Certificate</a></li>
<li><a href="split.html">Lot Split Survey</a></li>
<li><a href="mir.html">Mortgage Inspection Report</a></li>
<li><a href="topo.html">Topographic Survey</a></li>
</ul>
</div>
<div class="Content">
<h2>Overview</h2>
<p class="PageContentP"><i>Atlas Land Office</i> is a full-service land surveying company which strives to provide nothing but top-notch service to our clients, both in-field <em>and</em> in-office. We do everything from ALTA/ACSM Land Title Surveys to Mortgage Inspection
Reports.</p>
<br />
<p><b>Our services include:</b>
<ul>
<li>ALTA/ACSM Land Title Survey</li>
<li>As-Built Survey</li>
<li>Boundary Survey</li>
<li>Construction Staking</li>
<li>Elevation Certificate</li>
<li>Legal Access Certificate</li>
<li>Lot Split Survey</li>
<li>Mortgage Inspection Report</li>
<li>Topographic Survey</li>
</ul>
</p>
</div>
</div>
</body>
</html>
我的CSS：
/* General */
@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Oswald:700|PT+Sans');
body {
padding: 0;
margin: 0;
font-size: 62.5%;
}
/* Smartphones */
@media screen and (max-width:320px) {
/* put your css here */
}
/* Tablets */
@media screen and (min-width:321px) {
/* put your css here */
}
/* Desktops */
@media screen and (min-width:800px) {
/* Main Navigation */
/* Styling the header */
header {
height: 60px;
width: 100%;
padding: 0;
margin: 0;
background: /*#ecf0f1*/
#222;
color: #E54D0B;
}
/* Styling the header h1 */
header h1 {
padding-left: 10%;
line-height: 60px;
font-size: 3em;
}
header h1 a {
text-decoration: none;
color: #E54D0B;
}
/* Applying same CSS to header h1 */
header h1 {
margin: 0;
font-family: Oswald, "Arial Black", Gadget, sans-serif;
}
/* Styling the nav container */
.MainNavbar {
height: 30px;
margin: 0;
line-height: 30px;
font-size: 1.4em;
box-shadow: 5px 0 3px #333;
}
.MainNavbar .MainNavbarDropdown {
background: #E54D0B;
}
.MainNavbar ul {
padding-left: 10%;
margin: 0;
list-style: none;
font-family: "PT Sans", sans-serif;
}
.MainNavbar ul li {
display: inline-block;
position: relative;
line-height: 30px;
text-align: center;
}
.MainNavbar ul li a {
padding: 0 30px;
display: block;
text-decoration: none;
color: #000;
}
.PageContentNav ul li a {
padding: 0 15px;
display: block;
text-decoration: none;
color: #000;
}
.MainNavbar ul li:hover a {
height: 30px;
background: #F56527;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #333;
transition: all 0.1s linear;
}
.selected {
height: 30px;
background: #FF7133;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #333;
}
.contact-us {
background: #222;
}
#contact-us a {
color: #FF7133;
}
.MainNavbar ul li.contact-us:hover a {
height: 30px;
background: #222;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #FF7133;
transition: all 0.1s linear;
}
/* Website Content */
.PageContent {
padding: 3% 15% 20px;
margin: 0;
color: #000;
font-family: Arial, sans-serif;
font-size: 1.4em;
}
.PageContentNav {
padding-top: 2%;
margin: 0;
float: left;
font-family: "PT Sans", sans-serif;
}
.PageContentNav ul {
padding: 0;
margin: 0;
list-style: none;
background: #E54D0B;
}
.PageContentNav ul li {
height: 50px;
padding: 0;
margin: 0;
line-height: 50px;
}
.PageContentNav ul li:hover a {
background: #FF7133;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
transition: all 0.3s linear;
}
.Content {
margin-left: 4%;
float: left;
background: yellow;
}
.Content h2 {
font-family: "Arial Black", Gadget, sans-serif;
}
.Content p {
font-family: "PT Sans", sans-serif;
}
}
答案 0 :(得分：0)
你必须让CSS的另一个元素的父元素或子元素相邻，才能正确地找到它并按照你想要的方式执行它（例如，在下拉菜单中）。否则你将需要jQuery或javascript来“找到”需要出现/消失的其他元素，并让该语言改变元素的CSS。 CSS不能以这种方式“检测”另一个“远程”元素。
大多数时候你需要有类似......
的东西<ul> //Links
<li>First Main Link
<ul> //This is the menu that appears and disappears
<li>Link to appear #1</li>
<li>Link to appear #2</li>
</ul>
</li>
<li>Second Main Link</li>
</ul>
然后有类似于CSS的东西...
//CSS
ul{
width: 900px;
height: 20px;
background: rgba(0,0,0,0.2);
}
ul li{
padding: 10px;
}
ul li > ul{
display: none;
}
ul li:hover > ul{
display: block;
position: absolute; //makes the element appear wherever you want it, starting from where it is located in the parent element
z-index: 10; //this makes the menu hover over other things, similar to layers; higher the number, higher it is
}
这并不完美，但可能有助于明确这一点。当你将鼠标悬停在ul li上时，则ul li> ul从display更改：none;显示：块;如果元素ul在元素li中，则在“悬停时”显示。
大多数时候，我个人使用div作为子菜单，当你将鼠标悬停在链接上时，它会下拉，而不是ul元素，但选择是你的。执行是相对相同的。您需要添加边距或类似于ul li＆gt;的内容。 ul根据菜单等“移动”您需要它的元素在页面上。
祝你好运！