1. 首頁
  2. 問答
  3. 下拉菜單（懸停）

下拉菜單（懸停）

2017-01-30 182 views
0

我不太確定我在這裏做錯了什麼。當某人懸停在導航項目上時（本例中爲「產品」鏈接），我需要一個標準的下拉導航塊。我沒有使用無序列表，只是鏈接。我設法以合適的格式將所有元素放在正確的位置，看起來不錯。唯一的問題是，當我將鼠標懸停在主菜單按鈕上時，我無法看到子菜單？無法弄清楚爲什麼，這對我來說很好。我預覽谷歌瀏覽器下拉菜單（懸停）

<!DOCTYPE html> 

<html> 
    <head> 

     <title>Food Supply Company</title> 

     <link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css"> 

     <link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet"> 

    </head> 

    <body> 

    <div class="container"> 

     <div class="title"> 
     <h1>Food Supply Company</h1> 
     </div> 

     <div class="menunav"> 
      <a href="#" class="Products">Products</a> 
      <a href="#">About Us</a> 
      <a href="#">Contacts</a> 
      </div> 

     <div class="productsnav"> 
      <a href="#">Fruits</a> 
      <a href="#">Vegetables</a> 
      <a href="#">Dry Foods</a> 
      <a href="#">Spices</a> 
     </div> 

    </div> 

</body> 

</html>

的CSS樣式表

*{ 
    Margin:0; 
    background-color: aliceblue; 
    padding:0 
} 

.container{ 
    width: 900px; 
    margin:auto; 
    height:900px; 

} 

h1{ 
    padding:20px 0px 10px 0px; 
    background-color:bisque; 
    text-align: center; 
    font-family: 'Verdana',sans-serif; 
    font-weight: 700; 
    font-size:50px; 
    letter-spacing: 2px; 
    color:coral; 
    text-shadow: 2px 2px brown; 
    Width: 100%; 
    background-color:bisque; 

} 

a{ 
    text-decoration: none; 
    text-align: center; 
    font-family: 'verdana', sans-serif; 
    width:33%; 
    text-align: center; 
    list-style: none; 
    padding: 5px 0px 5px 0px; 
    background-color: coral; 
    color: bisque; 
    box-shadow: 2px 2px 2px rgb(40,0,0); 
} 

a:hover{ 
    font-family: 'verdana', sans-serif; 
    background-color: bisque; 
    color: coral; 
} 

.menunav a{ 
    display:inline-block; 
    margin-top:5px 
} 

.productsnav{ 
    width:33%; 
    margin-bottom:3px; 
} 

.productsnav a{ 
    width:100%; 
    display: none; 
    margin-top: 5px; 
} 

.Products:hover .productsnav a{ 
    display:block; 
}

最後幾個在CSS代碼是什麼似乎是錯的，但我無法弄清楚究竟是什麼不妥。我已經觀看了一些視頻，並已格式化的CSS代碼以幾種不同的方式顯示子菜單，但我無法弄清楚。

感謝

來源

2017-01-30 shea

+0

爲什麼你不使用'ul'或'ol'。 –

回答

0

你真的應該考慮使用無序列表，以使其更容易顯示您的子菜單。

我在沒有其他菜單項的情況下快速處理了您的問題。

https://plnkr.co/edit/pBtp39zKpRL5YqCZvxK0?p=preview

我改變你的HTML和CSS以下幾點：

HTML

<html> 
    <head> 
     <title>Food Supply Company</title> 
     <link href="style.css" rel="stylesheet" text="text/css"> 
     <link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet"> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="title"> 
     <h1>Food Supply Company</h1> 
     </div> 
     <div class="menunav"> 
     <ul> 
      <li class="products"> 
      <a href="#">Products</a> 
      <ul class="productsnav"> 
       <li><a href="#">Fruits</a></li> 
       <li><a href="#">Vgetables</a></li> 
       <li><a href="#">Dry Foods</a></li> 
       <li><a href="#">Spices</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </body> 
</html>

CSS

*{ 
    Margin:0; 
    background-color: aliceblue; 
    padding:0 
} 

.container{ 
    width: 900px; 
    margin:auto; 
    height:900px; 

} 

h1{ 
    padding:20px 0px 10px 0px; 
    background-color:bisque; 
    text-align: center; 
    font-family: 'Verdana',sans-serif; 
    font-weight: 700; 
    font-size:50px; 
    letter-spacing: 2px; 
    color:coral; 
    text-shadow: 2px 2px brown; 
    Width: 100%; 
    background-color:bisque; 

} 

a{ 
    text-decoration: none; 
    text-align: center; 
    font-family: 'verdana', sans-serif; 
    width:33%; 
    text-align: center; 
    list-style: none; 
    padding: 5px 0px 5px 0px; 
    background-color: coral; 
    color: bisque; 
    box-shadow: 2px 2px 2px rgb(40,0,0); 
} 

ul { 
    display: inline-block; 
} 

ul li a{ 
    width: 100%; 
} 

a:hover{ 
    font-family: 'verdana', sans-serif; 
    background-color: bisque; 
    color: coral; 
} 

.menunav a{ 
    display:inline-block; 
    margin-top:5px 
} 

.productsnav{ 
    width:33%; 
    margin-bottom:3px; 
    display: none; 
} 

.productsnav a{ 
    width:100%; 
    margin-top: 5px; 
} 

.products:hover .productsnav{ 
    display:block; 
    position: absolute; 
}

請將其更改爲所需的樣式。

來源

2017-01-30 13:09:27 FioleNana

0

是的，謝謝，我已經做了，現在看起來好多了。我現在的問題是，當子菜單彈出後，下一個主菜單項被推到子菜單的底部。此外，當我嘗試將鼠標懸停時，子菜單出現後，只要我的鼠標從主導航項中移除，就會立即消失。

<!DOCTYPE html> 

<html> 
    <head> 

     <title>Food Supply Company</title> 

     <link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css"> 

     <link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet"> 

    </head> 

    <body> 

     <div class="container"> 

      <div class="title"> 
      <h1>Food Supply Company</h1> 
      </div> 

      <ul class="menunav"> 
       <ul class="Products"> 
       <li><a href="#" >Products</a> 
        <ul class="productsnav"> 
        <li><a href="#">Fruits</a></li> 
        <li><a href="#">Vegetables</a></li> 
        <li><a href="#">Dry Foods</a></li> 
        <li><a href="#">Spices</a></li> 
        </ul></li></ul> 
       <ul class="AboutUs"> 
       <li><a href="#" >About Us</a> 
        <ul class="aboutusnav"> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Mission</a></li> 
        <li><a href="#">Personel</a></li> 
        </ul></li></ul> 
       <ul class="Contact"> 
       <li><a href="#" >Contact</a> 
        </li></ul> 
       </ul> 





     </div> 

</body> 

</html>

CSS

*{ 
    Margin:0; 
    background-color: aliceblue; 
    padding:0 
} 

.container{ 
    width: 900px; 
    margin:auto; 
    height:900px; 

} 

h1{ 
    padding:20px 0px 10px 0px; 
    background-color:bisque; 
    text-align: center; 
    font-family: 'Verdana',sans-serif; 
    font-weight: 700; 
    font-size:50px; 
    letter-spacing: 2px; 
    color:coral; 
    text-shadow: 2px 2px brown; 
    Width: 100%; 
    background-color:bisque; 

} 

a{ 
    text-decoration: none; 
    text-align: center; 
    font-family: 'verdana', sans-serif; 
    width:33%; 
    text-align: center; 
    list-style: none; 
    padding: 5px 0px 5px 0px; 
    background-color: coral; 
    color: bisque; 
    box-shadow: 2px 2px 2px rgb(40,0,0); 
} 

a:hover{ 
    font-family: 'verdana', sans-serif; 
    background-color: bisque; 
    color: coral; 
} 

li{ 
    list-style-type:none; 
} 

.menunav{ 
    margin-bottom:3px; 
} 

.menunav a{ 
    float:left; 
    margin-top:5px; 
    margin-right:3px; 
} 

.productsnav, .aboutusnav{ 
    width:33%; 
    margin-bottom:3px; 
} 

.productsnav a, .aboutusnav a{ 
    width:100%; 
    display: none; 
    margin-top: 5px; 
    } 

.Products:hover .productsnav a{ 
    display:block; 
} 

.aboutusnav{ 
    margin-left:33.3%; 
} 

.AboutUs:hover .aboutusnav a{ 
    display:block; 
}

來源

2017-01-30 13:49:37 shea

0

如果你想使用CSS hover樣式爲您的下拉菜單中，那麼它必須是懸停元素的一個子項。 否則，您可以在此下拉菜單中使用jQuery/javascript。 我有另一個想法來解決這個問題。請檢查此鏈接：

 *{ 
 
    Margin:0; 
 
    background-color: aliceblue; 
 
    padding:0 
 
} 
 

 
.container{ 
 
    width: 900px; 
 
    margin:auto; 
 
    height:900px; 
 

 
} 
 

 
h1{ 
 
    padding:20px 0px 10px 0px; 
 
    background-color:bisque; 
 
    text-align: center; 
 
    font-family: 'Verdana',sans-serif; 
 
    font-weight: 700; 
 
    font-size:50px; 
 
    letter-spacing: 2px; 
 
    color:coral; 
 
    text-shadow: 2px 2px brown; 
 
    Width: 100%; 
 
    background-color:bisque; 
 

 
} 
 

 
a{ 
 
    text-decoration: none; 
 
    text-align: center; 
 
    font-family: 'verdana', sans-serif; 
 
    width:33%; 
 
    text-align: center; 
 
    list-style: none; 
 
    padding: 5px 0px 5px 0px; 
 
    background-color: coral; 
 
    color: bisque; 
 
    box-shadow: 2px 2px 2px rgb(40,0,0); 
 
} 
 

 
a:hover{ 
 
    font-family: 'verdana', sans-serif; 
 
    background-color: bisque; 
 
    color: coral; 
 
} 
 

 
.menunav a{ 
 
    display:inline-block; 
 
    margin-top:5px 
 
} 
 

 
.productsnav{ 
 
    width:100%; 
 
    margin-bottom:3px; 
 
    display: none; 
 
    position:absolute; 
 
} 
 
.Products{ 
 
    display:inline-block; 
 
    width:33%; 
 
    position:relative; 
 
} 
 
.Products a{ 
 
    display:block; 
 
    width:100%; 
 
} 
 
.Products:hover .productsnav{ 
 
    display:block; 
 
}
<html> 
 
    <head> 
 

 
     <title>Food Supply Company</title> 
 

 
     <link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css"> 
 

 
     <link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet"> 
 

 
    </head> 
 

 
    <body> 
 

 
    <div class="container"> 
 

 
     <div class="title"> 
 
     <h1>Food Supply Company</h1> 
 
     </div> 
 

 
     <div class="menunav"> 
 
      <div class="Products"> 
 
       <a href="#">Products</a> 
 
       <div class="productsnav"> 
 
        <a href="#">Fruits</a> 
 
        <a href="#">Vegetables</a> 
 
        <a href="#">Dry Foods</a> 
 
        <a href="#">Spices</a> 
 
       </div> 
 
      </div> 
 
      <a href="#">About Us</a> 
 
      <a href="#">Contacts</a> 
 
     </div> 
 

 
    </div> 
 

 
</body>

http://codepen.io/shiplo_R/pen/VPyMzp

此外，您還可以添加一些動畫顯示的下拉菜單中的順利瞬間「顯示：無」。

來源

2017-01-30 13:50:19

0

你可以試試這個

https://jsfiddle.net/uhg84d8d/

HTML：

<html> 
    <head> 
     <title>Food Supply Company</title> 
     <link href="style.css" rel="stylesheet" text="text/css"> 
     <link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet"> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="title"> 
     <h1>Food Supply Company</h1> 
     </div> 
     <div class="menunav"> 
     <ul> 
      <li class="products"> 
      <a href="#">Products</a> 
      <ul class="productsnav"> 
       <li><a href="#">Fruits</a></li> 
       <li><a href="#">Vgetables</a></li> 
       <li><a href="#">Dry Foods</a></li> 
       <li><a href="#">Spices</a></li> 
      </ul> 
      </li> 
      <li> 
       <a href="#">About Us</a> 
      </li> 
      <li> 
      <a href="#">Contacts</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </body> 
</html>

CSS

*{ 
    Margin:0; 
    background-color: aliceblue; 
    padding:0 
} 

.container{ 
    width: 900px; 
    margin:auto; 
    height:900px; 

} 

h1{ 
    padding:20px 0px 10px 0px; 
    background-color:bisque; 
    text-align: center; 
    font-family: 'Verdana',sans-serif; 
    font-weight: 700; 
    font-size:50px; 
    letter-spacing: 2px; 
    color:coral; 
    text-shadow: 2px 2px brown; 
    Width: 100%; 
    background-color:bisque; 

} 

a{ 
    text-decoration: none; 
    text-align: center; 
    font-family: 'verdana', sans-serif; 
    width:33%; 
    text-align: center; 
    list-style: none; 
    padding: 5px 0px 5px 0px; 
    background-color: coral; 
    color: bisque; 
    box-shadow: 2px 2px 2px rgb(40,0,0); 
} 
    .menunav { 
     width: 100%; 
     float: left; 
    } 
.menunav ul { 
    width:100%; 
    float: left; 
    margin: 0px; 
} 
.menunav ul li{ 
    list-style: none; 
    float:left; 
    width: 33.3%; 
} 
.menunav ul li a{ 
    width: 100%; 
} 

.menunav ul li a:hover{ 
    font-family: 'verdana', sans-serif; 
    background-color: bisque; 
    color: coral; 
} 

.menunav ul li a{ 
    display:inline-block; 
    margin-top:5px 
} 

.menunav ul li .productsnav{ 
    width:33%; 
    margin-bottom:3px; 
    display: none; 
} 

.menunav ul li .productsnav li{ 
    width:100%; 
    margin-top: 5px; 
    float: left; 
} 
    .menunav ul li .productsnav li a{ 
    width:100%; 
    margin-top: 5px; 
    float: left; 
} 

.menunav ul li.products:hover .productsnav{ 
    display:block; 
    position: absolute; 
    width: 300px; 
}

然後它會工作... :)

來源

2017-01-30 13:59:28

相關問題

 相關問題