Question

我正在处理我的HTML / CSS课程的最终项目。我试图（可能过于雄心勃勃）创建一个可折叠的手风琴风格菜单。我设法将它隐藏起来，只显示悬停，但由于某种原因，有一个元素导致框之间有空格，我不确定如何包含文本框。提前感谢您的任何想法！

截图： How to remove the area with the red background?

编辑：抱歉第一次在这里发帖，不确定要发布多少代码。

HTML代码

＆＃13;

  

 @charset "utf-8";


/* HTML Styles */



/*Body Styles*/

html {
	background-image: url(../images/sushi_wallpaper.jpeg);

}



body { 
	display:block;
	width: 100%;
	max-width: 1040px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	border: 7px solid rgb(149,54,0);
	border-top: none;
	border-bottom: none; /* BODY BORDER, RE-ADDRESS WITH COLORS */
	position: static;
	border-collapse: collapse;
}
	
	
/*Navigation Styles*/

nav {
	font-family: 'Times New Roman', serif;
	text-align: center;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav.horizontalnavigation li {
/*BUTTON SIZES */	
	display: block;
	float: left;
	width: 25%;
	text-decoration: none;
	line-height: 2;
	padding-bottom: 1em;
}

nav.horizontalnavigation li a:hover {
	background-color:rgb(255,198,73);
}

/* COLLAPSE ABLE MENU */ 

ul.collapse {
	display: none;
}

 
a.accord:hover+ul.collapse, ul.collapse:hover {
	display: block;
	float: left;
	width: 100%;
} 



.collapse > .submenu  {
	width: 100%;
	background-color: red; }




ul.collapse li {
	width: 80%;
	float: right;
	border: none;
	line-height: initial;
} 

 nav.horizontalnavigation > ul > li:hover:nth-of-type(4):after {
	text-decoration: underline;
	content: #collapse;
	
} 

 nav.horizontalnavigation > ul > li:target {
	display: block;
} 

nav.horizontalnavigation a {
 /*"BUTTONS" STYLES HERE */	
	display: block;
	color: black;
	text-decoration: none;
	background-color: white;
	border: 3px solid rgb(149,54,0);
	box-shadow: 0 0 1em .3em rgb(255,198,73) inset;
	
}

/* 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 {
	font-family: speedingBrush;
	src: url("../fonts/SpeedingBrush.ttf") format("truetype");
}

cite {
	font-style: italic;
}

/* Paragraph Styles */

p {
	display:block;
	font-size: 1em;
	line-height: 1.375;
	text-indent: 8%;
}

	
/*Images Styles*/	
	
body > header > img.banner {
	display:block;
	width: 100%;
}	
	


/* DIV & Section Styles */

 

/*List Styles */



/*Footer Styles*/


footer {
	display: block;
	text-align: center;
	width: 100%;
	border: 2px solid rgb(149,54,0);
	line-height: 2;
	margin-top: 15em;
	clear: both;
	
}

＆＃13;

<nav class="horizontalnavigation">
		<ul>
			<li><a href="sl_pr_table.html">Popular Types of Sushi</a></li>
			<li><a href="#">Where can I get sushi?</a></li>
			<li><a href="#">FREE Sushi Catalog</a></li>
			<li><a href="#" class="accord">Additional Resources</a>
				<ul class="collapse">
					<li class="submenu"><a href="#">WWWWWWWWWWWWWWW</a></li>
					<li class="submenu"><a href="#">WWWWWWWWWWWWWWWWWWWWWWWWW</a></li>
					<li class="submenu"><a href="#">WWWWWWWWWWWW</a></li>
				</ul>
			</li>
		</ul>
	</nav>

＆＃13;

Answer 1

删除padding-bottom: 1em;，它将解决您的问题。

nav.horizontalnavigation li {
/*BUTTON SIZES */   
    display: block;
    float: left;
    width: 25%;
    text-decoration: none;
    line-height: 2;
    padding-bottom: 1em; // <----- This is causing the spacing
}

Answer 2

添加

ul.collapse li.submenu{
  padding: 0;
}

是什么因素导致我的手风琴有空格？

2 个答案: