html - 粘性菜单上的下拉菜单？

Question

首先，我是这一切的新手，一周前开始学习编码。我的导航栏没有什么问题。我想将下拉菜单放在粘性导航栏中。这是a link到html文件。我想把下拉菜单放在这些 menu1, menu2... 下

另外，如果可能的话，我想将导航栏的宽度设置为与内容的宽度相同。提前致谢。 :)

Answer 1

https://jsfiddle.net/Liamm12/px0bt26o/4/

你好!这就是你想要做的

HTML:

     <div class="header">
        <h2>fb</h2>

      </div>
            <div id="navbar">
<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">MENU1 <span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">
                    <li><a href="#">Some Text here</a></li>
                    <li><a href="#">Whatever you want</a></li>
                    <li><a href="#">Some Text</a></li>
                    <li><a href="#">Hello &amp; There</a></li>
                </ul>
            </li>
            <li><a href="#">MENU2 <span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">
                    <li><a href="#">Text Menu2</a></li>
                    <li><a href="#">Text Menu2</a></li>
                    <li><a href="#">Text Menu2</a></li>
                    <li><a href="#">Hello &amp; Menu2</a></li>
                </ul>


            </li>
            <li><a href="#">MENU3</a></li>
            <li><a href="#">MENU4</a></li>
            <li><a href="#">MENU5</a></li>
        </ul>
    </nav>
</div>
</div>

      <div class="content">
        <h3>Lorem Ipsum Bipsum Dipsum</h3>
        <p>Lorem torem borem dorem jorem sorem.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      </div>

CSS:

@font-face {
  font-family: Marat Sans;
  src: url(fonts/MaratSans.otf);
}

@font-face {
  font-family: Marat Sans;
  src: url(fonts/MaratSansthin.otf);
  font-weight: thin;
}

@font-face {
  font-family: Noe Display;
  src: url(fonts/NoeDisplayMedium.otf);
}

@font-face {
  font-family: Charter;
  src: url(fonts/charter.otf);
}

h3 {

  font-family: Marat Sans;
  font-size: 40px;
}

body {
    margin: 0;
    font-size: 22px;
    font-family: charter; 
     background: #fff;

  }

  .header {
    background-color: #f1f1f100;
    margin top: 0;
    padding: 0px;
    text-align: center;
    float: center;
    font-size: 24px;
font-family: Noe Display;
  }

.clearfix:after {
    display:block;
    clear:both;
}

.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#3e3436;
}

.menu {
    width:1000px;
    margin:0px auto;
}

.menu li {
    margin:0px;
    list-style:none;
    font-family:'Ek Mukta';
}

.menu a {
    transition:all linear 0.15s;
    color: #000;
    text-decoration: none;
}


.menu .arrow {
    font-size:11px;
    line-height:0%;
}

.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
        font-size: 16px;
    font-family: Marat Sans;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#17a67c;
}

.menu li:hover .sub-menu {
    z-index:1;
    display: block;
}

.sub-menu {
  display: none;
    width: 160%;
    padding: 5px 0px;
    position: absolute;
    top: 100%;
    left: 2px;
    z-index: -1;
    transition: opacity linear 0.15s;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
    background: #f5f5f5;
}

.sub-menu li {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:#f5f5f5;
}
 .sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background:#fff;
  }

  .sticky + .content {
    padding-top: 100px;
  }