0
私は新しいバージョンのWebサイトで作業しています。今は1つの問題を除いて、結果にほとんど満足しています。ウェブサイトはヘッダー（ロゴとメニュー付き）とコンテンツ部分で構成されています。私は大小両方の画面で動作するようにしたい。css-menuが正しく動作しません
小さな画面で1つの問題が発生しました。メニューを展開すると、コンテンツ部分の上にありますが、コンテンツ部分はクリック可能なままなので、メニューオプションはクリックできず、メニューは正しく機能しません。
小画面（スマートフォン用）： - [表示メニュー]をクリックすると、すべてのメニューオプション（Menu1、Menu2、Menu3、Menu4）が表示され、クリックできます。下にあるテキスト（div 'page'）は表示されません（メニューオプションの下に消えます）。 - メニューオプションの1つをクリックすると、サブメニューのすべてのオプションが表示され、クリック可能になります。下にあるテキスト（div 'page'）は表示されません。
私は既に多くのオプションを検索して試しましたが、期待される結果ではありませんでした。任意のヒントを事前に
感謝:)
次のように私のHTMLは次のとおりです。次のように
<body>
<div id="wrapper">
<div id="logo">
<img src="#" style="width:180px;height:50px;">
</div>
<div id="menu">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Menu1 ￬</a>
<ul class="hidden">
<li><a href="#">Submenu11</a></li>
<li><a href="#">Submenu12</a></li>
</ul>
</li>
<li><a href="#">Menu2 ￬</a>
<ul class="hidden">
<li><a href="#">Menu21</a></li>
<li><a href="#">Menu22</a></li>
<li><a href="#">Menu23</a></li>
</ul>
</li>
<li><a href="#">Menu3 ￬</a>
<ul class="hidden">
<li><a href="#">Menu31</a></li>
<li><a href="#">Menu32</a></li>
<li><a href="#">Menu33</a></li>
</ul>
</li>
<li><a href="#">Menu4 ￬</a>
<ul class="hidden">
<li><a href="#">Menu41</a></li>
<li><a href="#">Menu42</a></li>
<li><a href="#">Menu43</a></li>
<li><a href="#">Menu44</a></li>
<li><a href="#">Menu45</a></li>
<li><a href="#">Menu46</a></li>
</ul>
</li>
</ul>
</div>
<div id="header">
<h3>Header</h3><hr>
</div>
<div id="pageliquid">
<div id="page">Page-text<br />
</div>
</div>
</div>
</body>
私のCSSは次のとおりです。
body {
margin: 20px;
font-family: Tahoma, Arial;
font-size: 12pt;
color: #001245;
}
#wrapper {
width: 100%;
min-width: 1000px;
max-width: 2000px;
margin: 0 auto;
}
#logo {
height: 50px;
width: 100%;
position: static;
}
#menu {
height: 50px;
width: 100%;
position: static;
}
#header {
height: 75px;
width: 100%;
position: static;
}
#pageliquid {
width: 100%;
position: static;
}
#page {
top: 200px;
max-width: 100%;
position: absolute;
overflow: scroll;
bottom: 1px;
left: 20px;
right: 0px;
}
ul, img {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
li a {
display:block;
min-width:200px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: small;
color: #fff;
background: #0b0b3b;
text-decoration: none;
}
li:hover a {
background: #0b0b3b;
}
li:hover ul a {
background: #08088a;
color: #d8d8d8;
height: 40px;
line-height: 40px;
}
li:hover ul a:hover {
background: #08088a;
color: #ffffff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: 160px;
min-width: 100px;
padding: 0 20px;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox] {
display: none;
-webkit-appearance: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
@media screen and (max-width : 760px) {
body {
margin: 0px;
}
#wrapper {
min-width: 0px;
margin: 0;
}
#header {
position: absolute;
}
#page {
left: 0px;
}
ul {
position: absolute;
width: 100%;
display: none;
}
li {
margin-bottom: 1px;
margin-right: 0px;
}
ul li, li a {
width: 100%;
}
li ul li a {
width: 100%;
padding: 0 0px;
}
.show-menu {
display:block;
}
}
つもりはたくさんありますが、そこに私たちは想像しなければならない。あなたがデモやリンクを投稿した場合、あなたの質問はより明確で解決しやすいでしょうか？ – sol