ナビにドロップダウンメニューを追加したいがうまく表示されない

Question

前提・実現したいこと

ナビメニューに、マウスを合わせるとサブメニューが開くような
ドロップダウンメニューを追加したいが、
思ったような動作ができず、原因がわかりません。

http://www.dcom-web.co.jp/technology/css3_dropdownmenu/
こういったサイトにあるものがイメージに近いです。

スマホサイズで見ても同じ動きをつけたいです。

###codepen
https://codepen.io/karujag/pen/OvWmEa

発生している問題・エラーメッセージ

リロード時に一瞬ドロップダウンメニューが表示されますが、見えなくなってしまいます。
スマホサイトで表示した時は、右端に文字が重なって表示されています。

###試したこと
ドロップダウンメニューを追加したい箇所に

<ul id="link-nav-drop"></ul>を追加しました。

補足:

<ul class="menu"></ul>で囲っている部分は スマホサイトで見たときにメニューが収まるようになっています。

ソースコード

<div class="navi">
  <div class="toggle"> <a href="#">Menu</a> </div>
  <ul class="menu">
    <li> <a href="#">リンク</a> </li>
    <li> <a href="#">リンク</a><!--親メニュー-->
      <ul id="link-nav-drop"><!--ドロップダウンメニューを追加したい部分-->
        <li> <a href="#">リンク</a> </li><!--親メニューの下に表示させたいメニュー-->
      </ul>
    </li>
    <li> <a href="#">リンク</a> </li>
    <li> <a href="#">リンク</a> </li>
    <li class="close"> <a href="#">Close</a> </li>
  </ul>
</div>
<script type="text/javascript">
$(function(){
    $(".toggle").click(function(){
        $(this).next().slideToggle();
    });
    $(".close").click(function(){
        $(this).parent().slideToggle();
            return false;
    });
 $(window).resize (function(){
    var win = $(window).width();
    var resp = 767;
    if(win > resp){
      $(".menu").show();
    } else {
      $(".menu").hide();
    }
  });
});
</script>

.clearfix::after {
		content: "";
		display: block;
		clear: both;
}

.navi {
		width: 100%;
		padding: 0;
		margin: 0 auto;
		margin-left: -500%;
		margin-right: -500%;
		padding-left: 500%;
		padding-right: 500%;
		filter: alpha(opacity=95);
		-moz-opacity: 0.95;
		opacity: 0.95;
		background: #1D3557;
		text-align: center;
}

.navi ul {
		padding: 0;
		overflow: hidden;
		list-style-type: none;
		margin: 0 auto;
		height: 50px;
}

.navi li {
		float: left;
		text-align: center;
		width: 20%;
		margin: 0;
}

.navi li a {
		display: block;
		margin: 0;
		line-height: 50px;
		padding: ;
		color: #fff;
		font-size: 16px;
		text-decoration: none;
		transition: 1s ease;
}

.navi a:hover {
		color: #fff;
		background: #E63946;
}

.toggle,
.close {
		display: none;
}

.search-form {
		margin: 0;
}

.menu #link-nav li {
		position: relative;
}

a:hover+#link-nav-drop {
		display: block;
}

#link-nav-drop {
		display: none;
		position: absolute;
		right: 0;
		height: auto;
		overflow: hidden;
		width: 100%;
		background-color: #000;
}

@media only screen and (min-width: 767px) {
		.navi>ul {
				padding: 0;
				margin: 0;
				width: 100%;
				margin-bottom: 30px;
				display: block;
		}
		.navi>ul>li {
				box-sizing: border-box;
				width: calc(100% / 5);
				height: 50px;
				line-height: 50px;
				border-left: 1px solid white;
				color: white;
				float: left;
				list-style-type: none;
				text-align: center;
				position: relative;
				transition: box-shadow .3s ease-in-out;
		}
		.navi>ul>li:first-child() {
				border-left: 0;
		}
		.navi>ul>li>a {
				color: white;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
		}
}

@media only screen and (max-width: 767px) {
		.menu {
				display: none;
				width: 100%;
		}
		.navi li {
				width: 100%;
		}
		.navi-search {
				display: none;
		}
		.menu .inmenu {
				display: block;
				padding: 12px 10px;
				color: #fff;
				text-decoration: none;
		}
		.toggle {
				display: block;
				position: relative;
				width: 100%;
		}
		.close {
				display: block;
				position: relative;
				width: 100%;
		}
		.toggle a {
				display: block;
				padding: 12px 0 10px;
				color: #fff;
				text-align: center;
				text-decoration: none;
		}
		.toggle:before {
				position: absolute;
				font-family: "blogicon";
				content: "\f003";
				top: 50%;
				right: 10px;
				width: 20px;
				height: 20px;
				margin-top: -10px;
				color: #fff;
		}
}

Comments

[kszk311]

幅が767px以下の時に、リロードするとメニューが見えてしまう、ということでいいですか？ちなみに「すぐ見えなくなってしまう」という現象は再現しませんでした。

[退会済みユーザー]

説明が不足しており、申し訳ありません。 ナビゲーションに関係するCSSの部分を全て書きました。 私の環境ですと、幅が767px以上で、 リロードするとメニューが一瞬だけ表示されるものの 見えなくなってしまい、(マウスを重ねたら見えるようにしたいのですが うまく動作しません)、幅が767px以下になると、メニュー右端に文字が表示されてしまいます。 (親メニューの下にマウスを重ねたら表示させる動きをつけたいです)

[退会済みユーザー]

ありがとうございます。 .navi>ulと.navi ulのoverflow: hidden;を削除しました。 「.navi>ul>liにfloat: left;がかかっているので、回りこみ解除をclearfixにする」の部分、 <ul class="menu">にclearfixを追加しましたが大丈夫でしょうか? 「top(ヘッダーの高さ)とwidth（100%?）を指定」は、ヘッダーの高さがよくわかりませんでした。CSSに.naviに高さを指定したら良いのでしょうか? codepenを作成しましたが、実現したい動きがなかなか表現できません。高さを指定していないためかと思いますが、重なってしまい、うまく実現したい動きが表示できていない状態です。

Answer 1

記載時のミスかもしれませんが

@media only screen and (min-width: 767px) {

ここ「@」つけておいて下さい。

原因は、overflowです。
.navi>ulと.navi ulにoverflow: hidden;がかかっています。
.navi>ul>liにfloat: left;がかかっているので、回りこみ解除をclearfixにするか、flexで組むのがいいと思います。

その上で、#link-nav-dropに背景色をつけ、
top(ヘッダーの高さ)とwidth（100%?）を指定すれば良いかと思います。

Answer 2

何をされたいのかイマイチ伝わってこないのですが、
ホバー時に現れて欲しいメニューが現れないというのであれば、それはcssのheight:0;が原因です。

.menu #link-nav li {
  position: relative;
}
a:hover + #link-nav-drop {
  display: block;
  height:auto;/*ここで高さを持たせてあげれば良いです*/
}
#link-nav-drop {
  display: none;
  position: absolute;
  right: 0;
  height: 0;
  overflow: hidden;
}

Comments

[退会済みユーザー]

説明が不足しており申し訳ありません。実現したいことを再度記入いたしました。
heightに関しても修正いたしました。ありがとうございます。