我有两个关于我的类(class)网站的具体问题。
首先，我 float 的左侧垂直导航栏妨碍了我网站主题/流派页面上的不同部分。
每当我转到此页面时，默认情况下导航栏都会将我的第一部分(“恐怖”)推到右侧。这很好，我希望我的所有部分都永久地向右移动，这样我的导航栏就不会漂浮在我的任何部分上。但是，现在只有第一部分向右移动，当导航栏“漂浮”向下时，导航栏要么直接漂浮在这些部分上方，要么这些部分扭曲并看起来很奇怪。
下面是 Theme.html 页面代码。为了简洁起见，我只包含了第一个“部分”。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="favicon-animated%20dice.ico" rel="icon" type="image/x-icon">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<title>Rolling Solo Theme/Genre</title>
<meta charset="utf-8">
<link rel="stylesheet" href="rollingsolo.css" type="text/css">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="js/float-panel.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<div id="header">
<h1>Rolling Solo</h1>
<h2>"I Roll Solo"</h2>
</div>
</header>
<div id="headings">
<h1>Board Games Theme & Genre</h1>
</div>
<div id="nav" class="float-panel">
<nav class="navigation"><!--Added .navigation-->
<ul class="mainmenu"><!--Added .mainmenu-->
<li><a href="index.html">Home</a></li>
<li><a href="theme.html">Theme/Genre></a>
<ul class="submenu"><!--Added .submenu-->
<li><a href="#Horror">Horror</a></li>
<li><a href="#Sci-Fi">Sci-Fi</a></li>
<li><a href="#Survival">Survival</a></li>
<li><a href="#Pirate">Pirate</a></li>
<li><a href="#RPG">RPG/Fantasy</a></li>
<li><a href="#Space">Space</a></li>
<li><a href="#Apocalypse">Nuclear Apocalypse</a></li>
</ul>
</li>
<li><a href="top.html">Top Solo Games of 2017</a></li>
<li><a href="variants.html">Variants</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<main>
<section id="Horror"class="sections"><h3>Horror</h3>
<hr>
<a href="theme/Arkham%20Horror-The%20Card%20Game(Medium).jpg"><img src="theme/Arkham%20Horror-The%20Card%20Game(Medium).jpg" height="80" width="80" alt="arkham horror pic" class="images"></a>
<p>Arkham Horror is a great deck building game.</p>
<br>
<a href="theme/Kingdom%20Death-Monster(medium).jpg"><img src="theme/Kingdom%20Death-Monster(medium).jpg" height="80" width="80" alt="kingdom death monster pic" class="images"></a>
<p>This game was a mega-hit during its Kickstarter campaign last year. Extremely in demand and a great buy, if you can get your hands on it.</p>
<br>
</section>
我查看了我的 CSS 类“部分”并多次尝试将蓝色边框移到右侧，但仍然无法做到。
下面是我的主题/流派部分和导航代码的 CSS 代码:
.sections {border-style: ridge; /*adjusts the Theme/Genre Sections*/
border-width: 10px;
border-color: #1D3D94;
padding-left: 20px;
padding-right: 20%;
overflow:auto;}
.images {float: left; /*adjust the pics in the Theme/Genre Sections*/
padding-top: 10px;
padding-right: 10px;}
#nav {float: left; width: 200px; margin: 10px 0;}
/* define a fixed width for the entire menu */
.navigation {width: 190px;}
/* reset the lists to remove bullet points and padding */
.mainmenu, .submenu {list-style: none;
padding: 0;
margin: 0;}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;}
/* add hover behavior */
.mainmenu a:hover {background-color: #C5C5C5;}
/* when hovering over a .mainmenu item,
display the submenu inside it.*/
.mainmenu li:hover .submenu {display: block;
max-height: 200px;}
/*Now, overwrite the background-color for .submenu links only.
.submenu a {background-color: #999;}
/* hover behavior for links inside .submenu */
.submenu a:hover {background-color: #666;}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.*/
.submenu {overflow: auto;
max-height: 0;
-webkit-transition: all 0.5s ease-out;}
有没有办法永久将这些部分移到导航栏右侧？
其次，我不想在嵌套目录中使用滚动条功能，而是在我的鼠标悬停在导航栏中的“主题/流派 >”标题上时将我的所有部分显示在一起。到目前为止，它只显示七个子目录中的五个，然后必须使用滚动条向下滚动才能看到其余目录。 
如何删除滚动条并显示所有七个子目录？
非常感谢您提供的所有帮助。我很感激。
最佳答案
您可以使用 css :hover 状态处理您的子菜单项。
你可以像这样放置你的菜单和内容:
<div class="site-container">
<nav class="menu"><!-- Your menu--></nav>
<main><!-- Your main content--></main>
</div>
并在 .site-container 上添加 display: flex;。
例如，将菜单的宽度设置为 200px
并将主要内容的宽度设为calc(100% - 200px);
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
display: flex;
flex-flow: row wrap;
}
.menu {
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu nav > ul {
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
}
.menu ul li.has-child li {
display: none;
background: #8E8E8E;
}
.menu ul li.has-child:hover li{
display: block;
}
main {
/*Total size minus the menu size*/
width: calc(100% - 200px);
padding: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
} <div class="site-container">
<div class="menu">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="has-child">
<a href="#">Theme/Genre</a>
<ul>
<li><a href="#">Sci-Fi</a></li>
<li><a href="#">Survival</a></li>
<li><a href="#">Pirate</a></li>
<li><a href="#">RPG/Fantasy</a></li>
<li><a href="#">Horror</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Aventure</a></li>
</ul>
</li>
<li><a href="#">Top Solo Games of 2017</a></li>
<li><a href="#">Variants</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>您可以通过使用 position: fixed; 将您的菜单固定在屏幕的左上角来进行改进。顶部:0；左:0； z-index: 2;，所以它总是可见的。并设置 position: absolute;左:100%； top: 0; 在 submenu 和 position: relative; 在它的 parent li 上，所以子菜单会出现在右边你的菜单。它会阻止菜单做“溜溜球”。
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
position: relative;
}
.menu {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
position: relative;
}
.menu ul li.has-child ul {
display: none;
background: #8E8E8E;
position: absolute;
left: 100%;
top: 0;
}
.menu ul li.has-child:hover ul{
display: block;
}
main {
padding-left: 210px;
padding-right: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
z-index: 1;
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
} <div class="site-container">
<div class="menu">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="has-child">
<a href="#">Theme/Genre</a>
<ul>
<li><a href="#">Sci-Fi</a></li>
<li><a href="#">Survival</a></li>
<li><a href="#">Pirate</a></li>
<li><a href="#">RPG/Fantasy</a></li>
<li><a href="#">Horror</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Aventure</a></li>
</ul>
</li>
<li><a href="#">Top Solo Games of 2017</a></li>
<li><a href="#">Variants</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>关于css - 垂直导航栏移动到网站的其他部分/删除滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48207104/