如何正確使用懸停和位置：絕對？-有解無憂

我不是很有經驗，但我想制作一個可懸停的下拉選單我的問題：

懸停不起作用
絕對位置很奇怪我想要它在 txt 5 幾年前我上次制作這樣的導航欄可能是我忘記了，或者我寫了完整的 bs。無論如何，感謝回答這個問題的人。

*{
    margin:0;
    padding:0;}
body{
    background-color: #000;
}
p.heading{
    font-family: helvetica;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    background-color: #ccffff;
    padding: 10px;
    color:#000080;
}
.nav{
    width: 100%;
    height: 50px;
    background-color: #ff4d4d;
    float: left;
}
ul li{
    list-style: none;
    position: relative;
}
button.btn{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.btn:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}
button.drp{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.drp:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}



button.d{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    width: 150px;
    background-color: #ff4d4d;
    color:azure;
}
button.d:hover{
    text-align: center;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    height: 50px;
    width: 150px;
    background-color:#ccffff;
    color: #000;
}

.li{
    display:none;
    position: absolute;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    width: 130px;
    color:azure;
}
button.drp :hover  .li{
    display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "stylesheet.css">
    </head>
        <body>
            <div class = heading>
                <p class = heading>Heading</p>
            </div>
            <div class = nav>
                <ul class = nav>
                 <li><button class = btn> Txt1 </button></li>
                 <li><button class = btn> Txt2 </button></li>
                 <li><button class = btn> Txt3 </button></li>
                 <li><button class = btn> Txt4 </button></li>
                 <li><button class = drp> Txt5 </button></li>
                 <li class = li><ul>
                        <li><button class = d>txt6</button></li>
                        <li><button class = d>txt7</button></li>
                    </ul>
                 </li>
                </ul>     
            </div>
        </body>
</html>

一個簡單的建議也可以，我只是覺得最簡單的事情就是飛過去

uj5u.com熱心網友回復：

您可以簡單地使用li本身而不是第一個片段中的按鈕來觸發下拉串列，我剛剛向li添加了一個類，當它懸停時打開下拉串列，當隱藏的li本身懸停以保持下拉時。

 .dropmysibling:hover   .li ul,.li:hover ul{
   display: block;
 }

這是兄弟方法，但它是一個糟糕的實作，因為幾乎不可能根據其兄弟定位元素。

更好的方法是使用 child 方法，將隱藏選單放在打開它的li中，這樣可以輕松定位。檢查另一個片段。

這是不好的方法 - （兄弟方法）：

*{
    margin:0;
    padding:0;}
body{
    background-color: #000;
}
p.heading{
    font-family: helvetica;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    background-color: #ccffff;
    padding: 10px;
    color:#000080;
}
.nav{
    width: 100%;
    height: 50px;
    background-color: #ff4d4d;
    float: left;
    display:flex;
    align-items:stretch;
}
ul li{
    list-style: none;
    position: relative;
}
button.btn{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.btn:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}
button.drp{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.drp:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}



button.d{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    width: 150px;
    background-color: #ff4d4d;
    color:azure;
}
button.d:hover{
    text-align: center;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    height: 50px;
    width: 150px;
    background-color:#ccffff;
    color: #000;
}
.li{
  position:relative;
}
.li ul{
    display:none;
    position: absolute;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    width: 130px;
    color:azure;
    top:100%;
    left:-75px;
}
 .dropmysibling:hover   .li ul,.li:hover ul{
    display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "stylesheet.css">
    </head>
        <body>
            <div class = heading>
                <p class = heading>Heading</p>
            </div>
            <div class = nav>
                <ul class = nav>
                 <li><button class = btn> Txt1 </button></li>
                 <li><button class = btn> Txt2 </button></li>
                 <li><button class = btn> Txt3 </button></li>
                 <li><button class = btn> Txt4 </button></li>
                 <li class="dropmysibling"><button class = drp> Txt5 </button></li>
                 <li class = li><ul>
                        <li><button class = d>txt6</button></li>
                        <li><button class = d>txt7</button></li>
                    </ul>
                 </li>
                </ul>     
            </div>
        </body>
</html>

這是一個更好的方法 - （子方法）：

*{
    margin:0;
    padding:0;}
body{
    background-color: #000;
}
p.heading{
    font-family: helvetica;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    background-color: #ccffff;
    padding: 10px;
    color:#000080;
}
.nav{
    width: 100%;
    height: 50px;
    background-color: #ff4d4d;
    float: left;
    display:flex;
    align-items:stretch;
}
ul li{
    list-style: none;
    position: relative;
}
button.btn{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.btn:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}
button.drp{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.drp:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}



button.d{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    width: 150px;
    background-color: #ff4d4d;
    color:azure;
}
button.d:hover{
    text-align: center;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    height: 50px;
    width: 150px;
    background-color:#ccffff;
    color: #000;
}
.dropdownmychild{
  postistion:relative;
}
.dropdownmychild > ul{
    display:none;
    position: absolute;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    width: 130px;
    color:azure;
    top:100%;
    left:0;
}
.dropdownmychild:hover >ul{
    display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "stylesheet.css">
    </head>
        <body>
            <div class = heading>
                <p class = heading>Heading</p>
            </div>
            <div class = nav>
                <ul class = nav>
                 <li><button class = btn> Txt1 </button></li>
                 <li><button class = btn> Txt2 </button></li>
                 <li><button class = btn> Txt3 </button></li>
                 <li><button class = btn> Txt4 </button></li>
                 <li class="dropdownmychild"><button class = drp> Txt5 </button>
                 <ul>
                        <li><button class = d>txt6</button></li>
                        <li><button class = d>txt7</button></li>
                    </ul>
                 </li>
                </ul>     
            </div>
        </body>
</html>

我還給 .nav 一個顯示： flex; 和對齊專案：拉伸；

uj5u.com熱心網友回復：

我還更改了您的 HTML 結構并為它們提供了一些類名。您可以將其與您的代碼進行比較。您還應該改進 HTML 和 CSS 上的元素（標簽）、類名和 ID。即使您撰寫了正確的代碼，您也會出錯。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Document</title>
      </head>
      <body>
        <div class="heading">
          <h1 class="heading__title">Heading</h1>
        </div>
        <div class="nav">
          <ul class="nav__list">
            <li class="nav__item">
              <a href="#" class="nav__link">Item 1</a>
            </li>
            <li class="nav__item">
              <a href="#" class="nav__link">Item 2</a>
              <ul class="drop-list">
                <li class="drop-list__item">
                  <a href="#" class="drop-list__link">Drop Item 1</a>
                </li>
                <li class="drop-list__item">
                  <a href="#" class="drop-list__link">Drop Item 2</a>
                </li>
              </ul>
            </li>
            <li class="nav__item"><a href="#" class="nav__link">Item 3</a></li>
            <li class="nav__item"><a href="#" class="nav__link">Item 4</a></li>
            <li class="nav__item"><a href="#" class="nav__link">Item 5</a></li>
            <li class="nav__item"><a href="#" class="nav__link">Item 6</a></li>
            <li class="nav__item"><a href="#" class="nav__link">Item 7</a></li>
          </ul>
        </div>
      </body>
    </html>


    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background-color: #000;
    }
    
    .heading__title {
      font-family: helvetica;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      background-color: #ccffff;
      padding: 10px;
      color: #000080;
    }
    
    .nav {
      width: 100%;
      background-color: #ff4d4d;
      float: left;
    }
    
    ul {
      list-style-type: none;
    }
    
    a:link,
    a:visited {
      color: azure;
      text-decoration: none;
    }
    
    .nav__list {
      position: relative;
    }
    
    .nav__item {
      position: relative;
      display: inline-block;
      padding: 10px 20px;
    }
    
    .nav__item:hover .drop-list {
      display: block;
    }
    
    .nav__link {
      border: none;
      font-family: helvetica;
      font-size: 16px;
      background-color: #ff4d4d;
    
      text-decoration: none;
      display: inline-block;
    }
    
    .drop-list {
      position: absolute;
      width: 100%;
      top: 40px;
      left: 0;
      background-color: #ff4d4d;
      color: azure;
      display: none;
    }
    
    .drop-list__item {
      padding: 5px;
    }

uj5u.com熱心網友回復：

您必須重組 ul & li，這將解決問題

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000;
}

p.heading {
  font-family: helvetica;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  background-color: #ccffff;
  padding: 10px;
  color: #000080;
}

.nav {
  width: 100%;
  height: 50px;
  background-color: #ff4d4d;
  float: left;
}

ul li {
  list-style: none;
  position: relative;
}

button.btn {
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  padding: 10px;
  height: 50px;
  background-color: #ff4d4d;
  color: azure;
}

button.btn:hover {
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  padding: 10px;
  height: 50px;
  background-color: #ccffff;
  color: #000;
}

button.drp {
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  padding: 10px;
  height: 50px;
  background-color: #ff4d4d;
  color: azure;
}

button.drp:hover {
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  padding: 10px;
  height: 50px;
  background-color: #ccffff;
  color: #000;
}

button.d {
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  padding: 10px;
  height: 50px;
  width: 150px;
  background-color: #ff4d4d;
  color: azure;
}

button.d:hover {
  text-align: center;
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  height: 50px;
  width: 150px;
  background-color: #ccffff;
  color: #000;
}

.li {
  display: none;
  position: absolute;
  border: none;
  font-family: helvetica;
  font-size: 16px;
  width: 130px;
  color: azure;
}

.li {
  display: none;
  position: absolute;
  border: none;
  font-family: helvetica;
  font-size: 16px;
  width: 130px;
  color: azure;
}


/*new styles from here*/

#drp:hover ul {
  display: block;
  margin-left: 200px;
  /* this should be the same width as the parent list item */
  margin-top: 50px;
  /* aligns top of sub menu with top of list item */
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div class="heading">
    <p class="heading">Heading</p>
  </div>
  <div class="nav">
    <ul id="nav">
      <!--I changed class to id-->
      <li><button class="btn"> Txt1 </button></li>
      <li><button class="btn"> Txt2 </button></li>
      <li><button class="btn"> Txt3 </button></li>
      <li><button class="btn"> Txt4 </button></li>
      <li id="drp"><button class="drp"> Txt5 </button>
        <!--opening of dropdown li-->
        <ul class="li">
          <!--opening of dropdown ul-->
          <li><button class="d">txt6</button></li>
          <li><button class="d">txt7</button></li>
        </ul>
        <!--closing of dropdown ul-->
      </li>
      <!--closing of dropdown li-->
    </ul>
    <!-- #nav closed-->

  </div>
</body>

</html>

uj5u.com熱心網友回復：

我稍微改變了 html 格式，洗掉了按鈕并添加了類名，使用 css flex-box 比正在使用的浮動更好。

css 部分

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    font-family: helvetica,sans-serif;
    box-sizing: border-box;
}
body{
    background: rgba(0, 0, 0, 1);
}
.heading{
    text-align: center;

    font-size: 2em;
    font-weight: 700;
    
    padding: 10px;

    background-color: #ccffff;
    color:#000080;
}
.menu_ul{
    /* float is rarely used flex anf grids are what is used */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
    background-color: #ff4d4d;
}
.menu_list_items{
    padding: 10px;
}
.menu_list_items a{
    font-size: 1em;

    color:azure;
}
.drpDown{
    display: none;
}
.menu_list_items:hover .drpDown{
    display: block;
}

現在對于html，我會說最好添加相對一目了然的類/ id名稱

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- add a link tag to import google fonts into the html file for the font support "helvetica" -->
    <title>Document</title>
</head>
<body>
    <section>
        <header>
            <h1 class="heading">Heading</h1>
        </header>
        <nav>
            <ul class="menu_ul">
                <li class="menu_list_items"><a href="#">Txt1</a></li>
                <li class="menu_list_items"><a href="#">Txt2</a></li>
                <li class="menu_list_items"><a href="#">Txt3</a></li>
                <li class="menu_list_items"><a href="#">Txt4</a></li>
                <li class="menu_list_items"><a href="#">Txt5</a>
                    <div class="drpDown">
                        <ul class="drp_dwn_ul">
                            <li><a href="#">Txt6</a></li>
                            <li><a href="#">Txt7</a></li>
                        </ul>
                    </div>
                </li>
            </ul> 
        </nav>
    </section>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401206.html

標籤：html css

上一篇：帶有ID屬性的CSS不適用于LARAVEL8

下一篇：輸入框多個要1個輸入框到右上角怎么辦？