html - 如何在我的导航中修复此子菜单？

Question

有点沮丧，因为我很难做这件事。我不知道如何解决这个问题。在我的“关于”按钮上应该有一个子菜单“asdas”和另一个。只有当悬停在关于链接上时才会出现。 Here is the sample pic of that

CSS

.mainNavWrapper{
  position: absolute;
  width: 100%;
  height: 290px;
  background: rgba(0,0,0,0.7);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#46000000', endColorstr='#46000000');
  bottom: 195px;
  text-align: center; }


.ie8 .mainNavWrapper{
 min-width: 1000px;
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#60000000', endColorstr='#60000000');}

.mainnav form{
 display:none;}

.mainnav form select{
 padding: 5px 10px 5px 10px;
 margin-top: 55px;}


 .mainnav ul{
  position: relative;
  margin: 0 auto;
  margin-top: 59px;
  margin-bottom: 43px;
  z-index:1; }

 .mainnav ul li{
  display: inline;
  font-size: 22px;
  margin-left: 17px;
  font-family: 'Oswald', sans-serif;}

 .mainnav ul li:first-child{
  margin-left: 0;}

 .mainnav a, .mainnav a:visited{
 color: #fff;}

.mainnav a:hover, .mainnav a.selected { 
text-decoration: none;}

HTML

<nav class="mainnav" data-smallmenubgcolour="#777">
                     <ul>
                      <li><a href="#home">HOME</a></li>
                      <li><a href="#about">ABOUT</a>
                      <ul>
                          <li>ABOUT1</li>
                          <li>ABOUT2</li>
                          </ul>
                      </li>
                      <li><a href="#credo">CREDO</a></li>
                      <li><a href="#philosophy">PHILOSOPHY</a></li>
                      <li><a href="#portfolio">PORTFOLIO</a></li>
                      <li><a href="#services">SERVICES</a></li>
                      <li><a href="#news">NEWS</a></li>
                      <li><a href="#contact">CONTACT</a></li>
                     </ul>
</nav

Answer 1

你能检查一下吗

HTML

<ul class="nav">
    <li>Home</li>
    <li>About
        <ul class="subnav">
            <li>Sublink 1</li>
            <li>Sublink 2</li>
        </ul>
    </li>
</ul>

CSS

ul, li {
    margin:0;
    padding:0;
    vertical-align:top;
}
.nav li, .subnav li {
    display:inline-block;
    vertical-align:top;
    cursor:pointer;
}
.nav li {
    position:relative;
}
.subnav {
}
.subnav {
    display:none;
    position:absolute;
    left:0;
    top:20px;
}
.subnav {
    white-space:nowrap;
}

脚本

$(".nav li").on("mouseover", function () {
    $(this).find(".subnav").show();
})
$(".nav li").on("mouseout", function () {
    $(this).find(".subnav").hide();
})

Fiddle Demo