Result
jQuery
$(document).ready(function() { //ホバーイベント $("ul#topnav li").hover(function() { //背景カラーを与える $(this).css({ 'background': '#eee' }); //li要素からspan要素を探して表示する $(this).find("span").show(); }, function() { //マウスが外れたら非表示に戻す $(this).css({ 'background': 'none' }); $(this).find("span").hide(); });}); |
css
ul#topnav { margin-bottom: 50px; padding: 0; float: left; width: 700px; list-style: none; position: relative; font-size: 1.2em; background: #ffa6a6 !important;}ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #9a9a9a;}ul#topnav li a { padding: 10px 15px; display: block; color: #444; text-decoration: none;}ul#topnav li:hover { background: #eee ; }ul#topnav li span { float: left; padding: 15px 0; position: absolute; left: 0; top:35px; display: none; width: 700px; background: #eee; color: #000;}ul#topnav li:hover span { display: block; }ul#topnav li span a { display: inline; }ul#topnav li span a:hover {text-decoration: underline;} |
html
<ul id="topnav"> <li><a href="#">タブ1</a> <span><a href="#">タブ1-1</a>|<a href="#">タブ1-2</a></span> </li> <li><a href="#">タブ2</a> <span><a href="#">タブ2-1</a>|<a href="#">タブ2-2</a>|<a href="#">タブ2-3</a></span> </li> <li><a href="#">タブ3</a> <span><a href="#">タブ3-1</a>|<a href="#">タブ3-2</a>|<a href="#">タブ3-3</a>|<a href="#">タブ3-4</a></span> </li> <li><a href="#">タブ4</a></li> </ul> |
via
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
