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>