A Pen by Krzysztof

Thumbnail
This awesome code was written by krte85, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright krte85 ©
  • HTML
  • CSS
  • JavaScript
    <div class="main_menu">
                <ol>
                    <li><a href="#">OGÓLNIE O JAPONII</a>
                        <ul>
                            <li><a href="#">HISTORIA</a>
                                <ul>
                                    <li><a href="#"></a>link1</li>
                                    <li><a href="#"></a>link2</li>
                                    <li><a href="#"></a>link3</li>
                                    <li><a href="#"></a>link4</li>
                                </ul>
                            </li>
                            <li><a href="#">POŁOŻENIE</a></li>
                            <li><a href="#">POLITYKA</a></li>
                            <li><a href="#">GOSPODARKA</a></li>
                        </ul>
                    </li>
                    <li><a href="#">MIASTA</a>
                        <ul>
                            <li><a href="#">TOKIO</a></li>
                            <li><a href="#">JOKOHAMA</a></li>
                            <li><a href="#">OSAKA</a></li>
                            <li><a href="#">NAGOJA</a></li>
                            <li><a href="#">SAPPRO</a></li>
                        </ul>
                    </li>
                    <li style="font-weight: 900;"><a href="#">STRONA GŁÓWNA</a></li>                    
                    <li><a href="#">KULTURA I RELIGIA</a>
                        <ul>
                            <li><a href="#">OBYCZAJE</a></li>
                            <li><a href="#">RELIGIA</a></li>
                            <li><a href="#">JĘZYK</a></li>
                            <li><a href="#">ANIME I HENTAI</a>
                                <ul>
                                    <li><a href="#"></a>link1</li>
                                    <li><a href="#"></a>link2</li>
                                    <li><a href="#"></a>link3</li>
                                    <li><a href="#"></a>link4</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">WIĘCEJ</a>
                        <ul>
                            <li><a href="#">CIEKAWOSTKI</a></li>
                            <li><a href="#">SZTUKI WALKI</a>
                                <ul>
                                    <li><a href="#"></a>link1</li>
                                    <li><a href="#"></a>link2</li>
                                    <li><a href="#"></a>link3</li>
                                    <li><a href="#"></a>link4</li>
                                </ul>
                            </li>
                            <li><a href="#">KUCHNIA</a></li>
                            <li><a href="#">ŚWIĘTA I FESTIWALE</a>
                                <ul>
                                    <li><a href="#"></a>link1</li>
                                    <li><a href="#"></a>link2</li>
                                    <li><a href="#"></a>link3</li>
                                    <li><a href="#"></a>link4</li>
                                </ul>
                            </li>
                            <li><a href="#">...W INTERNECIE</a></li>
                        </ul>
                    </li>
                </ol>
            </div>

/*Downloaded from https://www.codeseek.co/krte85/a-pen-by-krzysztof-GNoKoE */
    ol
{
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size: 20px;
    height: 45px;
    line-height: 250%;
    display: inline-block;
}
 
ol a
{
    color: #AC1B00;
    text-decoration: none;
    display: block;
}
 
ol > li
{
    float: left;
    width: 199px;
    height: 50px;
    border-right: 1px dashed #FF0D00;
}
 
ol > li:first-child
{
    width: 198px;
    border-left: 1px dashed #FF0D00;
}
 
ol > li:hover
{
    background-color: #AC1B00;
}
 
ol > li:hover > a
{
    color: #FFB815;
}
 
ol > li > ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 45px;
    display: none;
}
 
ol > li:hover > ul
{
    display: block;
}
 
ol > li > ul > li
{
    background-color: #D02E10;
    border-bottom: 1px dashed #FF0D00;
    position: relative;
    z-index: 100;
}
 
ol > li > ul > li > a
{
    color: #FFB815;
}
 
ol > li > ul > li:hover
{
    background-color: #891500;
}
 
ol > li > ul > li:hover > a
{
    color: #E9563B;
}


/*Downloaded from https://www.codeseek.co/krte85/a-pen-by-krzysztof-GNoKoE */
    

Comments