使用CSS HOVER製作最簡單的下拉菜單

其實我是網絡開發新手，這個問題可以很容易，但請幫助我。可以幫助的夥計們。我試圖在按鈕上懸停時做出一些下拉菜單。有什麼不對？使用CSS HOVER製作最簡單的下拉菜單

.clicker { 
 
    border: none; 
 
    height: 30px; 
 
    width: 120px; 
 
    background-color: orange; 
 
    color: blue; 
 
    cursor: pointer; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
} 
 
.dropdownKeeper { 
 
    display: none; 
 
    position: relative; 
 
    top: 15px; 
 
    left: 150px; 
 
} 
 
button:hover .dropdownKeeper { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>a</title> 
 
     <link rel="stylesheet" type="text/css" href="style.css"> 
 
    </head> 
 
    <body> 
 
     <button class="clicker">Click Me</button> 
 
     <div class="dropdownKeeper"> 
 
      <a href="#">ajsghj</a> 
 
      <a href="#">ajsghj</a> 
 
      <a href="#">ajsghj</a> 
 
     </div> 
 
    </body> 
 
</html>

來源

2016-09-27 Aghasi Grigoryan

試試我的代碼。可能這會幫助你;-) –

.clicker{ 
 
\t border: none; 
 
\t height: 30px; 
 
\t width: 120px; 
 
\t background-color: orange; 
 
\t color: blue; 
 
\t cursor: pointer; 
 
\t border-radius: 5px; 
 
\t position: absolute; 
 
} 
 

 
#dropdownKeeper{ 
 
\t display: none; 
 

 
    top: 15px; 
 
    left: 150px; 
 
} 
 

 
button:hover + #dropdownKeeper{ 
 
\t display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>a</title> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
\t <button class="clicker">Click Me</button> 
 
\t <select class="form-control" style="float:right" id="dropdownKeeper" > 
 
         <option value="">--Select--</option> 
 
        </select> 
 

 

 
</body> 
 
</html>

來源

2016-09-27 12:35:15 Bharat

你可以這樣做：

button:hover~.dropdownKeeper{ 
     display: block; 
}

http://www.w3schools.com/css/css_combinators.asp

來源

2016-09-27 12:35:17

它的工作，但你能告訴我什麼是做符號「〜」？ –

http://www.w3schools.com/css/css_combinators.asp –

最好在css文件中使用classname，因爲你的網站應該有更多的按鈕。

button.clicker:hover + .dropdownKeeper { 
    display: block; 
}

來源

2016-09-27 12:45:51

.clicker { 
 
    border: none; 
 
    height: 30px; 
 
    width: 120px; 
 
    background-color: orange; 
 
    color: blue; 
 
    cursor: pointer; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
} 
 
.dropdownKeeper { 
 
    display: none; 
 
    position: relative; 
 
    top: 15px; 
 
    left: 0px; 
 
    background:grey; 
 
    width: 120px; 
 
    text-align:center; 
 
} 
 
button:hover~.dropdownKeeper{ 
 
     display: block; 
 
} 
 
.dropdownKeeper a{ 
 
    display:block; 
 
} 
 
button:hover .dropdownKeeper { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>a</title> 
 
     <link rel="stylesheet" type="text/css" href="style.css"> 
 
    </head> 
 
    <body> 
 
     <button class="clicker">Click Me</button><br/> 
 
     <div class="dropdownKeeper"> 
 
      <a href="#">ajsghj</a> 
 
      <a href="#">ajsghj</a> 
 
      <a href="#">ajsghj</a> 
 
     </div> 
 
    </body> 
 
</html>

來源

2016-09-27 12:49:00

使用CSS HOVER製作最簡單的下拉菜單

回答

相關問題