无法修复 html/css 侧边菜单 - 从这里尝试了许多解决方案答案

【问题标题】：cant make html/css side menu fixed - tried many solutions from here无法修复 html/css 侧边菜单 - 从这里尝试了许多解决方案
【发布时间】：2018-02-03 08:16:48
【问题描述】：

在 YouTube 上观看视频后，我制作了一个 html/css 侧边栏菜单。我想让我的菜单固定位置，并在左边全高。我已经谷歌了如何做到这一点，我找到了很多解决方案，但我尝试的每个解决方案都隐藏了我的菜单，除了第一个项目

这是我的html：

 body{
    	margin: 0px;
    	padding: 0px;
    	font-family: "Arial", Helvetica, sans-serif;
    	background: #1C1C1C;
    }

    .menu ul{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    		
    .menu ul li{
    	padding: 15px;
    	width: 160px;
    	height: auto;
    	position: relative;
    	background-color: #424242;
    	cursor: pointer;
    	-webkit-transition: all 0.3s;
    	-o-transition: all 0.3s;
    	transition: all 0.3s;
    }
    		
    .menu ul li:hover{
    	background-color: #FA5858;
    }
    .menu > ul > li{
    	border-right: 5px solid #FF0000;
    }

    .menu ul ul{
    	transition: all 0.3s;
    	opacity: 0;
    	position: absolute;
    	border-left: 5px solid #FF0000;
    	left: 100%;
    	top: -2%;
    }
    .menu ul li:hover > ul {
    	opacity: 1;
    	visibility: visible;
    }
    		
    .menu ul li a{
    	color: #fff;
    	text-decoration: none;
    	display: block;
    }

    span{
    	margin-right: 15px;
    }

<!DOCTYPE html>
<html>
<head>
	<title>Menu</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
	<div class="menu">
		<ul>
			<li><a href=""><span class="far fa-newspaper"></span>one</a></li>
			<li><a href=""><span class="far fa-list-alt"></span>two</a></li>
			<li><a href=""><span class="fas fa-user-secret"></span>three</a></li>
			<li><a href=""><span class="fas fa-shopping-basket"></span>four</a>
				<ul>
					<li><a href=""><span class="far fa-address-book"></span>d one</a></li>
					<li><a href=""><span class="fas fa-globe"></span>d two</a>
						<ul>
							<li><a href=""><span class="fas fa-sliders-h"></span>d d one</a></li>
							<li><a href=""><span class="far fa-envelope-open"></span>d d two</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href=""><span class="far fa-question-circle"></span>five</a></li>
		</ul>
	</div>
</body>
</html>

如果有人能帮我解决这个问题，那就太好了，如果你也能解释为什么会这样，这样我以后就不会再遇到这个问题，那就更好了。

谢谢

【问题讨论】：

标签： html css menu fixed

【解决方案1】：

您应该在 CSS 中使用 position 和 top 属性。就这样。

menu {position: fixed;
top: 0; /* Just change directions. like bottom:0; etc
  /* you can add all the other attributes if you want 
  }

【讨论】：

我这样做并增加了 100% 的高度，但尺寸没有改变？谢谢
我自己重新编写了与教程不同的代码，并使用了您所说的内容。工作正常：D 不知道为什么上面发布的代码上没有。