CSS3實現的水平標題菜單
發(fā)布時間:2021-04-14 16:24:00 作者:Dhanush Badge
我要評論

這篇文章主要介紹了CSS3實現的水平標題菜單的示例代碼,幫助大家更好的理解和學習使用CSS3制作網頁特效,感興趣的朋友可以了解下
實現效果:
實現代碼
html
<nav class="dropdownmenu"> <ul> <li><a href="http://www.jochaho.com/wordpress/">腳本之家</a></li> <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">jb51</a></li> <li><a href="#">Articles on HTML5 & CSS3</a> <ul id="submenu"> <li><a href="http://www.jochaho.com/wordpress/difference-between-svg-vs-canvas/">Difference between SVG vs. Canvas</a></li> <li><a href="http://www.jochaho.com/wordpress/new-features-in-html5/">New features in HTML5</a></li> <li><a href="http://www.jochaho.com/wordpress/creating-links-to-sections-within-a-webpage/">Creating links to sections within a webpage</a></li> </ul> </li> <li><a href="http://www.jochaho.com/wordpress/category/news/">News</a></li> <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">Contact Us</a></li> </ul> </nav>
CSS3
.dropdownmenu ul, .dropdownmenu li { margin: 0; padding: 0; } .dropdownmenu ul { background: gray; list-style: none; width: 100%; } .dropdownmenu li { float: left; position: relative; width:auto; } .dropdownmenu a { background: #30A6E6; color: #FFFFFF; display: block; font: bold 12px/20px sans-serif; padding: 10px 25px; text-align: center; text-decoration: none; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .dropdownmenu li:hover a { background: #000000; } #submenu { left: 0; opacity: 0; position: absolute; top: 35px; visibility: hidden; z-index: 1; } li:hover ul#submenu { opacity: 1; top: 40px; /* adjust this as per top nav padding top & bottom comes */ visibility: visible; } #submenu li { float: none; width: 100%; } #submenu a:hover { background: #DF4B05; } #submenu a { background-color:#000000; }
以上就是CSS3實現的水平標題菜單的詳細內容,更多關于CSS3 標題菜單的資料請關注腳本之家其它相關文章!
相關文章
一套CSS3的新擬物風格UI元素(復選框/按鈕/菜單/搜索框/時鐘)
這是基于CSS3和HTML5的新擬物風格UI設計元素,包含單選/復選框、按鈕、Tab菜單、搜索框,另外還有時鐘等表單元素,歡迎下載2021-03-23- 這是一款基于Tailwind CSS3的后臺管理系統菜單,提供3組漂亮的風格主題,非常適合為網站或者App的后臺系統提供主菜單導航。感興趣的朋友跟隨小編一起看看吧2021-01-21
- 這篇文章主要介紹了HTML+CSS3+JS 如何實現下拉菜單,幫助大家更好的理解和使用CSS3特效,感興趣的朋友可以了解下2020-11-25
- 這篇文章主要介紹了CSS3實現菜單懸停效果的示例代碼,幫助大家更好的制作CSS3特效,美化網頁,感興趣的朋友可以了解下2020-11-17
- CSS3懸停展開旋轉菜單特效代碼是一款鼠標移動到頭像上就會展開旋轉菜單特效。2020-11-16
- CSS3左側豎直分類導航菜單是一款白色,黑色,藍色三款不同色調的左側豎直導航菜單,帶圖標和搜索框的分類導航菜單ui布局。2020-09-09
- 漂亮的css3功能菜單多級,圖標庫使用cdn,可以替換為本地的。非常實用,喜歡的朋友快來腳本之家下載吧2020-07-20
- 是一段基于js+css3實現的藍色樣式手風琴上下收縮展開菜單代碼,非常簡潔大方,適應于網站后臺使用,例如:會員中心等等,歡迎有興趣的朋友前來下載2020-07-07
- 網頁功能菜單CSS3特效是一款鼠標右鍵顯示功能菜單列表,支持子菜單展開特效。歡迎下載使用2020-07-05
- 這篇文章給大家分享一款特效源碼是基于css3實現鼠標懸停扇形導航菜單,當鼠標放在菜單上會自動展示出菜單,非常不錯,感興趣的朋友前來下載源碼吧2020-06-19