محرر ويب أونلاين

<!DOCTYPE html>
<html>
	<head>
		<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    width: 25%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

li a {
    display: block;
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    color: white;
    background-color: #444;
}

.active {
    color: white;
    background-color: darkcyan;
}
		</style>
	</head>
	<body>
        <ul>
            <li><a href="#home" class="active">Home</a>
            <li><a href="#services">Services</a>
            <li><a href="#contact">Contact</a>
            <li><a href="#about">About</a>
        </ul>
        <div style="margin-left:25%; padding: 0 16px; height:1000px;">
    		<h1>Fixed Side Nav</h1>
		    <p>Scroll down to see how the side nav is always fixed.</p>
		    <p>Scroll down to see how the side nav is always fixed.</p>
		    <p>Scroll down to see how the side nav is always fixed.</p>
		    <p>Scroll down to see how the side nav is always fixed.</p>
		    <p>Scroll down to see how the side nav is always fixed.</p>
        </div>
	</body>
</html>