Menu z zegarkiem

pytanie zadane 26 września 2017 w HTML i CSS przez Ralf29 Nowicjusz (120 p.)
edycja 26 września 2017 przez Ralf29


Witajcie.

Od dłuższego czasu zmagam się z problemem. Otóż chciałbym umieścić na stronie menu oraz zegarek (taki jak kursie JS'a) na tym samym pasku. Chodzi o to, że występują problemy i pasek menu wariuje. Chciałbym, aby zachowywał się jak element classy "option". Niestety wtedy nie działa efekt hover w CSS, kolory na siebie nachodzą itp.

Niestety długo próbowałem to rozwiązać, ale cały czas nie działa. Wysyłam wieć ostatnią ostanią wersję mojego wciąż niedziałającego kodu.

Byłbym wdzięczny za podpowiedzi.

Rafał

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="Biuro rachunkowe, Ciechanów, księgowa, firma, księgowość">
    <meta name="descrption" name="Biuro rachunkowe nawiąże współpracę z przedsiębiorcami.">
     <title>Biuro rachunkowe </title>
    
    <link rel="stylesheet" href="Biuro.css" type="text/css" />
    
    <script type="text/javascript">
        
        function odliczanie()
        
        {
        var dzisiaj= new Date();
        var dzien= dzisiaj.getDate();
        var miesiac= dzisiaj.getMonth()+1;
        var rok= dzisiaj.getFullYear();
        
        var godzina= dzisiaj.getHours();
            if (godzina<10) godzina="0"+godzina;
        var minuta= dzisiaj.getMinutes();
            if (minuta<10) minuta="0"+minuta;
        var sekunda= dzisiaj.getSeconds();
            if (sekunda<10) sekunda="0"+ sekunda;
        
        document.getElementById("zegar").innerHTML=
        dzien+"/"+miesiac+"/"+rok+" | "+godzina+":"+minuta+":"+sekunda;
        
        setTimeout("odliczanie()",1000);
         }
        
    </script>
   
    
</head>

<body onload="odliczanie();">
    
    <h2>Biuro rachunkowe </h2>
    
   <div id="container">
       
       <div id="menu">
           
			<div class="option">Strona główna</div>
			<div class="option">O nas</div>
			<div class="option">Cennik</div>
			<div class="option">Kontakt</div>
			<div class="option">Lokalizacja</div>
			
		</div>
       <div id="zegar"></div>
       <div= style="clear:both"> </div> <br>
       
        
       <div id="o nas">Witamy Państwa na naszej stronie internetowej. Zachęcamy do zapoznania się z naszą ofertą.<br>
        W przypadku pytań prosimy o kontakt bezpośredni lub wiadomość mail.
        </div>
       
       <div id="cennik">
       
       </div>
       
       <div id="kontakt">
       
       </div>
       
       <div id="lokalizacja">
       
       </div>
    
        <div id="footer">
        Biuro rachunkowe  &copy 2017; Wszelkie prawa zastrzeżone.
        </div>
       
    </div>
    
</body>
</html>


body
{
   background-color: bisque;
}

#container
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#h2
{
    
}

#menu
{
    width: 1000px;
    
}

.option
{
    float:left;
    color: whitesmoke;
    background-color: dimgrey;
    text-align: justify;
}

#menu:hover
{
    cursor: pointer;
    color: darkgray;
    
}

#zegar
{
    float:left;
    color: whitesmoke;
    background-color: dimgrey;
    
   

}