[英]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>
辅助子菜单,当您将鼠标悬停在例如“下载”上时,将显示子菜单。 虽然,看看它的位置。 我希望它是从左:0开始的。 从头开始,而不是在“下载”下面。
在此处查看JSFiddle: https ://jsfiddle.net/pycLaojm/
您只需从.navigation ul li
删除position: relative
并应用position: relative
对于.navigation ul
position: relative
。 然后在.sub
添加一个left: 0
,因此定位的<ul class = "sub">
将与应用位置relative
的父.navigation ul
。 请检查以下小提琴。
$(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>
通过使sub-link
类元素的位置fixed
0px
可以轻松实现此目的。 这是左对齐的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;
}
在这里更新了小提琴-https: //jsfiddle.net/pycLaojm/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.