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>

辅助子菜单，当您将鼠标悬停在“下载”上时，会出现子菜单。虽然，看看它的位置。我想从左边开始：0。从一开始就没有“下载”。

在这里查看JSFiddle：https://jsfiddle.net/pycLaojm/

Answer 1

您只需从position: relative移除.navigation ul li，然后将position: relative应用于.navigation ul。然后将left: 0添加到.sub这样定位的<ul class = "sub">将与应用了位置.navigation ul的父relative对齐。请检查以下小提琴。

$(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

您可以通过将sub-link类元素放置在位置fixed和左侧0px来轻松实现此目的。以下是具有左对齐的sub-link类的CSS代码 -

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

如何将子菜单放在左侧

2 个答案: