无法使用背景图像显示带有垂直菜单的水平子菜单

Question

我正在做一些网站项目，我正在尝试创建一个垂直菜单，该菜单显示一个水平子菜单作为背景图像分配给悬停事件上的 ul 元素，但该图像粘在一个位置，而不是根据悬停事件显示在其他位置菜单元素。我想将其水平显示到其主菜单项。

这是我的 HTML 代码：

    <nav class="side_menu">
    <ul id="side_menu">
      <li><a href="#!/page_splash"><span></span><span></span><strong></strong><strong></strong></a></li>
      <li><a href="#!/page_home"><span>Home</span><span>welcome note</span><strong></strong><strong></strong></a></li>
      <li class="with_ul"><a href="#!/page_about"><span>About</span><span>company info</span><strong></strong><strong></strong></a>
           <ul class="side_submenu_1">
               <li><a href="#!/page_more">company</a></li>
               <li><a href="#!/page_more">team</a></li>
               <li><a href="#!/page_more">news</a></li>
               <li><a href="#!/page_more">projects</a></li>
           </ul>
       </li>
       <li class="with_ul"><a href="#!/page_folio"><span>Rent</span><span>Latest Offers</span><strong></strong><strong></strong></a>
          <ul class="side_submenu_1">
               <li><a href="#!/page_more">FOLIO</a></li>
          </ul>
        </li>
        <li><a href="#!/page_sale"><span>Sell</span><span>contact us!</span><strong></strong><strong></strong></a></li>
        <li><a href="#!/page_services"><span>services</span><span>what we do?</span><strong></strong><strong></strong></a></li>
        <li><a href="#!/page_mail"><span>contacts</span><span>contact us!</span><strong></strong><strong></strong></a></li>
  </ul>
</nav>

CSS：

.side_menu{
  position: relative; 
  display: block; 
  float: left; 
  margin-top: 0px;
  margin-left: 10px;
 }

#side_menu>li{
  display:block;
  position:relative;
}

#side_menu>li:first-child{
  display:none;
 }

#side_menu>li>a{
  display:block;
  position:relative;
  float:left;width:103px;
  height:102px;
  margin-top: -2.5px;
 }

#side_menu>li>a>span{
  display:block;
  position:relative;
  font:24px/1.2em 'Contrail One',sans-serif;
  color:#fff;
  display:block;
  padding-top:28px;
  margin-left:15px;
  letter-spacing:1px;
  z-index:2;
 }

#side_menu>li>a>span:first-child+span{
  font-size:10px;
  color:rgba(255,255,255,0.4);
  padding:0px;
  margin-top:-5px;
  letter-spacing:0;
 }

#side_menu>li:first-child>a>strong{
  display:block;
  position:relative;
  float:left;
 }

#side_menu>li:first-child+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li:first-child+li+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li:first-child+li+li+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li:first-child+li+li+li+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li:first-child+li+li+li+li+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li:first-child+li+li+li+li+li+li>a>span+span+strong{
   background:url(http://edplace.com/userfiles/image/circle.gif) center no-repeat;
 }

#side_menu>li>a>strong{
   display:inline-block;
   position:absolute;
   height:100%;
   width:100%;
   top:0;
   left:0;
   z-index:0;
 }

 #side_menu>li>a>span+span+strong+strong{
     background:url(../images/side_menu_bg_def.png) center no-repeat;
  }

   .side_submenu_1{
      display: none; 
      position: absolute;
      left: 50px;
      top: 0;
      width:103px;
      height:102px;
      background:url(http://www.drewmichaelblake.com/r/i/YellowCircle.png) center no-      repeat;
   }

  .side_submenu_1 li{
       position:relative;
       display:block;
       margin-bottom:4px;
   }

  .side_submenu_1 li:first-child{
       padding-top:18px;
   }

  .side_submenu_1 a{
       position:relative;
       display:block;
       font:11px/1.2em 'Contrail One',sans-serif;
       color:#615f5e;
   }

  #side_menu > li:hover .side_submenu_1{
       display:inline-block;
   }

我尝试过但无法在其主菜单项前显示子菜单....我只为 About 和 Rent Tab 添加了子菜单。这是当前的演示http://codepen.io/abdulwahid24/pen/Eiwkr

Answer 1

实际上，问题在于您的顶级 LI 没有高度，因为它们没有环绕其浮动内容。一个简单的解决方法是改变它：

#side_menu>li {
    display: block;
    position: relative;
}

到这里：

#side_menu>li {
    display: table;
    position: relative;
}

Answer 2

您的问题是绝对定位。调整子菜单样式的顶部和左侧值将帮助您根据需要放置它们。例如，修改此规则会将子菜单大致定位在您想要的位置。注意我把left:和top:修改为100px；

在您的情况下，left 值应始终保持不变，top 值将根据子菜单应位于页面下方的位置而变化。

.side_submenu_1{
  display: none; 
  position: absolute;
  left: 100px;
  top: 100px;
  width:103px;
  height:102px;
 background:url(http://www.drewmichaelblake.com/r/i/YellowCircle.png) center no-repeat;}