CSS三級下拉菜單是指有三層結構的下拉菜單,通常可以用于網站的導航欄或者子菜單的展示。下面我們介紹一下如何編寫CSS三級下拉菜單的代碼。
/* 首先我們需要定義菜單容器的樣式 */ .menu{ position: relative; display: inline-block; } /* 定義一級菜單的樣式 */ .menu >ul{ padding: 0; margin: 0; list-style: none; } /* 定義一級菜單項的樣式 */ .menu >ul >li{ float: left; position: relative; } /* 當鼠標移動到一級菜單項上時,顯示二級菜單 */ .menu >ul >li:hover >ul{ display: block; } /* 定義二級菜單項的樣式 */ .menu >ul >li >ul{ display: none; position: absolute; top: 100%; left: 0; padding: 0; margin: 0; list-style: none; } /* 定義二級菜單項的hover樣式 */ .menu >ul >li >ul >li:hover >ul{ display: block; } /* 定義三級菜單項的樣式 */ .menu >ul >li >ul >li >ul{ display: none; position: absolute; top: 0; left: 100%; padding: 0; margin: 0; list-style: none; }
總的來說,通過以上代碼的定義,我們可以實現一個基本的CSS三級下拉菜單。
上一篇extjs內嵌vue