Разбейте мое меню на правое левое и добавьте динамическое c подменю, используя только CSS и HTML

Question

Я новичок в html и пытаюсь выполнить следующее: Я хочу иметь заголовок с: left Menu :: Lo go :: Right menu

Мне удалось добавить меню, но не могу добавить подменю Вот мой код:

CSS код:

'' '

    .main-menu {
  position: absolute;
  bottom: 0px;
}
.main-menu.left {
  left: 0px;
}
.main-menu.right {
  right: 0px;
}
.main-menu > div > ul > li {
  position: relative;
}
.main-menu.left > div > ul > li {
  float: left;
  padding: 0px 10px 23px 0px;
}
.main-menu.right > div > ul > li {
  float: right;
  padding: 0px 0px 23px 10px;
}
.main-menu > div > ul > li > a {
  color: #9d7653;
  font-size: 18px;
  background: url(../images/bullet-one.png) no-repeat right center;
}
.main-menu.left > div > ul > li > a {
  padding-right: 15px;
  background-position: right center;
}
.main-menu.right > div > ul > li > a {
  padding-left: 15px;
  background-position: left center;
}
.main-menu > div > ul > li:last-child > a {
  background: none;
}
.main-menu > div > ul > li > a:hover, .main-menu > div > ul > li > a:active, .main-menu > div > ul > li > a:focus {
  color: #d2ae7e;
}

.main-menu .sub-menu {
  background: #000;
  display: none;
  width: 200px;
  position: absolute;
  top: 45px;
  left: 0px;
  z-index: 1200;
  border: 1px solid #e3c893;
  border-top: none;
  box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.2);
} 
.main-menu .sub-menu .menu-item {
  cursor: pointer;
  float: none;
  padding: 10px 15px 10px 15px;
  position: relative;
  border-bottom: 1px solid #222;
  transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
}
.main-menu .sub-menu .menu-item:last-child {
  border-bottom: none;
}
.main-menu .sub-menu .menu-item:hover {
  background-color: #fce0a9;
  transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
}
.main-menu .sub-menu .menu-item:hover > a {
  color: #9d7653;
}
.main-menu .sub-menu .menu-item > a {
  padding: 0px;
  background: none;
  font-size: 14px;
}
.main-menu .sub-menu .menu-item:focus > a {
  color: #9d7653;
}
.main-menu .sub-menu .menu-item .sub-menu {
  top: 0px;
  left: 200px;
}
.main-menu .responsive-nav {
  display: none;
  margin: 10px auto 0px;
  padding: 5px;
  border: 1px solid #CCC;
}

.main-menu li a:first-child:nth-last-child(2):before { 
  content: ""; 
  position: absolute; 
  height: 0; 
  width: 0; 
  border: 5px solid transparent; 
  top: 50% ; 
  right:5px;  
 }

' ''

HTML is:

    <!-- Start Header -->
    <div id="header-wrapper">

        <header id="header">

            <h6>
                <a href="#index.html">English | </a>
                <a href="#commingsoon">Français | </a>
            </h6>

            <!--Left Menu -->

            <main-menu class="main-menu left clearfix">
                <div class="menu-left-main-menu-container">
                    <ul id="menu-left-main-menu" class="clearfix">
                        <li class="menu-item"><a href="index.html">Home</a></li>                               
                        <li class="menu-item"><a href="menu.html">Menu</a></li>
                        <li class="menu-item"><a href="about.html">About</a></li>
                    </ul>
                </div>
            </main-menu>

            <!-- Header Logo -->
            <div id="logo">
                <!-- Website Logo -->
            <a href="index.html"  title="Page title">
                    <img src="img/logo.icon.jpg" alt="Name page">
            </a>
            </div>

            <!-- Right Menu -->
            <main-menu class="main-menu right clearfix">
                <div class="menu-right-main-menu-container">
                    <ul id="menu-right-main-menu" class="clearfix">
                        <li class="menu-item"><a href="contactus.html">Contact Us</a></li>
                        <li class="menu-item"><a href="services.html">Services</a></li>
                        <li class="menu-item"><a href="#nogo2" id="menu" class="sub-menu">Menu</a>
                            <ul >
                                <li class="menu-item"><a href="#nogo7" class="sub-item">Appetizers and Salads</a></li>
                                <li class="menu-item"><a href="#nogo8" class="sub-item">The Grills</a></li>
                                <li class="menu-item"><a href="#nogo9" class="sub-item">Shawarma</a></li>
                                <li class="menu-item"><a href="#nogo10" class="sub-item">Sandwiches and Trios</a></li>
                                <li class="menu-item"><a href="#nogo11" class="sub-item">Drinks</a></li>
                                <li class="menu-item"><a href="#nogo12" class="sub-item">Desserts</a></li>
                            </ul>
                        </li>
                        <li class="menu-item"><a href="gallery.html">Gallery</a></li>
                    </ul>
                </div>
            </main-menu>

        </header>

    </div>           <!-- End Header --> 

Мне удалось создать динамическое меню c, но только одно меню не смогло его разбить. Я использовал nav для этого следующим образом:

css:

nav {   

    display: block;

    text-align: center;

  }

  nav ul {

    margin: 0;

    padding:0;

    list-style: none;

  }

  .nav a {

    display:block;

    background: #111;

    color:#fff;

    text-decoration: none;

    padding: .8em 1.8em;

    text-transform: uppercase;

    font-size: 80%;letter-spacing: 2px;

    text-shadow: 0 -1px 0 #000;

    position: relative;

  }

  .nav{ 

    vertical-align: top;

    display: inline-block;

    box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;

    border-radius:6px;

  }

  .nav li{position: relative;}

  .nav > li {

    float:left;

    border-bottom: 4px #aaa solid;

    margin-right: 1px;

  }

  .nav > li > a {

    margin-bottom:1px;

    box-shadow:inset 0 2em .33em -.5em #555;

  }

  .nav > li:hover , .nav > li:hover >a{  border-bottom-color:orange;}

  .nav li:hover > a { color:orange; }

  .nav > li:first-child  { border-radius: 4px 0 0 4px;}

  .nav > li:first-child>a{border-radius: 4px 0 0 0;}

  .nav > li:last-child  {

    border-radius: 0 0 4px 0;

    margin-right: 0;

  }

  .nav > li:last-child >a{border-radius: 0 4px 0 0; }

  .nav li li a { margin-top:1px}







    .nav li a:first-child:nth-last-child(2):before {

     content:"";

     position: absolute;

     height:0;

     width: 0;

     border: 5px solid transparent;

     top: 50% ;

     right:5px; 

   }



   /* submenu positioning*/

.nav ul {

  position: absolute;

  white-space: nowrap;

  border-bottom: 5px solid  orange;

  z-index: 1;

  left: -99999em;

}

.nav > li:hover > ul {

  left: auto;

  padding-top: 5px  ;

  min-width: 100%;

}

.nav > li li ul {  border-left:1px solid #fff;}





.nav > li li:hover > ul {

 /* margin-left: 1px */

  left: 100%;

  top: -1px;

}

/* arrow hover styling */

.nav > li > a:first-child:nth-last-child(2):before {

  border-top-color: #aaa;

}

.nav > li:hover > a:first-child:nth-last-child(2):before {

  border: 5px solid transparent;

  border-bottom-color: orange;

  margin-top:-5px

}

.nav li li > a:first-child:nth-last-child(2):before { 

  border-left-color: #aaa;

  margin-top: -5px

}

.nav li li:hover > a:first-child:nth-last-child(2):before {

  border: 5px solid transparent;

  border-right-color: orange;

  right: 10px;

}

и HTML:

     <div id="header-wrapper">
        <!-- Start menu Header -->
         <header id="header">
            <div>       
                <nav>
                    <ul class="nav">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a>
                            <ul>
                                <li><a href="#">item</a></li>
                                <li><a href="#">item</a></li>
                                <li><a href="#">item</a></li>
                                <li><a href="#">item</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Resume</a>
                            <ul>
                                <li><a href="#">item a lonng submenu</a></li>
                                <li><a href="#">item</a>
                                    <ul>
                                        <li><a href="#">Ray</a></li>
                                        <li><a href="#">Veronica</a></li>
                                        <li><a href="#">Bushy</a></li>
                                        <li><a href="#">Havoc</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">item</a></li>
                                <li><a href="#">item</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>        
             </div>
         </header>
        </div>

Мне нужно руководство, пожалуйста, плз.

Заранее спасибо