html-css przyklejony pasek menu do przeglądarki. [ankieta]

Dzień dobry.

Jestem tu po raz pierwszy. Na początek kilka słów o sobie. Proszę o wyrozumiałość. Zainteresował mnie kurs HYML-CSS. Pana Mirosława Zelenta, ale chcę zaznaczyć, ,że być może będę najstarszym członkiem forum. Kilka dni temu skończyłem 69 lat. Zapewne pojawi się na wielu twarzach zdumienie. Co ten gość tu robi są uniwersytety 3 wieku. Tak ale mój poziom wiedzy jest nieco wyższy niż tam, nauczają przede wszystkim zwykłego korzystania z komputera i internetu. Chciałbym po prostu nauczyć się jak tworzy się strony internetowe i publikuje w sieci dla mojej satysfakcji. Chyba można prawda? I mój wiek nie będzie przeszkodą. W 3 lekcji kursu zacięło się. Dotyczy on między innymi jak zakodować aby podczas przewijania pasek menu przykleił się na górze przeglądarki. Pan Mirosław doskonale to tłumaczy, ale mimo wszystko mi to nie wychodzi. Jeden z możliwych błędów znalazłem, a mianowicie w kodzie html nazwę paska zapisałem jako div class: "menu" tymczasem w kodzie java scriptu jaki jest udostępniony w kursie widnieje nazwa 'nav' poprawiłem to w html ale nie pomogło. literówek nie ma innych błędów nie widzę, być może to błahostka. Pod kursem na YouTube w komentarzu napisałem o tym, bo podobną sytuację miał jeden z kursantów, z tym że on miał literówkę i szybko znalazł. W odpowiedzi na mój wpis dostałem radę abym zwrócił się na to nasze już od teraz forum. Więc jestem.

 <!DOCTYPE HTML>
<html lang="pl">
<head>
 <meta charset="utf-8" />
 <meta name="discription" content="opis stony ok 150 znaków rózne" />
 <meta name="keywords" content="kilka z przecinkami, słów, kojarzących się ze stroną" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    
 <title>ZbiBoj3</title>
 <link rel="stylesheet" href="style.css" type="text/css" />
 <link rel="stylesheet" href="css/fontello.css" type="text/css" />
 
 <script src="timer.js"></script>             
 
 <style>

 </style>
</head>

<body onload="odliczanie();">

 <div class="wraper">
 
  <div class="header">
   <div class="logo"><span style="color: red">LOGO</span>.DUŻE</div>
  </div>
 
  <div class="nav">
    <ol>
	 <li><a href="#">Strona Główna</a></li>
	 <li><a href="#">Poradniki</a>
	  <ul>
	   <li><a href="https://www.youtube.com/results?search_query=poradniki+photoshop" target="_blank" title="tutoriale YouTube">Photoshop</a></li> 
	   <li><a href="https://www.youtube.com/results?search_query=proshow+producer" target="_blank" title="tutoriale YouTube">Proshow</a></li> 
	   <li><a href="https://www.youtube.com/results?search_query=kurs+html+miros%C5%82aw+zelent" target="_blank" title="Kurs YouTube">KursHTML</a></li>
	  </ul>
	 </li>
	 <li><a href="#">Prywatne</a>
	  <ul>
	    <li><a href="index1.html" title="tutoriale">Zdjęcia</a></li> 
	    <li><a href="index2.html" title="tutoriale">Video</a></li> 
	    <li><a href="index3.html" title="ttoriale">Muzyka</a></li>
	  </ul>
	 </li>
	 <li><a href="#" target="_blank">Rózne</a></li>
	 <li><a href="#" target="_blank">O nas</a></li>
	</ol>
  </div>
 
  <div class="content"><b><span style="text-decoration: underline;">LOREM IPSUM</span></b><br/><br/>
 

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec augue vitae lorem tincidunt fermentum. Proin neque magna, tempor vitae nisl eget, fringilla suscipit lorem. Donec consequat, velit a cursus euismod, sapien erat molestie libero, sagittis accumsan magna est vel tortor. Phasellus pulvinar molestie felis, sit amet hendrerit dolor cursus a. Aenean ac porttitor eros. Nunc ut velit sed quam mollis cursus nec nec neque. Sed tempor arcu et sapien viverra imperdiet in a mauris. In posuere quam volutpat finibus convallis.</p>

 <p>Ut imperdiet felis posuere magna rutrum, ut aliquam arcu condimentum. Aenean finibus in ipsum ut interdum. Vivamus viverra eu nibh non ullamcorper. Morbi aliquet, justo sit amet malesuada facilisis, nibh enim viverra neque, a tempor nulla dui eu tortor. Etiam tincidunt, tortor non aliquet maximus, tortor diam elementum dolor, non fermentum justo urna sit amet purus. Cras eu sodales turpis. Etiam aliquet at ex eget sodales. Duis tortor nulla, malesuada at turpis sed, pretium vulputate elit.</p>

 <p>Pellentesque justo ipsum, lobortis sit amet lacus ultrices, malesuada bibendum nibh. Sed nibh sapien, sagittis id arcu et, lobortis gravida sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sem lacus, aliquet a nisi in, dictum dignissim felis. Quisque pharetra sit amet sapien et hendrerit. Donec in pretium urna, vitae sodales erat. Aenean eleifend accumsan augue, in finibus dolor cursus sit amet. Morbi placerat rhoncus mauris vel posuere. Mauris tortor elit, interdum in ipsum vel, efficitur volutpat neque.</p>

 <p>Nulla lacus urna, sagittis et molestie ac, egestas nec nulla. Mauris magna ex, vulputate ac diam et, accumsan laoreet libero. Praesent non pharetra tortor. Nunc vestibulum posuere lorem sed egestas. Cras eu convallis neque. Donec ex nulla, maximus vitae nibh eget, rutrum ultrices nulla. Integer eu accumsan dolor. Suspendisse quis arcu dignissim, pretium turpis euismod, dictum ligula. Nulla facilisi. In nec nunc consectetur, dictum neque ut, porta urna.</p>

 <p>Cras tempus ut purus ac faucibus. Curabitur aliquet imperdiet tellus, ullamcorper volutpat justo cursus sed. Sed mollis condimentum egestas. Maecenas ut magna accumsan, imperdiet tellus quis, finibus diam. Suspendisse a justo ac lectus consectetur accumsan. Fusce elementum sem eu sapien egestas, in pretium nunc semper. Nunc sed laoreet velit.<p/>
 Wygenerowano 5 akapitów, 358 słów, 2394 bajtów Lorem Ipsum
 </div>
 
 <div class="social">
  <div class="socialdivs">
   <div class="yt"><a href="https://www.youtube.com/?gl=PL" target="_blank" title="YouTube"><i class="icon-youtube-1"></i></a>
   </div>
   <div class="mail"><a href="https://poczta.o2.pl/zaloguj" target="_blank" title="e-mail"><i class="icon-mail"></i></a>
   </div>
   <div class="moto"><a href="https://www.otomoto.pl/osobowe/" target="_blank" title="Otomoto"><i class="icon-cab"></i></a>
   </div>
   <div class="ing"><a href="https://www.ingbank.pl/" target="_blank" title="Bank Ślaski"><i class="icon-cc-visa"></i></a>
  </div>
 </div>
  <div style=" clear: both;"></div>
 </div>
 
 <div id="footer"><i class="icon-phone"></i> +48 000 000 000;  &nbsp; email: ramzes@wp.pl</div>
</div>

   <script src="jquery-1.11.3.min.js"></script>  

</body>
</html

Tak mam w kodzie HTML a poniżej daję jeszcze kod arkusza CSS

body
{
	background-color: #303030;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	color: #ffffff;
/* !important-oznacza ważne łamie ustawienia domyśne przegladarki*/
	margin: 0 !important;
}

.wraper
{
	width: 100%;
	
}

.header
{
	width: 100%;
	height: 80px;
	padding: 10px 0;
	background-color:;
}

.logo
{   float:;
	width: 700px;
	height: 75px;
	background-color: ;
	margin-left: auto;
	margin-right: auto;
	border: 3px solid yellow;
	padding: px;
	letter-spacing: 8px;
	font-size: 60px;
	font-weight:700;
	text-align: center;
}

#zegar
{
	float: left;
	width: 140px;
	height: 40px;
	background-color:;
	margin-left: 300px;
	margin-right:;
	margin-top: 15px;
	border: 3px solid yellow;
	padding: px;
	color: white;
	text-align: center;
	font-size: 30px;
}

.nav
{ 
	width: 100%;
	height: 80px;
	margin-top: 30px;
	margin-left:;
	margin-right:;
	padding-top:px;
	background-color: gray;
	border-top: 3px solid red;
	border-bottom: 3px solid red;
	text-align: center;
	font-size: 25px;	
}

.content
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	background-color:;
	font-size: 30px;
	text-align: yustify;
	color: white;
}

.social
{
	width: 1200px;
	margin-top: 60px;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
	text-align: center;
	border: 3px solid yellow;
}

.socialdivs
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-top:;
	margin-top:;
	font-size:;
}

.option
{
	width:;
	height:;
}

a
{
	color: white;
	text-decoration: none;
}

.yt
{
	float: left;
	width: 250px;
	height: 80px;
}

.yt:hover
{
	background-color: red; 
}

.mail
{
	float: left;
	width: 250px;
	height: 80px;
}

.mail:hover
{ 
	background-color: #6834AA; 
}

.moto
{
	float: left;
	width: 250px;
	height: 80px;
}

.moto:hover
{
	background-color: #750505; 
}

.ing
{
	float: left;
	width: 250px;
	height: 80px;
}

.ing:hover
{
	background-color: #FF7300; 
}

#footer
{   
	width: 100%;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	margin-bottom: 20px;
	padding-top: 5px;
	border-top: 3px solid red;
	border-bottom: 3px solid red;
	background-color: gray;
	font-size: 40px;
	text-align: center;
}

.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

ol
{ /* pierwszy krok wyzerowanie domyślnych ustawień przegladarki na 0*/
    padding: 0;
	margin: 0;
	list-style-type: none;
	margin-top:px;
	margin-bottom:px;
	font-size: 30px;
	height:px;
	line-height: 200%;
	display: inline-block;
}

ol a
{
	color: #ffffff;
	text-decoration: none;
	/* dispaly: block; link ma się zachowywać jak element blokowy np div*/
	display: block;
}

ol > li
/* stylizacja potomka li rodzica ol*/ 
{
    float: left;
    width: 250px;
    height: 80px;
    border-right: 3px solid red;	
}

ol > li:first-child
{
	border-left: 3px solid red;	
}

ol > li:hover
{
	background-color: black;
}
/* selktor poniżej zmieni  po najechaniu kolor liter */
ol > li:hover > a
{
	color: yellow;
}

ol > li > ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	/* aby lista nie była wyswietlana musimy dodać atrybut po niżej*/
	display: none;
}

ol > li:hover > ul
{
	display: block;
} 

ol > li > ul > li
{
	background-color: orange;
	/* selktor ponizej ustawia na wierzhu pozycję li w ul wzgledem content*/
	position: relative;
	/* a dla pewności że tekst w content będzie przysłaniany prze listę rozwijaną dodajemy jak poniżej*/
	z-index: 100; 
	border-top: 3px solid black;
}

ol > li > ul > li:hover
{
	background-color: gray;
	
}

ol > li > ul > li:hover > a
{
	color: yellow;
}

Niby wszystko zgodne z kursem ale nie wyszło. Będę wdzięczny za jakieś sugestie i wyjaśnienia. W html przed zamknięciem body, a w css selektor sticky.

Dzień dobry ponownie.

Dziękuję za zainteresowanie moim wpisem. A może jakieś sugestie co do innych sensowniejszych poradników czy tutoriali. Przy okazji kilka lat temu też mnie to zainteresowało i korzystałem z KURSU HTML strona za darmo. http://www.kurshtml.edu.pl/index.html i jakoś mnie nie wciągnęło. A tu po obejrzeniu najpierw kilku lekcji rozjaśniło mi się o co w tym kodowaniu chodzi. Zacząłem próbować od 2 czy 3 miesięcy i tkwię w tym dalej i chcę brnąć dalej. Od całkowicie zielonego w tym temacie już co nie co jak wspomniałem Pan Zelent przejrzyście to tłumaczy. Poczułem się w domu przed laptopem jak niegdyś na mojej Politechnice Częstochowskiej. I tu zgadzam się ze zdaniem starego wyjadacza.

W każdym razie będę częstszym użytkownikiem forum ponieważ mam nadzieję uzyskać pomoc wyjaśnienia i wsparcie. Pozdrawiam wszystkich użytkowników forum.