CSS editing two nav bars (Adelle theme) - php

Question

I added second nav menu (nav2), however it adopts the look of first (nav1) menu and I cannot fix it. On the other hand its content is different.
piece of header.php:
<nav class="nav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'extra_menu&container_class=menu&fallback_cb=false&show_home=1' ) ); ?>
</nav><!-- .nav -->
<nav2 class="nav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'top_menu', 'menu' => 'nav2')); ?>
<form role="search" method="get" class="header-form" action="<?php echo esc_url( home_url() ); ?>">
<fieldset>
<input type="text" name="s" class="header-text uniform" size="15" title="<?php esc_attr_e( 'Search','adelle-theme' ); ?>" />
<input type="submit" class="uniform" value="<?php esc_attr_e( 'Search','adelle-theme' ); ?>" />
</fieldset>
</form>
</nav2><!-- .nav2 -->
css:
/* .nav */
.mobile-nav {display: none;}
.tinynav {display: none;}
.nav {position: relative; top: 0px; width: 970px; display: inline-block; background: #000; padding: 0 25px; margin-top: 0px; clear: both; line-height: 1em; text-transform: uppercase;}
.nav:before,
.nav:after {border: 1.6em solid #000; content: ""; display: block; position: absolute; bottom: 0; top: 0; z-index: 1;}
.nav:before {border-left-color: #fff; border-right-width: 1.4em; left: 0;}
.nav:after {border-left-width: 1.4em; border-right-color:#fff; right: 0;}
.nav ul {list-style: none; max-width: 780px; display: inline-block;}
.nav a {display: block; padding: 14px; color: #fff;}
.nav a:hover {text-decoration: underline; color: #fff;}
.nav ul ul a {display: block; padding: 14px; position: relative;}
/* .nav2 */
.mobile-nav {display: none;}
.tinynav {display: none;}
.nav2 {position: fixed; top: 10px; width: 2000px; display: inline-block; background: #fff; padding: 0 25px; margin-top: 40px; clear: both; line-height: 1em; text-transform: uppercase;}
.nav2:before,
.nav2:after {border: 1.6em solid #000; content: ""; display: block; position: absolute; bottom: 0; top: 0; z-index: 1;}
.nav2:before {border-left-color: #fff; border-right-width: 1.4em; left: 0;}
.nav2:after {border-left-width: 1.4em; border-right-color:#fff; right: 0;}
.nav2 ul {list-style: none; max-width: 780px; display: inline-block;}
.nav2 a {display: block; padding: 14px; color: #fff;}
.nav2 a:hover {text-decoration: underline; color: #fff;}
.nav2 ul ul a {display: block; padding: 14px; position: relative;}

Answer 1

If you want 2 navs, one looking different that the other, I'd suggest you use the nav tag for both, but add a unique ID for the second nav and use that ID in your css to overwrite the styles you need to change for the second nav:
<nav>stuff here</nav>
<nav id="secondary-nav">stuff here</nav>
You don't necessarily need the class on the main nav. You can style as such:
nav {
position: relative;
top: 0px;
width: 970px;
}
nav#secondary-nav {
top: 10px;
width: 2000px;
}