JSFiddle - React, Tailwind, and code Playground

by ProGirl

HTML

<div id="navigation">
           <ul id="menu">
              <li><a href="index.html" id="homeLink">О нас</a></li>
              <li><a href="" id="histotyLink">История</a></li>
              <li><a href="" id="documentsLink">Документы</a></li>
              <li><a href="" id="expeditionLink">Экспедиция</a></li>
              <li><a href="" id="galleryLink">Галерея</a></li>
              <li><a href="" id="contactLink">Контактная информация</a></li>
            </ul>
        </div>

CSS

#navigation {
    height: 43px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 0px;
    width:  1000px;
    z-index: 10 !important;
}

#navigation ul {
    list-style: none outside none;
    padding-left: 0;
    margin-left: 0;
    overflow: hidden;
    zoom: 1;
    
    }
#navigation li{
    float: left;
       
}

#navigation ul li a {
    text-decoration : none;
    display: block;
    text-align      : center;
    background      : #336699;
    padding            : 5px 0px;
    color            : #fff;
    border-top      : 5px solid #3D92BC;
    border-right    : 2px solid #3D92BC;
    font-family     : Arial, sans-serif;
    font-size       : 1.4em;
    
}
#navigation #homeLink, #histotyLink, #documentsLink, #expeditionLink, #galleryLink, #contactLink {
     
    width: 150px;
    
}

#navigation #contactLink {
    width: 238px;
    
    }



#navigation a:hover {
    background      : #fff;
    color            : #369;
    border: 1px solid #369;
    border-right: none;
}