如何将子菜单置于左侧
[英]How can I position the sub-menu to the left side
问题描述
<body>
<div class = "header">
<div class = "upper-nav">
<span class = "user-btn">
<button id = "login-btn">Login</button>
<button id = "signup-btn">Register</button>
</span>
</div>
<div class = "content">
<div class = "navigation">
<ul>
<li>Home</li>
<li>Register</li>
<li id = "download-btn" class = "sub-link">Download
<ul class = "sub">
<li class = "sub-dl">Google Drive</li>
<li class = "sub-dl">Fast Drive</li>
<li class = "sub-dl">Direct Download</li>
</ul>
</li>
<li id = "shop-btn" class = "sub-link">Itemshop
<ul class = "sub">
<li class = "sub-dl">Google Drive</li>
<li class = "sub-dl">Fast Drive</li>
<li class = "sub-dl">Direct Download</li>
</ul>
</li>
<li id = "ranking-btn" class = "sub-link">Ranking</li>
<li id = "community-btn" class = "sub-link">Community</li>
</ul>
</div>
</div>
</div>
</body>
</html>
The secondary sub-menu, when you hover over for example "Downloads", the sub-menu appears. 
辅助子菜单，当您将鼠标悬停在例如“下载”上时，将显示子菜单。 Although, look where it's positioned. 虽然，看看它的位置。 I would like it to be from left:0. 我希望它是从左：0开始的。 From the start and not underneath "Downloads". 从头开始，而不是在“下载”下面。
Check out the JSFiddle here: https://jsfiddle.net/pycLaojm/ 在此处查看JSFiddle： https ：//jsfiddle.net/pycLaojm/
2 个解决方案
解决方案1
3 已采纳 2017-10-23 04:24:14
you just remove the position: relative from .navigation ul li and apply position: relative to .navigation ul . 您只需从.navigation ul li删除position: relative并应用position: relative对于.navigation ul position: relative 。 then add a left: 0 to .sub So the positioned <ul class = "sub"> will allign to the parent .navigation ul where position relative is applied. 然后在.sub添加一个left: 0 ，因此定位的<ul class = "sub">将与应用位置relative的父.navigation ul 。 please check the below fiddle. 请检查以下小提琴。
$(document).ready(function(){ $(".navigation ul li").hover(function(){ $(this).children(".sub").show(); }, function(){ $(this).children(".sub").hide(); }); });
*{ margin: 0; padding: 0; font-family: "Open Sans", sans-serif; } body{ width: 1200px auto; position: relative; background: #ddd; } .header{ background: url("../images/2.jpg"); background-position: center 0%; background-repeat:no-repeat; position: relative; height: 500px; width: 100%; } .upper-nav{ width: 1000px; margin: 0 auto; } .user-btn{ padding: 30px 220px 0 0; float: right; } .user-btn button{ width: 90px; height: 30px; border-radius: 2px; color:#FFF; font-size: 11px; margin-left: 10px; } .server-time{ font-size: 10px; color:#fff; } #login-btn{ background:linear-gradient(to bottom,#008ADA 0,#0076DA 100%); border:1px solid #008ADA;box-shadow: 0 0 0.5px #888; } #signup-btn{ background:linear-gradient(to bottom,#D03737 0,#a22c2c 100%); border:1px solid #D03737;box-shadow: 0 0 0.5px #888; } .content{ clear:both; width: 972px; margin: 0 auto; } .content .navigation{ width: 100%; height: 50px; background:#FFF; position: relative; top: 20px; } .navigation ul{ list-style: none; } .navigation ul li{ font-family: "Roboto", sans-serif; display: inline-block; margin-right: 25px; left: 20px; text-transform: uppercase; font-size: 14px; line-height: 50px; font-weight: 400; color:#000; } .navigation ul li.sub-link{ background: url("../images/arrow-down.png") right center no-repeat; padding-right: 20px; } .navigation ul li:hover{ cursor: pointer; } .sub{ background: rgba(7,100,176,1); left: 0; height: 50px; width: 972px; position: absolute; box-sizing: border-box; display: none } .sub > .sub-dl{ font-size: 12px; color:#FFF; margin-right: 25px; } .animate{ display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "header"> <div class = "upper-nav"> <span class = "user-btn"> <span class = "server-time">Local Server Time 03:23 CET</span> <button id = "login-btn">Login</button> <button id = "signup-btn">Register</button> </span> </div> <div class = "content"> <div class = "navigation"> <ul> <li>Home</li> <li>Register</li> <li id = "download-btn" class = "sub-link">Download <ul class = "sub"> <li class = "sub-dl">Google Drive</li> <li class = "sub-dl">Fast Drive</li> <li class = "sub-dl">Direct Download</li> </ul> </li> <li id = "shop-btn" class = "sub-link">Itemshop <ul class = "sub"> <li class = "sub-dl">Google Drive</li> <li class = "sub-dl">Fast Drive</li> <li class = "sub-dl">Direct Download</li> </ul> </li> <li id = "ranking-btn" class = "sub-link">Ranking</li> <li id = "community-btn" class = "sub-link">Community</li> </ul> </div> </div> </div>
解决方案2
2 2017-10-23 04:22:22
You can easily achieve this by making your sub-link class elements with position fixed and left 0px . 通过使sub-link类元素的位置fixed 0px可以轻松实现此目的。 Here is the CSS code for your sub-link class with left alignment- 这是左对齐的sub-link类的CSS代码sub-link
.sub{
background: rgba(7,100,176,1);
height: 50px;
width: 972px;
position: fixed;
left:0px;
box-sizing: border-box;
display: none;
}
Updated fiddle here - https://jsfiddle.net/pycLaojm/2/ 在这里更新了小提琴-https: //jsfiddle.net/pycLaojm/2/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.