無法顯示水平子菜單與垂直菜單使用背景img

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; 
    } 

我試過，但不能在其主菜單項前顯示子菜單....我加只有關於和出租選項卡的子菜單。這裏是當前的演示http://codepen.io/abdulwahid24/pen/Eiwkr

Answer 1

其實，問題是你的頂級LIS沒有高度，因爲他們不纏繞其浮動的內容。一個簡單的辦法就是改變這種：

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

這樣：

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

Answer 2

你的問題是絕對定位。調整子菜單樣式的頂部和左側值可以幫助您將它們放置在您想要的位置。例如，修改此規則將子菜單大致定位在您想要的位置。請注意，我將left:和top:修改爲100px;

在你的情況下，左邊的值應該始終保持不變，最大值會根據子菜單所在頁面的位置而改變。

.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;}