使用 Pure CSS 創建一個顯示焦點的下拉菜單

Question

我正在處理站點標題的下拉菜單。 我有它，所以當您將鼠標懸停在“Info for”文本上時，會彈出一個菜單。 我還希望能夠專注於子菜單項，但是在瀏覽站點時，您可以專注於頂部按鈕，但是當移動到下一個項目時菜單消失，這只是主體。 讓我知道這是否可能按照我的設置方式進行！

HTML

<div class="top-bar">
  <div class="info-for">
    <button>Information For&nbsp;&nbsp;&#9660;</button>
    <div class="dropdown">
      <ul>
        <li><a href="#">Info For Option 1</a></li>
        <li><a href="#">Info For Option 2</a></li>
        <li><a href="#">Info For Option 3</a></li>
        <li><a href="#">Info For Option 4</a></li>
        <li><a href="#">Info For Option 5</a></li>
      </ul>
    </div>
  </div>
  <div class="give-search">
    <a href="#">Give</a>
    <span class="spacer">|</span>
    <button>Q</button>
  </div>
</div>

CSS

//-----BASE-----//
:root {
  --purple: #61578b;
  --gold: #deb364;
  --white: #fefefe;
  --background-gray: #f2f2f2;
  --border-gray: #cccccc;

  --font-serif: "Noto Serif", serif;
  --font-sans: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
body {
  font-family: var(--font-sans);
  margin: 0;
}
a {
  text-decoration: none;
  &:focus {
    outline: none;
  }
}

//-----HELPER-----//
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  background: var(--white);
  border: 1px solid var(--border-gray);
  & ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: max-content;
  }
  & a {
    display: block;
  }
  &:hover,
  &:focus-within {
    display: block;
  }
}

//-----HEADER-----//
.top-bar {
  background-color: var(--purple);
  color: var(--white);
  font-weight: bold;
  position: relative;
  & > * {
    display: inline-block;
  }
  & .dropdown {
    & li:hover,
    & li:focus-within {
      background-color: var(--background-gray);
    }
    & a {
      padding: 0.75rem 0.5rem;
      color: var(--purple);
      font-family: var(--font-sans);
      font-weight: bold;
    }
  }
}
.info-for {
  font-family: var(--font-serif);
  & button {
    all: unset;
    cursor: pointer;
    padding: 1rem;
    &:hover,
    &:focus {
      color: var(--gold);
    }
    &:hover + .dropdown,
    &:focus + .dropdown {
      display: block;
    }
  }
}
.give-search {
  float: right;
  padding: 1rem;
  & a {
    color: var(--white);
    &:hover,
    &:focus {
      color: var(--gold);
    }
  }
  & .spacer {
    padding: 0 2rem;
  }
  & button {
    all: unset;
    cursor: pointer;
    &:hover,
    &:focus {
      color: var(--gold);
    }
  }
}

這是我的 Codepen

Answer 1

display:none似乎是你的問題。

要在 screen 處隱藏您的絕對.dropdown ，而不是display ，請使用坐標或margin將其拉/推到屏幕外，但允許它被訪問和閱讀（ display:none完全隱藏它）。

下面是一個沒有顯示和負邊距 DEMO 的可能示例

或分叉 codepen 上的經典邊距： https ://codepen.io/gc-nomade/pen/RwZJjNO。

 .dropdown { position:absolute; margin-inline-start:-100vw;/* righ or left, follows direction of document */ } .dropdown:focus-within { margin:0 }

 <div class="top-bar"> <div class="info-for"> <button>Information For&nbsp;&nbsp;&#9660;</button> <div class="dropdown"> <ul> <li><a href="#">Info For Option 1</a></li> <li><a href="#">Info For Option 2</a></li> <li><a href="#">Info For Option 3</a></li> <li><a href="#">Info For Option 4</a></li> <li><a href="#">Info For Option 5</a></li> </ul> </div> </div> <div class="give-search"> <a href="#">Give</a> <span class="spacer">|</span> <button>Q</button> </div> </div>