Conflitto fra due menu nella stessa pagina

[tanasuke]

Ciao a tutti...ho un problema relativo a due menu .NAV(uno orizzontale e uno verticale) fatti in css3 che vorrei inserire nella stessa pagina.Singolarmente funzionano alla grande,appena inserisco il secondo menu nella prima pagina contenente il menu orizzontale,il secondo menu sembra che prenda le caratteristiche del primo menu orizzontale (infatti si dispone in orizzontale e non in verticale come dovrebbe). Ho notato che se cancello i file .nav nelle proprietà css del primo menu ,il secondo torna a funziona egregiamente.
Volevo chiedervi: c'è un modo per inserire due menu .nav nella stessa pagina per evitare conflitti?C'è una sintassi da aggiungere al secondo menu .nav x far si che non vada in conflitto col primo?Grazie per l'eventuale risposta.
P.s.

Se dovesse servire vi posto il file html e css .
Ciao e grazie per l'attenzione

[Vincent.Zeno]

Ho notato che se cancello i file .nav nelle proprietà css del primo menu ,il secondo torna a funziona egregiamente.

che sono i file .nav?
non è che intendi la classe nav?

nel caso dovrebbe bastare cambiare la classe del secondo menu. ovviamente devi fare attenzione alla coerenza di quel che segue.

[tanasuke]

che sono i file .nav?
non è che intendi la classe nav?

nel caso dovrebbe bastare cambiare la classe del secondo menu. ovviamente devi fare attenzione alla coerenza di quel che segue.

Ciao e grazie per la risposta....si scusa,ovviamente intendevo la CLASSE NAV.(ho scritto .nav perchè nel css la classe è visualizzata col .nav)
Per cambiare la classe nav del secondo menu cosa intendi...cioè,non classe .nav ma una classe tipo,che ne sò .MENU_VERTICALE?

[Vincent.Zeno]

esatto.
quindi qualcosa dovrai reimpostarlo, e verificare le varie funzionalità

[tanasuke]

esatto.
quindi qualcosa dovrai reimpostarlo, e verificare le varie funzionalità

il problema è che sembra che siano già nominati diversamente nel senso che il menu 1 uno è NAV come puoi vedere dal css qui

@charset "utf-8";
@import url("menu verticale.css");
.menu_orizzontale {
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-color: rgba(32,185,255,1.00);
}


/* NAVIGATION */
nav {
    width: 1450px;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    height: 50px;
}
nav ul {
  list-style: none;
  text-align: center;
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    display: block;
    padding-top: 8px;
    padding-right: 14px;
    padding-bottom: 14px;
    color: #FFFFFF;
    font-weight: 300;
    text-transform: uppercase;
    margin-right: 2px;
    margin-left: 2px;
    margin-bottom: 2px;
    text-decoration: none;
    font-size: 17px;
    font-family: 'Quicksand', sans-serif;
    padding-left: 14px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
    color: #FFFFFF;
}


/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background-color: #C24BFF;
    height: 1px;
}
nav.stroke ul li a:hover:after {
  width: 100%;
}



/* Keyframes */
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #333;
  }
}

/* Keyframes */
@-webkit-keyframes circle {
  0% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: #eee;
    border-radius: 100%;
  }
  100% {
    background: #aaa;
    height: 5000%;
    width: 5000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 0;
  }
}




#barra_menu {
    width: 1450px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
}

#menu {
    width: 1450px;
    height: 74px;
    padding-top: 6px;
    margin-left: auto;
    margin-right: auto;
}


/*fine CSS Menu orizzontale principale*/ 

mentre il menu verticale è MAIN NAV

Css 3 menu verticale


*, :before, :after {
  box-sizing: border-box;
}

.unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}
.unstyled a {
  text-decoration: none;
}

.list-inline {
  overflow: hidden;
}
.list-inline li {
  float: left;
}

.header {
    left: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    background: #212121;
    height: 740px;
}

.main-nav ul {
  border-top: solid 1px #3C3735;
}
.main-nav li {
  border-bottom: solid 1px #3C3735;
}
.main-nav a {
    padding-top: 15px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 15px;
    color: #DFDBD9;
    text-align: center;
    text-transform: capitalize;
    font-family: 'Bellefair', serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}
.main-nav a:hover {
  color: #fff;
}

.list-hover-slide li {
  position: relative;
  overflow: hidden;
}
.list-hover-slide a {
  display: block;
  position: relative;
  z-index: 1;
  transition: .35s ease color;
}
.list-hover-slide a:before {
  content: '';
  display: block;
  z-index: -1;
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  border-right: solid 7px #0e6ac0;
  background: #303030;
  transition: .35s ease left;
}
.list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
  left: 0;
}

quindi non capisco il conflitto dove sia perchè teoricamente sono già nominati diversamente...cancellando però i primi 3 nav ( NAV,NAV UL, NAV UL LI ) del menu orizzontale,il menu verticale torna a disposri correttamente in verticale.Non riesco a capire l'inghippo dove sia.