2015-05-25 56 views
0

我有一個帶有垂直導航菜單的邊欄,需要將懸停子菜單拖動到側邊欄的左側,但是在懸停時子菜單被邊緣切掉側邊欄......我如何着手把它帶到頂端?z-index和CSS定位不起作用

我已經嘗試過使用z-index'和改變位置,但我不知道哪個元素來設置哪個位置。

由於佈局,側杆需要固定位置。

這裏是基本佈局https://jsfiddle.net/Lnhrbouo/

任何幫助的的jsfiddle會,因爲我一直在這幾個小時,現在將不勝感激。

謝謝。

<div class="sideBar"> 
<div id="side-wrap" class="container"> 
    <div id="wrapper-side"> 
     <div id="logo"> 
      <img src="images/logo-shot.png" /> 
     </div> 
     <div id="a"> 
      <ul class="nav"> 
       <li><a href="test7.php">Home</a> 
       </li> 
       <li><a href="grid.php">Solutions <i class="fa fa-angle-down" style="font-size: 12px;"></i></a> 

        <ul> 
         <li><a href="accounting.php">Accounting</a> 
         </li> 
         <li><a href="cloud.php">Cloud Accounting</a> 
         </li> 
         <li><a href="tax.php">Tax</a> 
         </li> 
         <li><a href="business.php">Business Planning</a> 
         </li> 
         <li><a href="future.php">Planning Your Future</a> 
         </li> 
        </ul> 
       </li> 
       <li><a href="about.php">About <i class="fa fa-angle-down" style="font-size: 12px;"></i></a> 

        <ul> 
         <li><a href="staff.php">Staff</a> 
         </li> 
         <li><a href="values.php">Our Values</a> 
         </li> 
        </ul> 
       </li> 
       <li><a href="blog.php">Blog</a> 
       </li> 
       <li><a href="contact.php">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <div id="newsletter"> 
      <h1>NEWSLETTER</h1> 
      <div id='content'> 
       <div id="hidden-content"> <span class="signup">Sign Up Today</span> 
        <input class="side-mail" type="text" name="FirstName" placeholder="Enter your email here"> 
        <br> 
        <input type="submit" value="SUBMIT" class="submit-button"> 
       </div> 
      </div> 
      <div id='button'> 
       <sctrong> 
        <img src="images/more-banner.png" /> 
        </strong> 
      </div> 
      <script> 

      </script> 
     </div> 
     <div id="barFoot"> 
      <p>© 2013 address goes here</p> 
     </div> 
    </div> 
</div> 
</div> 
</div> 
<div id="container"> 
<div class="wrapper"> 
    <div class="centre"> 
     <div class="visibleArea"> 
      <div id="header-text"> 
       <p class="call-top"><span class="hide-call">CALL TODAY  </span> 
        <span="small-call"><strong>00000</strong> | <a href="#"><i class="fa fa-linkedin fa-fw"></i></a> <a href="#"><i class="fa fa-twitter fa-fw"></i></a> <a href="#"><i class="fa fa-google-plus fa-fw"></i></a> 
         </span> 
         <div id="top2"> 
          <div class="section group"> 
           <div class="col span_1_of_2"> 
            <img src="images/logo-round.PNG" /> 
           </div> 
           <div class="col span_1_of_2 split"> 
            <div id="ftp-ico"> <a href="#"><i class="fa fa-linkedin fa-fw"></i></a> <a href="#"><i class="fa fa-twitter fa-fw"></i></a> <a href="#"><i class="fa fa-google-plus fa-fw"></i></a> 

            </div> 
            <div id="show-number">CALL TODAY</span> 
             <span="small-call"> <strong>000000</strong> 

            </div> 
            <div id="resp-newsletter"> 
             <input class="side-mail split-news" type="text" name="FirstName" placeholder="Sign up for our newsletter"> 
             <input type="submit" value="SUBMIT" class="submit-button split-side"> 
            </div> 
           </div> 
          </div> 
         </div> 
      </div> 
     </div> 
     <div class="clear"></div> 
    </div> 
    <div class="full" style="background:#456789;"> 
     <div class="slider"> 
      <img src="images/ggow.PNG" /> 
      <img src="images/dome.PNG" /> 
      <img src="images/reflect.PNG" /> 
      <img src="images/purple.png" /> 
     </div> 
    </div> 

回答