私はCSSトランジションコードを使用して、このテーマのデモのように簡単にドロップダウンナビゲーションを作成しようとしました:
しかし、私はコード化するために多くの方法を試しましたが、その効果を得ることができず、親にカーソルを合わせるとサブメニューが長く留まる必要があり、クリックできません!
どうもありがとう、これが私のウェブリンクです:http: //hxxa.info/
そして私が今持っているcssコード:
#menu_container { border-top: 1px solid #000; border-bottom: 15px solid #000; padding: 0px 0px; font-size: 13.5px; }
#menu_container ul { list-style-type: none; float: left; padding: 0px 0; }
#menu_container ul li { float: left; }
#menu_container ul li a { display: block; color: #000; text-decoration: none; padding: 5px 20px; margin: 0 0px; }
#menu_container ul li a:hover { background-color: #000; color: #fff; }
#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a { background-color: #000; color: #fff; }
#menu_container .cat_menu { border-left: 1px dotted #DDDDDD; }
#menu_container ul li ul {display: none;}
#menu_container ul li:hover ul {border-top: 1px solid #000; border-bottom: 15px solid #000; width:278px; display: inline-block;
position: absolute; z-index:999; background-color: #fff;}
#menu_container ul li ul li:hover { width: 278px; background-color: #000;}
#menu_container ul li ul li a:hover { background-color: #fff; color: #5e5e5e}