粘性菜单上的下拉菜单？

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;
  }

Answer 2

为了将下拉菜单添加到导航栏，您只需使用“选择”标签，在“选择”标签内，您将使用“选项”标签，您将在其中插入下拉菜单的选项

<select>
       <option>None</option>
       <option>Mr.</option>
       <option>Mrs.</option>
       <option>Miss.</option>       
</select>

如果你想设置导航栏的宽度，那么你需要 在“Div”标签内插入导航栏。然后，您将分配一个 id 到 div 标签。

<div id="navbar">
</div>

然后你可以使用上面在CSS文件中分配的div id来调整宽度 上述div的相应

希望这能解决您的问题。