css菜單下拉菜單
CSS | 創建下拉菜單 (CSS | Creating Dropdown)
Trivia:
瑣事：
We know the importance of navigation bar on our webpage, we know the importance of a list of items too on our webpage but what is the importance of dropdown in web pages?
我們知道網頁上導航欄的重要性，也知道我們網頁上項目列表的重要性，但是網頁下拉菜單的重要性是什么？
Well, there are too many to mention but let's discuss a few of them.
好吧，有太多事情要提，但讓我們討論其中的一些。
First, the dropdown is a packed arrangement of a list of items which saves space for our website.
首先， 下拉列表是項目列表的緊湊排列，可以節省我們網站的空間。
The dropdown is a stylish way to display your options on the web page as it also increases the curiosity of the users to go and click on the dropdown option.
該下拉菜單是一種在網頁上顯示您的選項的時尚方式，因為它還增加了用戶單擊該下拉菜單選項的好奇心。
Therefore, the dropdown option is very essential while creating and designing a web page.
因此，在創建和設計網頁時， 下拉選項非常重要。
However one must be very careful while creating a dropdown option as it is a common tendency to mix up the options when someone is new and is learning CSS.
但是，在創建下拉選項時必須非常小心，因為在新手學習CSS時，混合選項是一種常見的趨勢。
The prime tip to create a dropdown option is that one should be clear in what all options he/she may require to display on the web page.
創建下拉選項的主要提示是，應該明確他/她可能需要在網頁上顯示的所有選項。
Many users do not tend to go through the entire web page rather they always look for a dropdown option that would contain the links of the shortcuts.
許多用戶并不傾向于瀏覽整個網頁，而是總是尋找包含快捷方式鏈接的下拉選項。
There to create a dropdown with quick links as menu items are good practice and thus happy users!
在那里創建帶有快速鏈接的下拉菜單，因為菜單項是一種很好的習慣，因此用戶滿意！
Now let's talk about how to create a dropdown option using CSS,
現在讓我們談談如何使用CSS創建下拉菜單選項，
基本下拉 (Basic DropDown)
For HTML:
對于HTML：
Step 1: Create a button or a similar option that would open your dropdown.
第1步 ：創建一個按鈕或類似選項，以打開您的下拉菜單。
Step 2: Use a container element for e.g. <div> to help you create a dropdown option and then you can add anything inside it whatever you want to display to the users.
第2步 ：使用一個容器元素(例如<div>)來幫助您創建一個下拉選項，然后您可以在其中添加任何想要顯示給用戶的內容。
Step 3: Wrap the <div> element around the elements which would help in positioning the dropdown content correctly with the CSS.
步驟3 ：將<div>元素環繞在元素周圍，這將有助于使用CSS正確放置下拉內容。
For CSS:
對于CSS：
The dropdown class uses various properties. One of them is position:relative which would be needed in placing the dropdown content right below the dropdown option.
下拉類使用各種屬性。 其中之一是position：relative ，將下拉菜單內容放置在下拉選項正下方時需要使用。
Step 4: The dropdown contains the actual dropdown content which would be displayed only when the user hovers over it.
步驟4 ：下拉菜單包含實際的下拉菜單內容，僅當用戶將鼠標懸停在其上時才會顯示。
Step 5: If you want the width of your dropdown content to be as equally wide as the dropdown button then you must change the width to 100% and also enable overflow:auto so that your content will be able to scroll on small screens.
第5步 ：如果您希望下拉內容的寬度與下拉按鈕的寬度相同 ，則必須將寬度更改為100％ ，還必須啟用overflow：auto，這樣您的內容才能在小屏幕上滾動。
You can always change the alignment of your dropdown by using the right-aligned dropdown. To make your content go from right to left you must set right:0.
您始終可以使用right-aligned dropdown更改下拉菜單的對齊方式 。 要使內容從右到左，您必須設置right：0 。
Syntax:
句法：
.dropdown-content {
right: 0;
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #3eff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #3eff;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3eff;
}
</style>
</head>
<body>
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
Output
輸出量
In the above example, styles have been set to the dropdown property.
在上面的示例中，樣式已設置為dropdown屬性 。
翻譯自: https://www.includehelp.com/code-snippets/creating-dropdown-in-css.aspx
css菜單下拉菜單
![C++ 內存基本構件new [] /delete []的意義、內存泄漏原因、VC下cookie的基本布局](http://pic.xiahunao.cn/C++ 內存基本構件new [] /delete []的意義、內存泄漏原因、VC下cookie的基本布局)
--給表弟的建議)
![1704：baoge的洗漱難題[黃]](http://pic.xiahunao.cn/1704：baoge的洗漱難題[黃])
