整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，今天我們來分享一下用純CSS實現下拉菜單效果的方法，首先我們看下效果圖，如果你看過上一期的內容（CSS之垂直導航條）那么你就會發現，兩者的外觀主題基本一樣，只不過結構稍微有些差別，所以今天我們主要講構造，樣式詳解請參考上期內容
1.首先創建一個多層導航列表，本次只選取列表項中“Services”和“Products”兩項為例。
2.基本設置：首先清除內邊距和外邊距，去掉列表默認的項目符號，關閉鏈接文本下劃線.，給列表一個邊框和背景顏色（根據自己需要）
* {margin:0;padding:0;}
ul.nav, ul.nav ul {list-style-type:none;
border：1px solid #486B02;
background-color:#8BD400;}
ul.nav a {text-decoration:none;}
3.為了使導航列表水平排列，我們可以浮動列表項，并給它設定一個寬度，為了確保下拉菜單與導航列表中的菜單項垂直對齊，需要將下拉菜單列表的寬度設置成與導航列表中列表項的寬度相同。
ul.nav li {float:left;
width:8em;}
ul.nav li ul {width:8em;}
4.關鍵部分：接下來我們設置下拉菜單的效果，在下拉菜單被激活之前它是隱藏狀態的，因此我們可以將下拉菜單列表的position屬性設置為absolute，然后給它定位到屏幕的左側外面。當鼠標懸停到某個導航列表項的時候，使用：hover，把下拉菜單的位置再改回來，這樣就可以實現下拉菜單的效果了。
ul.nav li {float:left;
width:8em;}
ul.nav li ul {width:8em;
position:absolute;left:-999em;}
ul.nav li:hover ul {left:auto;}
5.最后就是美化了，把導航鏈接設置為塊級元素，然后修改列表的外觀，設置背景顏色和斜面邊框效果，（此處可參考上期詳解內容）
/*斜面框效果*/
ul.nav a {display:block;
color:#2B3F00;
text-decoration:none;
padding:0.3em 1em;
border-right:1px solid #486B02;
border-left:1px solid #E4FFD3;}
ul.nav li li a {border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;
border-left:0;
border-right:0;}
/*移除重疊的邊框*/
ul.nav li a.re {border-right:0;}
ul.nav ul {border-bottom:0;}
/*鼠標懸停效果*/
ul a:hover {color:#E4FFD3;
background-color:#6DA203;}
PS：半夜寫的沒怎么檢查，如有漏洞請告知，謝謝！
elerik DevCraft包含一個完整的產品棧來構建您下一個Web、移動和桌面應用程序。它使用HTML和每個.NET平臺的UI庫，加快開發速度。Telerik DevCraft提供最完整的工具箱，用于構建現代和面向未來的業務應用程序。
Telerik DevCraft官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網
上下文菜單允許在屏幕上的任何地方添加浮動菜單，本文將為大家介紹使用這些工具的好處，以及如何將它們添加到.NET MAUI應用程序中。
目前 .NET 7已經發布了，在本文中我們將討論為了改進桌面應用程序的用戶體驗而實現的一個功能——上下文菜單！我們將一起學習一種非常簡單和直觀的方式實現它！
上下文菜單是浮動菜單，可以通過MenuFlyout附加到 .NET MAUI應用程序的任何視覺元素上，當用戶右擊分配了ContextMenu的控件時，就會顯示此信息。
注意：只有當它是桌面應用程序時，才會出現此菜單!
上下文菜單的作用
開發人員可以將這個ContextMenu添加到想要的所有視覺元素中。
這是一個浮動菜單，所以可以把它添加到屏幕上的任何地方，只需要添加一個視覺元素即可。
在開始編寫代碼之前，開發人員必須直觀地了解組成菜單的每個元素的技術名稱，這樣可以更容易地理解代碼結構。
在本文中桌面應用程序會有一個按鈕，用戶右鍵單擊它，ContextMenu就會出現。
首先，不要忘記創建支持 .NET 7的項目。
現在，這就是ContextMenu的代碼結構：
接下來，讓我們通過一些簡單的步驟來學習如何將上述結構轉換為代碼：
Step 1：選擇附加ContextMenu的控件。
在本例中，我們有一個按鈕，當右鍵單擊它時，會打開菜單。
<Button Text="Right click to here to see the options"
BackgroundColor="#E1C9FF">
<!-- Add here the code explained in the next step.-->
</Button>Step 2：添加ContextFlyout和MenuFlyout。
這些標記向控件指示它將包含一個ContextMenu。
<FlyoutBase.ContextFlyout>
<MenuFlyout>
<!-- Add here the code explained in the next step.-->
</MenuFlyout>
</FlyoutBase.ContextFlyout>Step 3：開始添加菜單項。
開發人員可以在這里添加三個元素:
MenuFlyoutItem：它是菜單項，其中包含將在項目中顯示的描述，開發人員添加所需的項目，如下例所示：
<MenuFlyoutItem Text="Preferences" />
<MenuFlyoutItem Text="Privacy Reporte" />
<!-- Add all the Items that you need -- >MenuFlyoutSeparator：它是水平分隔線，可以用于分類菜單的一組項目。(這并不是強制性的。)
<MenuFlyoutSeparator/>
<!-- Add all the separator that you need -- >MenuFlyoutSubItem：它允許開發人員為菜單添加更多層次結構，項目添加的方式與MenuFlyoutItem相同得益于此，開發人員可以添加一組派生自另一組的項目，還可以在App中添加任意多的子菜單。
<MenuFlyoutSubItem Text="Export from">
<MenuFlyoutItem Text="Bookmarks" />
<MenuFlyoutItem Text="Password" />
<MenuFlyoutSubItem Text="History">
<MenuFlyoutItem Text="Last Friday" />
<MenuFlyoutItem Text="Today" />
</MenuFlyoutSubItem>
</MenuFlyoutSubItem>
<!-- Add all the SubMenus that you need -- >最后，為了實現如圖所示的示例，并記住所學到的內容，必須擁有如下代碼：
<Button Text="Right click to here to see the options" BackgroundColor="#E1C9FF">
<FlyoutBase.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="About this App" />
<MenuFlyoutSeparator/>
<MenuFlyoutItem Text="Preferences" />
<MenuFlyoutItem Text="Privacy Reporte" />
<MenuFlyoutSeparator/>
<MenuFlyoutSubItem Text="Export from">
<MenuFlyoutItem Text="Bookmarks" />
<MenuFlyoutItem Text="Password" />
<MenuFlyoutSubItem Text="History">
<MenuFlyoutItem Text="Last Friday" />
<MenuFlyoutItem Text="Today" />
</MenuFlyoutSubItem>
</MenuFlyoutSubItem>
</MenuFlyout>
</FlyoutBase.ContextFlyout>
</Button>除了對每個項目都必須使用的Text屬性外，還有IconImageSource屬性選項，該選項允許開發人員向從菜單中選擇的項目添加圖標。
么是浮動塌陷？
當子元素設置浮動時，父元素中所有孩子盒子都是float，則父容器的高度為0。
1.在父親盒子中的最下邊添加一個空div盒子，并設置clear為相應的值，如果不清除塌陷，那么父元素高度為0，給ul設置高度就沒有效果。
clear常見取值如下：
left：清除左側浮動引起的塌陷；
right：清除右側浮動引起的塌陷；
both：清除左右兩側浮動引起的塌陷。
2.
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
