How can I position the sub-menu to the left side

Question

<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. From the start and not underneath "Downloads".

Check out the JSFiddle here: https://jsfiddle.net/pycLaojm/

Answer 1

you just remove the position: relative from .navigation ul li and apply position: relative to .navigation ul . 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. 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>

Answer 2

You can easily achieve this by making your sub-link class elements with position fixed and left 0px . Here is the CSS code for your sub-link class with left alignment-

.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/

How can I position the sub-menu to the left side

Question

2 answers

solution1
3 ACCPTED 2017-10-23 04:24:14

solution2
2 2017-10-23 04:22:22

How can I position the sub-menu to the left side

Question

2 answers

solution1 3 ACCPTED 2017-10-23 04:24:14

solution2 2 2017-10-23 04:22:22

solution1
3 ACCPTED 2017-10-23 04:24:14

solution2
2 2017-10-23 04:22:22