Pojawiający się bez powodu "element" w rozwijanym menu

Na wstępie chciałbym zaznaczyć, że nawet nie wiem dokładnie jak sformułować pytanie. Z tego względu przepraszam jeśli nazwa tematu kogoś zmyliła. Jestem osobą uczącą się CSS/HTML i od jakiegoś czasu kopiuję sobie "od zera" różne strony internetowe, żeby nabyć nieco umiejętności. W tej chwili próbuję skopiować stronę "Kwasowa grota". Niestety już na wstępie natrafiłem na bardzo upierdliwy problem, z którym już od dobrych paru godzin nie potrafię sobie poradzić i nie mam bladego pojęcia z czego on wynika. Na początek przedstawię swój kod:

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" type="text/css" rel="stylesheet">
    <link rel="icon" href="http://www.acidcave.net/favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
    <title>Kwasowa Grota</title>
</head>

<body>
    <div id="container">
        <!--Górne menu-->
        <div id="bar_container">
            <nav id="menu_gorne">
                <a class="menu_gorne pasek Kwasowa" href="#"><img src="eye_22.png">Kwasowa Grota<span>▼</span>
                    <nav id="Kwasowa_rozwiniety">
                            <a class="rozwiniety_pasek" href="#">Strona główna, Niusy</a>
                            <a class="rozwiniety_pasek padding" href="#">Smocze forum</a>
                            <a class="rozwiniety_pasek" href="#">Heroes VII</a>
                            <a class="rozwiniety_pasek" href="#">Heroes VI</a>
                            <a class="rozwiniety_pasek" href="#">Heroes V</a>
                            <a class="rozwiniety_pasek" href="#">Heroes IV</a>
                            <a class="rozwiniety_pasek" href="#">Heroes III</a>
                            <a class="rozwiniety_pasek" href="#">Heroes II</a>
                            <a class="rozwiniety_pasek padding" href="#">Heroes I</a>
                            <a class="rozwiniety_pasek" href="#">Might &amp; Magic X</a>
                            <a class="rozwiniety_pasek" href="#">Might &amp; Magic IX</a>
                            <a class="rozwiniety_pasek" href="#">Might &amp; Magic VI-VIII</a>
                            <a class="rozwiniety_pasek" href="#">Might &amp; Magic II</a>
                            <a class="rozwiniety_pasek padding" href="#">Might &amp; Magic I</a>
                            <a class="rozwiniety_pasek" href="#">Dark Messiah</a>
                            <a class="rozwiniety_pasek" href="#">Duel of Champions</a>
                            <a class="rozwiniety_pasek" href="#">Heroes Kingdoms</a>
                            <a class="rozwiniety_pasek" href="#">Clash of Heroes</a>
                            <a class="rozwiniety_pasek" href="#">Legends</a>
                            <a class="rozwiniety_pasek" href="#">Warriors</a>
                            <a class="rozwiniety_pasek" href="#">Crusaders</a>
                            <a class="rozwiniety_pasek" href="#">Arcomage</a>
                            <a class="rozwiniety_pasek" href="#">Heroes Chronicles</a>
                            <a class="rozwiniety_pasek padding" href="#">King's Bounty</a>
                            <a class="rozwiniety_pasek" href="#">Horn of the Abyss</a>
                            <a class="rozwiniety_pasek" href="#">In The Wake of Gods</a>
                            <a class="rozwiniety_pasek" href="#">VCMI</a>
                            <a class="rozwiniety_pasek padding" href="#">Equilibris</a>
                            <a class="rozwiniety_pasek" href="#">Historia światów MM</a>
                            <a class="rozwiniety_pasek padding" href="#">Czytelnia</a>
                            <a class="rozwiniety_pasek" href="#">Ciekawostki</a>
                            <a class="rozwiniety_pasek" href="#">Raiders</a>
                            <a class="rozwiniety_pasek" href="#">Wielki Leksykon Smoków</a>
                            <a class="rozwiniety_pasek padding" href="#">Forge</a>
                            <a class="rozwiniety_pasek" href="#">Skarbiec</a>
                            <a class="rozwiniety_pasek" href="#">Mapy</a>
                            <a class="rozwiniety_pasek" href="#">Kanał na YouTube</a>
                            <a class="rozwiniety_pasek" href="#">Portale</a>
                            <a class="rozwiniety_pasek padding" href="#">Redakcja, Kontakt</a>
                    </nav>
                </a>
                <a class="menu_gorne pasek" href="#">Heroes VII</a>
                <a class="menu_gorne pasek" href="#">Might &amp; Magic X</a>
                <a class="menu_gorne pasek" href="#">Dark Messiah</a>
                <a class="menu_gorne pasek" href="#">Horn of the Abyss</a>
                <a class="menu_gorne pasek" href="#">Historia Światów MM</a>
                <a class="menu_gorne pasek Skarbiec" href="#">Skarbiec
                    <div id="Skarbiec_rozwiniety">
                            <a class="rozwiniety_pasek" href="#">Gry</a>
                            <a class="rozwiniety_pasek" href="#">WoG, HotA, VCMI</a>
                            <a class="rozwiniety_pasek" href="#">Programy, Patche</a>
                            <a class="rozwiniety_pasek" href="#">Modyfikacje do gier</a>
                            <a class="rozwiniety_pasek" href="#">Poradniki, Dokumenty</a>
                            <a class="rozwiniety_pasek padding" href="#">Inne Skarby</a>
                    </div>
                </a>
                <a class="menu_gorne pasek Czat" href="#"><img src="cemet.png">Czat
                    <ul><p class="padding">Po cmentarzu włóczą się:</p>
                        <li>Andruids</li>
                        <li>Belegor</li>
                        <li>Hobbit</li>
                        <li>Irhak</li>
                        <li>Kastore</li>
                        <li class="padding">Lord Xeen</li>
                    </ul>
                </a>
            </nav>

            <form action="#" method="post">
                <div id="pasek_wyszukiwania">
                    <input class="input_text" type="text" name="Wyszukaj...">
                    <input class="submit_button" type="submit" value="zapisuje się">
                </div>
            </form>
        </div>

    </div>


</body>

</html>

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
}

body {
    background-image: url(backmain8.jpg);
    background-position: center;
    background-attachment: fixed;
}

a {
    text-decoration: none;
}


/*GÓRNE MENU*/

#bar_container {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    width: 100%;
    height: 30px;
    z-index: 10000;
    text-align: center;
}

@media (max-width: 800px) {
    #bar_container {
        height: 60px;
    }
}

#menu_gorne {
    float: left;
    position: relative;
    margin-left: 100px;
}

.menu_gorne.pasek {
    position: relative;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    color: #BACB44;
    padding: 8px 8px 0px;
    bottom: 2px;
    float: left;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 24px;  
}

.menu_gorne.pasek.Kwasowa img,
.Czat img {
    position: relative;
    top: -1px;
    padding-right: 3px;
    float: left;
}

.menu_gorne.pasek.pierwszy span {
    padding-left: 4px;
}

.menu_gorne.pasek:hover {
    background-color: #1F1F1F;
    color: #CFF280;
}


/*Rozwijane Menu Górne KWASOWA GROTA, SKARBIEC i CZAT*/



#Kwasowa_rozwiniety {
    position: absolute;
    width: 170px;
    background-color: white;
    top: 33px;
    left: 0px;
    display: non;
}

#Skarbiec_rozwiniety {
    width: 170px;
    background-color: white;
    top: 33px;
    left: 300px;
    display: noe;
    position: absolute;
}

.menu_gorne.pasek:hover #Kwasowa_rozwiniety, .menu_gorne.pasek:hover #Skarbiec_rozwiniety {
    display: block;
}

.menu_gorne.pasek.Czat ul {
    list-style-type: none;
}

.rozwiniety_pasek {
    color: #BACB44;
    display: block;
    text-align: left;
    padding: 1px 5px 0 12px;
}

.padding {
    padding-bottom: 8px;
}

.rozwiniety_pasek:hover {
    background-color: #1F1F1F;
    color: #CFF280;
}

.Czat ul {
    position: absolute;
    width: 170px;
    background-color: red;
    top: 33px;
    left: 0px;
    display: noe;
    color: white;
    text-align: left;
    padding: 1px 5px 0 20px;
}

.menu_gorne.pasek.Czat ul p {
    margin-left: -10px;
}


/*Koniec Rozwijane Menu Górne KWASOWA GROTA*/

#pasek_wyszukiwania {
    position: relative;
    top: 4px;
    float: left;
    margin-left: 25px;
}

@media (max-width: 1100px) {
    #pasek_wyszukiwania {
        display: none;
    }
}

.input_text {
    width: 138px;
    height: 22px;
    border: 0.5px solid #4D723C;
}

.submit_button {
    width: 57px;
    height: 22px;
    background-color: #4D723C;
    border-radius: 5%;
    border: 0.5px solid #444444;
}


/**/

Problem występuje w polu "Kwasowa Grota" i "Skarbiec" na pasku menu górnego. Z nieznanego powodu pojawił się po lewej stronie menu dodatkowy "element", padding, margin, czy diabli wiedzą co to, który wszystko psuje. Przede wszystkim rozwijane menu pozycjonuje się względem tego elementu, no i dodatkowo pojawiło się siłą rzeczy niewielkie wcięcie. Problem nie występuje w polu "Czat". Co ciekawe gdy zmieniam tag nav "Kwasowa_rozwiniety" na div, lub tag div "Skarbiec_rozwiniety" na nav (i na odwrót), to element znika i wszystko jest w porządku. Przynajmniej do czasu zapisania kodu i odświeżenia strony - wtedy problem wraca. Tak więc nie wiem czy jest to jakaś zależność html albo css, której nie rozumiem, czy mi po prostu program w jakiś sposób formatuje kod, bądź zwyczajnie bug'uje (korzystam z Bracketsa). Ciężko jest to opisać więc załączam screeny.

W ostatnim przypadku zmieniłem div na nav w "Skarbiec" i nav na div w "Kwasowa Grota" (używam na przemian div i nav, bo się uczę i sprawdzam różnice między tagami, dodatkowo w tej sytuacji próbowałem różnych możliwości, żeby naprawić błąd) i wszystko wyświetla się prawidłowo, lecz tylko do czasu odświeżenia strony. Dodam jeszcze, że ten dziwny "element" da się normalnie edytować, ale nie potrafię go usunąć. Bardzo proszę o pomoc.

Jeśli ktoś ma jeszcze jakieś wskazówki odnośnie kodu, to też chętnie przyjmę wszelkie porady.

Screeny są kiepskiej jakość. Na pierwszym screenie "element" ma nazwę a.menu_gorne.pasek.Kwasowa a drugi a.menu_gorne.pasek.Skarbiec (mają wielkość 15.99 na 31.99).

Wysłałbym bardziej szczegółowe obrazki, niestety nie wiem jak na tym forum to zrobić. Podczas wysyłania wiadomości jak klikam "obrazek" i wgrywam screena z dysku to zostaje on bardzo pomniejszony i jego jakość robi się fatalna. No a teraz sobie zablokowałem w ogóle możliwość wgrywania screenów, bo wysłałem ich za dużo.

Generalnie na poprzednich screenach widać słabo te niechciane "elementy" zaznaczone na zielony (na białych rozwijanych paskach menu). Teoretycznie są to te same elementy co - a class="menu_gorne pasek Kwasowa" i a class="menu_gorne pasek Skarbiec".

Sprawdzałem już te elementy przy użyciu narzędzi deweloperskich, lecz niestety nie znalazłem niczego niezwykłego. Jak zmienię paddingi i marginesy w menu_gorne pasek Kwasowa i menu_gorne pasek Skarbiec na 0px, to element zmniejsza się, ale pozostaje i tak mały pasek na ok. 1 px szerokości. Z początku myślałem, że to entery w kodzie html mogły nieco namieszać, więc również je pousuwałem i wszystkie tagi w menu_gorne pasek Kwasowa ustawiłem jeden obok drugiego - niestety to również nie pomogło.

Jeśli chodzi o display, to zrobiłem to celowo, żeby w szybki sposób włączać i wyłączać rozwijane menu.