Search code examples
htmlcssmenufixed

cant make html/css side menu fixed - tried many solutions from here

I have made a html/css sidebar menu after watching a video on YouTube. I would like to make my menu fixed position, and full height down the left. I have Google'd how to do this, i found many solutions but every one i try hides my menu, apart from the first item

Here is my 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>

Would be great if someone can help me fix this, even better if you can also explain why it is happening so i dont have this issue in the future.

Thanks

Solution

  • You should Use the position and top attribute in your CSS. just like this.

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