Merhabalar, HTML sayfam için tüm sayfayı kaplayacak dikey bir menü tasarlamak istiyorum..

Menü kodlarını HTML'ye ekledim. Fakat menü sayfanın ortasında küçücük kaldı..

Ben istiyorumki; Kim hangi cihazla veya tarayıcıyla girerse girsin benim menü orantılı olarak sayfanın tamamını kaplasın..


PC Görünüşü

https://prnt.sc/24xohme

Mobil Görünüşü

https://prnt.sc/24xoslh

Arzu Ettiğim Mobil Görüntü Örneği

https://prnt.sc/24xp2wx

Tecrübeli arkadaşlar yardımcı olursa çok sevinirim.



HTML KODU
<html>
<body style="background-color:black;">
	<head>
		<style type="text/css">
			.menu
			{
				list-style:none;
				margin:0; padding:0;
				display:inline-block;
			}
			
			.menu li
			{
				/* Menü Aralıkları */
				margin:5px;
			}
			  
			.menu a
			{
				text-decoration:none;
				color:#606;
				font-weight:bold;
				border:1px solid #609;
				display:block;
				/* Menü Büyüklüğü */
				padding:5px;
				background:#FCF;
				/* Menünün solundaki renkli alanın Büyüklüğü ve rengi */
				border-left:25px solid #606;
				/* Menü En Boy */
				width:150px;
				line-height:25px;
			  }
			  
			.menu a:hover
			{
				margin-left:5px;
				border-left:5px solid #F06;
				color:#F06;
			}
		</style>
	</head>

	<body>

		<center> <ul class="menu">
			<li><a href="anasayfa.html">ANASAYFA</a></li>
			<li><a href="projeler.html">PROJELER</a></li>
			<li><a href="referanslar.html">REFERANSLAR</a></li>
			<li><a href="hakkinda.html">HAKKINDA</a></li>
			<li><a href="iletisim.html">İLETİŞİM</a></li>
		</ul>
		</center>
	</body>
</html>