嘿，伙计们，任何人都可以帮助我
我是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>
