@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: background:url(https://teglana.ru/web/galery/station.png) top repeat-x;
  font-family: "Montserrat", sans-serif;
}

.navMenu {
  position: absolute;
  top: 15%;
  left: 50%;
  
  width:auto;
 /* -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);*/
  
}

.navMenu a {
  color: #f6f4e6;
  text-decoration: none;
  font-size: 0.9em;
  text-transform:none;
  font-weight: 500;
  display: inline-block;
  width: 150px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color:#202020; font-family:Verdana;  line-height: 1.2;
  background: background:url(https://teglana.ru/web/galery/station.png) top repeat-x;
}

.navMenu a:hover {
  color: #fddb3a;
  
}

.navMenu .dot {
  width: 3px;
  height: 3px;
  background-image:url(https://www.lugadomik.ru/web/galery/menu.jpg);
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.navMenu a:nth-child(1):hover ~ .dot {
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

.navMenu a:nth-child(2):hover ~ .dot {
  -webkit-transform: translateX(110px);
  transform: translateX(200px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

.navMenu a:nth-child(3):hover ~ .dot {
  -webkit-transform: translateX(200px);
  transform: translateX(350px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

.navMenu a:nth-child(4):hover ~ .dot {
  -webkit-transform: translateX(285px);
  transform: translateX(480px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}
.navMenu a:nth-child(5):hover ~ .dot {
  -webkit-transform: translateX(285px);
  transform: translateX(620px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}
HTML CSS JSResult Skip Results Iframe
EDIT ON
body {
  font: 14px/18px 'Montserrat', sans-serif;
}

a {
  text-decoration: none;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*common*/

.pad-15 {
  padding: 15px;
}

.clear {
  clear: both; 
}
.clear:after, .clear:before{ 
    content: " ";
   display: table;
}
.header {
  min-height: 55px;
  background: #273135;
  border-bottom: 1px solid #273135;
}

a.toggle-nav {
    top: 12px;
    right: 15px;
    position: absolute;
    color: #fff;
    line-height: 25px;
    font-size: 22px;
    background: #DE5939;
    padding: 3px 5px;
    border-radius: 1px;
    transform: rotate(90deg);
}

.header > .left-head {
  width: 250px;
  display: block;
  background:#20282B;
  position:relative;
}
.header > .left-head .logo img{
  max-width:150px;
  width:100%;
}
.header > .left-head .logo{
  padding:10px 0px 10px 15px;
 }
.nice-nav {
  width: 250px;
  background: #DE5939;
  height: 100%;
  transition:all 0.4s ease-in-out 0s;
  float:left;
}
.nice-nav.open {
    margin-left: -250px;
    display: block;
}
.nice-nav > .user-info {
    padding: 10px 15px;
    color: #fff;
    border-bottom: 1px solid #ddd;
    min-height: 41px;
}
 .nice-nav .user-info .user-name,
.nice-nav .user-info img{float:left;}


.nice-nav> .user-info > .user-name {
  padding: 0px 10px;
}

.user-info > .user-name h5 {
  text-transform: uppercase;
  font-size: 16px;
}

.user-info > .user-name span {
  font-size: 80%;
  color: #555;
  font-style: italic;
}


.nice-nav li.child-menu span.toggle-right {
  text-align: right;
  float: right;
  display: inline-block;
  position: absolute;
  right: 0;
  padding: 15px;
  top: 0;
  background: #DE5939;
  bottom: 0;
}

.nice-nav ul li a {
  padding: 2px;
  background: #FA7252;
  border-bottom: 1px solid #ddd;
  display: block;
  color: #fff;
  position: relative;
}

.nice-nav ul li.child-menu ul {
  background: #aaa;
  display: none;
}

.nice-nav ul li.child-menu ul li a {
  background: #273135;
  padding: 10px 20px;
}
/*note*/
/*Logo Form Freepic*/
 
Resources