マウスホバーで開かれるサブメニューがクリックできない

解決したいこと：マウスホバーで開かれるサブメニューがクリックできないので解決したいです。原因としてはサブメニューをクリックしようとすると疑似クラスhoverの範囲から外れてしまいサブメニューの表示が消えてしまうということはわかるのですが解決策がわかりませんお願いします。問題のGIF

HTML
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">レシピを探す
81                <div class="sub_menu">
82                    <ul>
83                    <li><a href="<?php echo esc_url(home_url('/category/japanese_list/')); //和食一覧のURLを出力 ?>">和食</a></li>
84                    <li><a href="<?php echo esc_url(home_url('/category/western_list/')); //洋食一覧のURLを出力 ?>">洋食</a></li>
85                    </ul>    
86                </div>
87                </li>
88                <li><a href="#">料理の基本</a></li>
89                <li><a href="<?php echo esc_url(home_url('/column/')); ?>">コラム</a></li>
90            </ul>
91        </div>
92        <?php if(is_front_page()): ?>
93        <?php else: ?>
94        <ul class="breadcrumb clearfix">
95            <!-- ここからパンくずナビ -->
96            <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
97            <?php if(function_exists('bcn_display'))
98            {
99            bcn_display();
100            }?>
101          </div>
102            <!-- パンくずナビここまで -->
103        </ul>
104        <?php endif;?>
105        <!-- header_in -->
106        </header>
107        
108

CSS
1.sub_menu{
2        position: absolute;
3        z-index: 10;
4        left: 35%;
5    }
6    .sub_menu ul{
7        background-color: #efefef;
8        margin-left: 20%;
9        width: 400%;
10        display: none;
11    }
12    .sub_menu ul li{
13        display: block;
14        text-align: center;
15    }
16    .sub_menu li{
17        margin: 0;
18    }
19    .sub_menu a{
20        font-weight: lighter;
21        color: #000;
22    }
23    
24    .open_menu:hover .sub_menu ul{
25      display: block;
26    }
27

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

回答1件

ベストアンサー

hoverの質問ならphpなど無駄な情報が多すぎます

open_menuにsub_menuが構造として保持されているのですから
open_menuから外れなければsub_menuにたどり着けます
sub_menuがabsoluteなので全然違う場所に行ってしまえばどうしようもないです

css
1<style>
2.sub_menu{
3  position: absolute;
4  z-index: 10;
5  left: 35%;
6}
7.sub_menu ul{
8  background-color: #efefef;
9  margin-left: 20%;
10  width: 400%;
11  display: none;
12}
13.sub_menu ul li{
14  display: block;
15  text-align: center;
16}
17.sub_menu li{
18  margin: 0;
19}
20.sub_menu a{
21  font-weight: lighter;
22  color: #000;
23}
24
25.open_menu:hover .sub_menu ul{
26  display: block;
27}
28.open_menu{
29  background-Color:yellow;
30}
31</style>
32<div class="pc_navi_box">
33<ul class="pc_navi_li">
34<li><a href="#">レシピトップ</a></li>
35<li class="open_menu">レシピを探す
36<div class="sub_menu">
37<ul>
38<li><a href="#washoku">和食</a></li>
39<li><a href="#yoshoku">洋食</a></li>
40</ul>    
41</div>
42</li>
43<li><a href="#">料理の基本</a></li>
44<li><a href="#">コラム</a></li>
45</ul>
46</div>