0
私は自分のHTML/CSSクラスの最終プロジェクトに取り組んでいます。私は（おそらく野心的な）折り畳み式のアコーディオンスタイルのメニューを作成しようとしています。私はそれを隠して、ホバリングでしか現れませんでしたが、何らかの理由でボックスにスペースが入る要素があり、ボックスにテキストを入れる方法がわかりません。あなたが持っているアイデアを事前にありがとう！私のアコーデオンにはどのような要素がありますか？
スクリーンショット： How to remove the area with the red background?
EDIT：申し訳ありませんが、初めてここに投稿し、投稿するどのくらいのコード確認されませんでした。
HTMLコード
@charset "utf-8";
/* HTML Styles */
/*Body Styles*/
html {
\t background-image: url(../images/sushi_wallpaper.jpeg);
}
body {
\t display:block;
\t width: 100%;
\t max-width: 1040px;
\t margin-left: auto;
\t margin-right: auto;
\t background-color: white;
\t border: 7px solid rgb(149,54,0);
\t border-top: none;
\t border-bottom: none; /* BODY BORDER, RE-ADDRESS WITH COLORS */
\t position: static;
\t border-collapse: collapse;
}
\t
\t
/*Navigation Styles*/
nav {
\t font-family: 'Times New Roman', serif;
\t text-align: center;
}
ul {
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
}
nav.horizontalnavigation li {
/*BUTTON SIZES */ \t
\t display: block;
\t float: left;
\t width: 25%;
\t text-decoration: none;
\t line-height: 2;
\t padding-bottom: 1em;
}
nav.horizontalnavigation li a:hover {
\t background-color:rgb(255,198,73);
}
/* COLLAPSE ABLE MENU */
ul.collapse {
\t display: none;
}
a.accord:hover+ul.collapse, ul.collapse:hover {
\t display: block;
\t float: left;
\t width: 100%;
}
.collapse > .submenu {
\t width: 100%;
\t background-color: red; }
ul.collapse li {
\t width: 80%;
\t float: right;
\t border: none;
\t line-height: initial;
}
nav.horizontalnavigation > ul > li:hover:nth-of-type(4):after {
\t text-decoration: underline;
\t content: #collapse;
\t
}
nav.horizontalnavigation > ul > li:target {
\t display: block;
}
nav.horizontalnavigation a {
/*"BUTTONS" STYLES HERE */ \t
\t display: block;
\t color: black;
\t text-decoration: none;
\t background-color: white;
\t border: 3px solid rgb(149,54,0);
\t box-shadow: 0 0 1em .3em rgb(255,198,73) inset;
\t
}
/* Header Styles */
h1 {
font-family: 'Times New Roman', Times, serif;
font-size: 2.2em;
font-weight: normal;
margin: 0.5em 0;
}
/*Font Styles */
@font-face {
\t font-family: speedingBrush;
\t src: url("../fonts/SpeedingBrush.ttf") format("truetype");
}
cite {
\t font-style: italic;
}
/* Paragraph Styles */
p {
\t display:block;
\t font-size: 1em;
\t line-height: 1.375;
\t text-indent: 8%;
}
\t
/*Images Styles*/ \t
\t
body > header > img.banner {
\t display:block;
\t width: 100%;
} \t
\t
/* DIV & Section Styles */
/*List Styles */
/*Footer Styles*/
footer {
\t display: block;
\t text-align: center;
\t width: 100%;
\t border: 2px solid rgb(149,54,0);
\t line-height: 2;
\t margin-top: 15em;
\t clear: both;
\t
}<nav class="horizontalnavigation">
\t \t <ul>
\t \t \t <li><a href="sl_pr_table.html">Popular Types of Sushi</a></li>
\t \t \t <li><a href="#">Where can I get sushi?</a></li>
\t \t \t <li><a href="#">FREE Sushi Catalog</a></li>
\t \t \t <li><a href="#" class="accord">Additional Resources</a>
\t \t \t \t <ul class="collapse">
\t \t \t \t \t <li class="submenu"><a href="#">WWWWWWWWWWWWWWW</a></li>
\t \t \t \t \t <li class="submenu"><a href="#">WWWWWWWWWWWWWWWWWWWWWWWWW</a></li>
\t \t \t \t \t <li class="submenu"><a href="#">WWWWWWWWWWWW</a></li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t </ul>
\t </nav>
を追加します。 –
ここにはたくさんのCSSコードがありません。ミッション不可IMO。 – JPA
あなたのブラウザの開発者ツールを使って、マージンやパディングを持つ要素を特定しようとしましたか？ほとんどのブラウザで、右クリックして要素を検査することで、空間に何が寄与しているのかを確認できます。 – Auroratide