CSS/SASS 下拉菜单问题

Question

我遇到了一个问题，我重新创建了 Twitter 导航，现在我希望当我将鼠标悬停在 'settings' 文本上时出现一个下拉菜单，但是，我不知道如何解决这个问题，因为我有添加溢出：隐藏到导航中。我也希望它固定在设置文本下，但我找不到解决这个问题的方法。检查笔。

HTML

<nav class="userNav">
   <div class="navCenter">
      <ul class="rightUL navRight">
         <li><a href="#">settings</a></li>
      </ul>
   </div>
</nav>

SASS

.navRight
    float: right

// Main signed in nav that user can see when they log in

.userNav
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 60px

    background-color: white
    overflow: hidden

    .navCenter
        max-width: 1280px
        margin: 0 auto

        .rightUL
            display: inline-block
            padding: 12.5px 0 0 0 

            li
                display: inline-block
                padding-right: 10px

                a
                    color: #5A5A5A
                    text-decoration: none
                    vertical-align: -5px

                    &:hover, &.active
                        color: #21AAEA

Codepen link

Answer 1

您需要从导航中删除 ov:hid 并将其添加到 leftUL。然后在 settings ~ li in pos:absolute 添加一个下拉菜单。我已经为你添加了一个 dommy 下拉列表，你可以为它添加样式，如果你需要任何帮助，可以问我。

这是代码。

HTML

<nav class="userNav">
                <div class="navCenter">
                    <ul class="leftUL navLeft">
                        <li><a href="#"><i class="icon-home"></i> <span>Home</span></a></li
                        ><li><a href="#"><i class="icon-globe"></i> <span>Notifications</span></a></li
                        ><li><a href="#"><i class="icon-envelope"></i> <span>Messages</span></a></li
                        ><li><a href="#" class="active"><i class="icon-user"></i> <span>Me</span></a></li>
                    </ul>
                </div>

                <div class="navCenter">
                    <ul class="rightUL navRight">
                        <li class="search">
                            <form>
                                <input type="search" placeholder="Search Meeu">
                                <i class="icon-search"></i>
                            </form>
                        </li>
<li class="has-drop">            
                          <a href="#">settings</a>
                            <div class="drop">
        <ul>
          <li><a href="#">menu</a></li>
          <li><a href="#">menu</a></li>
          <li><a href="#">menu</a></li>
        </ul>
 </li>
                        </div>  
                    </ul>
                </div>

SASS

 =placeholder 
  &::-webkit-input-placeholder
    @content

  &:-moz-placeholder
    @content

  &::-moz-placeholder
    @content

  &:-ms-input-placeholder
    @content
body
  font-family: sans-serif

.navLeft
  float: left

.navRight
  float: right

// Main signed in nav that user can see when they log in

.userNav
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 68px

  background-color: white

  +single-box-shadow(0, 0px, 1px, 1.5px, rgba(0,0,0,0.1))

  .navCenter
    max-width: 1280px
    margin: 0 auto

    .leftUL
      display: inline-block
      padding: 18px 0 0 0
      overflow: hidden

      li
        display: inline-block

        a
          padding: 30px 12px 15px 12px

          border-bottom: 4px solid #5A5A5A
          color: #5A5A5A
          text-decoration: none

          +single-transition(all, .15s, ease-in-out)

          &:hover, &.active
            padding-bottom: 11px

            border-color: #21AAEA
            color: #21AAEA

          i
            font-size: 24px

          span
            font-size: 14px
            vertical-align: 4px

    .rightUL
      display: inline-block
      padding: 12.5px 0 0 0 
      .has-drop
        position: relative
        &:hover
          .drop
            display: block

      .drop
        display: none
        position: absolute
        top: 100%
        right: 0
        width: 150px
        background: blue
        padding: 20px
        border-radius: 10px
        li
          display: block
        a
          color: #fff

      .search
        display: inline-block

        form

          i
            position: relative
            left: -32px

            color: #292f33
            font-size: 14px

          input
            width: 200px
            height: 35px
            padding: 0 35px 0 10px

            border: 1px solid #e1e8ed
            outline: none
            font-size: 12px
            line-height: 1
            background-color: #f5f8fa

            @include placeholder
              padding: 2.5px 0 0 0 
              color: #292f33

            +border-radius(21px)
            +single-transition(background-color, .15s, ease-in-out)

            &:focus
              background-color: transparent

              @include placeholder
                color: #8899A6

      li
        display: inline-block
        padding-right: 10px

        a
          color: #5A5A5A
          text-decoration: none
          font-size: 14px

          +single-transition(all, .15s, ease-in-out)

          &:hover, &.active
            color: #21AAEA

CodePen Link

CSS/SASS 下拉菜单问题

CSS/SASS dropdown menu issue

css

sass