Hi, I'm trying to add a menu on the left and right but I've only been able to add it to the left (mine) but I want to add another identical menu but right wing does anyone have any idea that I have wrong with my code?
<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
<head>
<!-- Site Title-->
<title>Fresh Farms</title>
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!-- Stylesheets-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Berkshire+Swash%7COpen+Sans:300,500,400,400italic,700,600,600italic%7CRaleway%7CLato:400,700%7CRoboto:400">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--[if lt IE 10]>
<div style="background: #212121; padding: 10px 0; box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3); clear: both; text-align:center; position: relative; z-index:1;"><a href="https://windows.microsoft.com/en-US/internet-explorer/"><img src="images/ie8-panel/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
<!-- <script src="/cdn-cgi/apps/head/3ts2ksMwXvKRuG480KNifJ2_JNM.js"></script> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
*{
margin:0;
padding:0;
font-family: 'Roboto', sans-serif;
}
nav {
background-color:transparent;
background-position:center;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin:10px;
display: block;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
nav > ul > li > a > .caret {
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
display: inline-block;
height: 0;
width: 0;
vertical-align: middle;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 56px;
padding: 0 24px;
text-decoration: none;
}
nav > ul > li:hover {
background-color:transparent;
}
nav > ul > li:hover > a {
color: green;
}
nav > ul > li:hover > a > .caret {
background-color:white;
}
nav > ul > li > div {
background-color:white;
border-top: 0;
border-radius: 0 0 4px 4px;
display: none;
margin: 0;
opacity: 0;
position: absolute;
width: 165px;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
nav > ul > li:hover > div {
display: block;
opacity: 1;
visibility: visible;
}
nav > ul > li > div ul > li {
display: block;
}
nav > ul > li > div ul > li > a {
color: #fff;
display: block;
padding: 12px 24px;
text-decoration: none;
}
nav > ul > li > div ul > li:hover > a {
background-color:white;
}
/*
nav {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
nav a {
font-size: 14px;
outline: none;
}*/
/*
video{
min-width:100%;
min-height:100%;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
z-index: 1;
}*/
/*Nuevo codigo*/
video + h1 {
z-index:100;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
font-size:100px;
}
/*Nuevo codigo*/
.titulo{
margin-left:100px;
}
.derecha{
margin-right:100px;
}
.logo_principal{
width:140px;
height:130PX;
left:600px;
}
</style>
</head>
<body>
<!-- Page-->
<div class="page text-center text-md-left">
<video id="video" autoplay loop>
<source src="video/1_1.mp4" type=video/mp4 >
</video>
<h1 style="color:white;">Titulo en el video</h1>
<header>
<!--
<nav>
<br> <br><br><br>
<li class="titulo" style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:white; background:#92E32F; padding:9px; border-radius:10%;" href="#">HOME</a></li>
<li class="titulo" style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:white;" href="#">PRODUCTS</a>
</li>
<li class="titulo" style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:white;" href="#">ABOUT US</a></li>
<li class="derecha" style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a style="color:white;" href="#">RESPONSIBLE FARMING</a></li>
<li class="derecha" style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a style="color:white;" href="#">GET IN TOUCH</a></li>
<li class="derecha" style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a style="color:white;" href="#"></a></li>
<center>
<img class="logo_principal" style="position: absolute;bottom:-30px;" src="images/FreshFarms.png" width="150" alt="Logo Fresh Farms">
</center>
<br>
</nav>-->
<nav>
<ul>
<li><a style="color:black;" href="#">Home</a></li>
<li>
<a style="color:black;" href="#">Products <span class="caret"></span></a>
<div>
<ul>
<li><a style="color:black;" href="#">Chair</a></li>
<li><a style="color:black;" href="#">Table</a></li>
<li><a style="color:black;" href="#">Cooker</a></li>
</ul>
</div>
</li>
<li><a style="color:black;" href="#">About</a></li>
<li><a style="color:black;" href="#">Help</a></li>
</ul>
<center><br>
<img class="logo_principal" style="position: absolute;bottom:-30px;" src="images/FreshFarms.png" width="150" alt="Logo Fresh Farms">
</center>
</nav>
</header>