0
我正在爲我的HTML/CSS類的最終項目工作。我試圖（可能過於雄心勃勃）創建可摺疊的手風琴風格菜單。我設法讓它隱藏起來，只顯示懸停，但出於某種原因，有一個元素會導致框之間有空格，我不確定如何在框中包含文本。提前感謝您的任何想法！什麼因素導致我的手風琴有空間？
截圖： How to remove the area with the red background?
編輯：對不起第一次在這裏發帖，不知道有多少代碼發佈。
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