下拉子菜单

Question

嘿，伙计们，任何人都可以帮助我 我是html和css的新手，我正在尝试在导航栏上创建一个带有子菜单的下拉菜单，但是我的子菜单问题没有显示在正确的位置。 here is how it looks like 我的CSS和HTML：

/* NAVIGATION MENU */

div#top-nav {
background-color: #fff; 
height: 35px;
top: 0;
margin: 0 auto;
z-index: 9999;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.top-menu {
font:normal normal 12px Arial, sans-serif;
margin:0 auto;
height:35px;
overflow:hidden;

}
.top-menu1 {
font:normal normal 12px Arial, sans-serif;
margin:0 auto;
height:43px;
overflow:hidden;
padding: 0px 0px 0;
}
.menubar {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
.menubar li {
display: block;
float: left;
line-height: 37px;
margin: 0 0 0 0;
padding: 0 0 0 0;

}
.menubar li a {

padding: 0 12px;

line-height: 13px;
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
text-transform: uppercase;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 300;
color: #333;
}
.menubar li a:hover {
color:#222;
}
ul.socialbar {
height: 35px;
margin: 0 0 0 0;
padding: 0 0;
float: right;
line-height: 35px;
background: #fff;

}

ul.socialbar a {
color: #333;
font-size: 16px;
padding: 5px 6px;
text-align: center;
border-left: 1px solid #e0e0e0;
-moz-box-shadow: inset 1px 0 0 #fff;
-webkit-box-shadow: inset 1px 0 0 #fff;
box-shadow: inset 1px 0 0 #fff;
}

ul.socialbar .fa{width: 20px;}
ul.socialbar li {
display:inline-block;
list-style-type:none;
float:right;
margin:0 0;
padding:0 0;
border-right:none;
}

/* HEADER WRAPPER */
#header-wrapper {
margin:0 auto;
overflow:hidden;
padding: 0;
}
.header {
float:left;
width:35%;
max-width:300px;
height: 110px;
margin: 45px 0 0PX;
}

div#header-inner {
margin-left: 10px;
}

.header h1.title,.header p.title {
font:normal bold 50px Fjalla One, Arial, Helvetica, sans-serif;
margin:0 0 0 0;
text-transform:uppercase;
}
.header .description {
color:#555555;
}
.header a {
color:#333333;
}
.header a:hover {
color:#999;
}
.header img {
display:block;
padding: 9px 0 39px;
}
.header-right {
  float: right;
  padding: 0;
  overflow: hidden;
  margin: 45px 0px 0 0;
  width: 48%;
  max-width: 468px;
  max-height: 60px;
}
.header-right img {
display:block;
}
#nav {
font: normal bold 12px Arial, sans-serif;
text-transform: uppercase;
height: 40px;
top: 0;
width: 100%;
z-index: 9999;
background-color: #fafafa;
  background: #333333 url(http://4.bp.blogspot.com/-gArr7Ig_jRs/VYhMB4I6X4I/AAAAAAAAF1A/jWQGK4NgeYs/s1600/menu-fade.png) repeat-x bottom;
  margin-bottom: 20px;
}
.menubar2 {
list-style: none;
margin:0 0 0 0;
*zoom: 1;
float:left;
}
.menubar2:before,
.menubar2:after {
content: " ";
display: table;
}
.menubar2:after {
clear: both;
}
.menubar2 ul {
list-style: none;
margin:0 0 0 0;
width:12em;
}
.menubar2 a {
display:block;
padding:0 15px;
}
.menubar2 li {
position: relative;
display: block;
float: left;
line-height: 40px;
margin: 0 0 0 0;
padding: 0 1px 0 0;
}
.menubar2 > li {
float: left;
}
.menubar2 > li > a {
  color: #fff;
  /* float: left; */
  font-size: 16px;
  font-weight: 700;
  line-height: 100%;
  padding: 12px;
  text-transform: uppercase;
  font-family: 'Open Sans Condensed',sans-serif;
}

.active {
background: #e91b23;
color: #fff!important;
  background: #e91b23 url(http://4.bp.blogspot.com/-gArr7Ig_jRs/VYhMB4I6X4I/AAAAAAAAF1A/jWQGK4NgeYs/s1600/menu-fade.png) repeat-x bottom;
}

.active a{
color: #fff!important;
}


.menubar2 li ul {
background: #383838;
border-bottom: 4px solid $(maincolor);
display:block;
position:absolute;
left:0;
z-index:10;
visibility:hidden;
opacity:0;
-webkit-transition:all .25s ease-out;
-moz-transition:all .25s ease-out;
-ms-transition:all .25s ease-out;
-o-transition:all .25s ease-out;
transition:all .25s ease-out;
}
.menubar2 li li ul {
left:100%;
top:-1px;
}
.menubar2 > li.hover > ul {
visibility:visible;
opacity:10;
}

.menubar2 li li.hover ul {
visibility:visible;
opacity:10;
}

.menubar2 li li a {
display: block;
color: #fff;
font-family: 'Droid Sans', sans-serif;
position: relative;
z-index: 100;
line-height: 32px;
border-bottom: 1px solid #313030;
}
.menubar2 li li a:hover {
color:#878787;
}
.menubar2 li li li a {
color: #e0dfdf;
font-family: 'Droid Sans', sans-serif;
text-shadow: 0 1px 1px #4B4B4B;
z-index:20;
}
i.fa.fa-home {
font-size: 25px;
padding: 17px 5px;
}
/* CONTENT WRAPPER */
#content-wrapper {
background-color:transparent;
margin: 0 auto;
padding: 0px 20px 0;
word-wrap:break-word;

}
div#featured-posts-section {
max-height: 400px;
overflow: hidden;
  background: #000;
  box-shadow: 0 2px 7px -3px #000;
  -ms-box-shadow: 0 2px 7px -3px #000;
  -moz-box-shadow: 0 2px 7px -3px #000;
  -o-box-shadow: 0 2px 7px -3px #000;
  -webkit-box-shadow: 0 2px 7px -3px #000;
}
.largebanner {
background:#fff;
border-right:1px solid #e5e5e5;
border-bottom:1px solid #e5e5e5;
border-left:1px solid #e5e5e5;
}
.largebanner .widget {
padding:15px 14px;
overflow:hidden;
}
.largebanner img, .largebanner iframe{
display:block;
max-width:100%;
border:none;
overflow:hidden;
}

<!-- outer-wrapper start -->
    <div class='row' id='outer-wrapper'>

<nav id='nav'>
<div class='conty'>
       
        <ul class='nav menubar2' id='menu-main'>
          <li>
            <a class='active' href='/'>
           
             <span>   Home</span>
              
            </a>
          </li>
          <li>
            <a href='#'>
            <span> News</span>
            </a>
            <ul>
              <li>
                <a href='#'>
                  EUROPE
                </a>
              </li>
              <li>
                <a href='#'>
                  AFRICA
                </a>
              </li>
              <li>
                <a href='#'>
                  WORLDWIDE
                </a>
              </li>
             
            
            </ul>
              
          </li>
          <li>
            <a href='#'>
              <span>Competitions</span>
            </a>
            <ul>
              <li>
                <a href='#'>
                  EUROPE
                </a>
          <ul class='dropdown-menu'>
          <li><a href='#' tabindex='-1'>2nd level dropdown</a></li>
          <li><a href='#' tabindex='-1'>2nd level dropdown</a></li>
          </ul>
              </li>
              <li>
                <a href='#'>


                  AFRICA
              </a>
              </li>
             
              <li>
                <a href='#'>
                  INTERNATIONAL
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href='#'>
             <span> Live Matches</span>
            </a>
          </li>
          <li>
            <a href='#'>
            <span>  Mercato</span>
            </a>
          </li>
          <li>
            <a href='#'>
             <span> Videos</span>
            </a>
          </li>
          <li>
            <a href='#'>
             <span/>
            </a>
          </li>
        </ul>