マウスホバーでメニューを表示させたいです。

現在レシピサイトのコーディングを行っているのですが、メニューの”レシピを探す”の所にカーソルを合わせるとこちらのGIFのように和食、洋食のメニューが表示されるようにしたいのですがうまくいきません

行った対策
・<li class="open_menu">レシピを探す</li>の部分にマウスカーソルを合わせると

が表示されるようにクラス"sub_menu"はdisplay: none;でこちらの疑似クラスで行っています。

.open_menu:hover + .sub_menu ul{
display: block;
}

PHP
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <!-- Basic Page Needs
5  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
6  <meta charset="utf-8">
7  <title><?php bloginfo('name'); ?></title>
8  <meta name="description" content="">
9  <meta name="author" content="SHUNSUKE TAKAGI">
10  <meta name="viewport" content="width=device-width, initial-scale=1">
11
12<!-- CSS
13  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
14  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); //使用中テーマのスタイルシートURLを出力 ?>">
15  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); //使用中テーマディレクトリのURLを出力 ?>/css/normalize.css">
16  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); //使用中テーマディレクトリのURLを出力 ?>/css/skeleton.css">
17  <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); //ピングバックURLを出力 ?>">
18
19<!-- jQuery -->
20  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
21
22<!-- Js
23  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
24  <script src="<?php echo get_template_directory_uri(); //使用中テーマディレクトリのURLを出力 ?>/cooking.js"></script>
25    <?php wp_head(); //wp_headはテーマの</head>タグ直前に必ず挿入します ?>
26    </head>
27    <body>
28        <header>
29        <div id="header_in" class="container">
30            <div class="row">
31                <div class="u-max-full-width three columns">
32                    <div id="sp_logo">
33                        <a href="<?php echo esc_url(home_url('/')); //トップページのURLを出力 ?>"><img class="u-max-full-width" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" alt="logo"></a>
34                    </div>
35                    <!--sp_logo-->
36                    <div id="pc_logo">
37                        <a href="<?php echo esc_url(home_url('/')); //トップページのURLを出力 ?>"><img class="u-max-full-width" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" alt="logo"></a>
38                    </div>
39                    <!--pc_logo-->
40                </div>
41                <div class="navi">
42                    <div class="sp_navi u-max-full-width">
43                        <ul class="sp_icon">
44                            <li><a href="https://twitter.com/TKG01303575"><img class="u-max-full-width" src="<?php echo get_template_directory_uri(); ?>/images/twitter.jpg" alt="twitter"></a></li>
45                            <li><a href="https://www.instagram.com/tkgcurrybu/?hl=ja"><img class="u-max-full-width" src="<?php echo get_template_directory_uri(); ?>/images/instagram.jpg" alt="instagram"></a></li>
46                            <li><a href="https://note.com/carrybu"><img class="u-max-full-width" src="<?php echo get_template_directory_uri(); ?>/images/note.jpg" alt="note"></a></li>
47                            <li><a href="#"><img id="sp_navi_btn" class="u-max-full-width" src="<?php echo get_template_directory_uri(); ?>/images/humberger_list.jpg" alt="メニュー"></a></li>
48                        </ul>
49                        <ul class="sp_navi_li">
50                            <li><a href="<?php echo esc_url(home_url('/')); //トップページのURLを出力 ?>">レシピトップ</a></li>
51                            <li><a href="#">レシピを探す</a></li>
52                            <li><a href="#">料理の基本</a></li>
53                            <li><a href="#">コラム</a></li>
54                        </ul>
55                    </div>
56                    <!-- sp_navi -->
57                    <div class="pc_navi">
58                        <div id="search_inner">
59                            <img src="<?php echo get_template_directory_uri(); ?>/images/search.jpg" alt="検索バー">
60                        </div>
61                         <!--検索バー-->
62                        <div class="pc_icon">
63                            <ul>
64                                <li><a href="https://twitter.com/TKG01303575"><img class="u-max-full-width" src="<?php echo get_template_directory_uri(); ?>/images/twitter.jpg" alt="twitter"></a></li>
65                                <li><a href="https://www.instagram.com/tkgcurrybu/?hl=ja"><img class="u-max-full-width" src="<?php echo get_template_directory_uri(); ?>/images/instagram.jpg" alt="instagram"></a></li>
66                                <li><a href="https://note.com/carrybu"><img class="u-max-full-width" src="<?php echo get_template_directory_uri(); ?>/images/note.jpg" alt="note"></a></li>
67                            </ul>    
68                        </div>
69                        <div class="clearfix"></div>
70                         <!--sns-->
71                    </div>
72                    <!-- pc_navi -->
73                </div>
74            </div>
75            <!-- row -->
76        </div>
77        <div class="pc_navi_box">
78            <ul class="pc_navi_li">
79                <li><a href="<?php echo esc_url(home_url('/')); //トップページのURLを出力 ?>">レシピトップ</a></li>
80                <li class="open_menu">レシピを探す</li>
81                <li><a href="#">料理の基本</a></li>
82                <li><a href="<?php echo esc_url(home_url('/column/')); ?>">コラム</a></li>
83            </ul>
84        </div>
85        <div class="sub_menu">
86                        <ul>
87                        <li><a>和食</a></li>
88                        <li><a>洋食</a></li>
89                        </ul>    
90                    </div>
91        <!-- header_in -->
92        </header>
93        
94

css
1@media (min-width: 551px) {
2    #sp_logo{
3        display: none;            /*spデザインを非表示*/
4    }
5    #pc_logo{
6        width: 110%;
7    }
8    
9    #search_inner{
10        display: inline-block;
11        text-align: center;
12    }
13    
14    #search_inner img{
15        width: 70%;
16        margin-left: 7%
17    }
18    
19    .pc_icon{
20        float: right;
21        margin-bottom: 0;
22        display: inline-block;
23        
24    }
25    .pc_icon img{
26        width: 70%
27    }
28    
29    .sp_navi{
30        display: none;            /*spデザインを非表示*/
31    }
32    
33    .pc_icon{
34        list-style: none;
35    }
36    
37    .pc_icon li{
38        display: inline-block;
39        margin-bottom: 0;
40    }
41    .pc_icon ul{
42        margin-bottom: 0;
43    }
44    
45    .pc_navi_box{
46        border-top: 1px solid #887f69;
47        border-bottom: 1px solid #887f69;
48        margin-top: 1%;
49    }
50    
51    .sub_menu{
52        position: absolute;
53        z-index: 10;
54        left: 35%;
55    }
56    .sub_menu ul{
57        background-color: #f8f8f8;
58        margin-left: 20%;
59        width: 400%;
60        display: none;
61    }
62    .sub_menu ul li{
63        display: block;
64        text-align: center;
65    }
66    .sub_menu li{
67        margin: 1%;
68    }
69    .sub_menu a{
70        font-weight: lighter;
71        color: #000;
72    }
73    
74    .open_menu:hover + .sub_menu ul{
75      display: block;
76    }
77    
78    .open_menu{
79        color: red;
80    }
81    
82}
83/*pcデザイン*/

m.ts10806

2020/06/29 03:38

PHPは本件とは直接の関係はないのでは。見た感じだと「WordPress」のほうがタグとしては適当に思います

行動規範の内容に同意します

回答1件

ベストアンサー

open_menuとsub_menuが構造的に別なのでCSSのみでは難しいですね
またPHPは直接関係ないので基本的にはHTMLとして質問したい方がいいです

投稿2020/06/29 03:26

yambejp

総合スコア116724

yambejp

2020/06/29 03:27

構造を変えられるならこうするのが普通 <style> .open_menu .sub_menu{display:none} .open_menu:hover .sub_menu{display:initial} </style> <div class="pc_navi_box"> <ul class="pc_navi_li"> <li><a href="#">レシピトップ</a></li> <li class="open_menu">レシピを探す <div class="sub_menu"> <ul> <li><a>和食</a></li> <li><a>洋食</a></li> </ul> </div> </li> <li><a href="#">料理の基本</a></li> <li><a href="#">コラム</a></li> </ul> </div>