Question

因此，我正在网页上创建菜单部分。我有一条虚线，我想从菜单项连接到其相应的价格。我在菜单项的每个父项上使用：after伪类来执行此操作。但是，当所有内容对齐时，您可以在菜单项和价格下方看到虚线。我尝试使用标题中发布的方法，但是什么也没有？

    except TimeoutException as e:
        print("Time out exception" %e)
    except NewConnectionError as e:
        print("New connection error %s" %e)
    except MaxRetryError as e:
        print("Max Retry Error %s" %e)

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');

ham.addEventListener('click', function() {
	ham.classList.add('ham-open');
	menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
	ham.classList.remove('ham-open');
	menu.style.marginLeft = '-700px';

})




window.sr = ScrollReveal();

sr.reveal('.info', {
	duration: 2000,
	origin: 'bottom'
})

html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.header {
	background: url(img/mex-9.jpg);
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	display: flex;
}

.nav-wrap {
	flex-basis: 40%;
}

.nav-wrap i {
	color: white;
	font-size: 2rem;
	position: absolute;
	right: -33px;
	top: 0px;
	transition: all .1s ease;
}

.nav-wrap i:hover {
	cursor: pointer;
	transform: scale(1.15);
}

.nav-box {
	margin-left: 50px;
	margin-top: 100px;
	max-width: 70px;
	cursor: pointer;
	position: fixed;
	z-index: 10;
}

.b1, .b2, .b3 {
	width: 70px;
	height: 8.5px;
	border-radius: 5px;
	background-color: #fff;
	margin-bottom: 10px;
	transition: all .15s ease;
}

.b1 {
	background-color: #56ff47;
}

.b3 {
	background-color: #ff4c4c;
}

.ham-open .b1 {
	background-color: #56ff47;
	transform: translateY(100px);
	position: relative;
	z-index: 1;
}

.ham-open .b2 {
	transform: translateY(81.5px);
	width: 110px;
	position: relative;
	left: 60px;
	z-index: 0;
}

.ham-open .b3 {
	background-color: #ff4c4c;
	transform: translateY(63px);
	width: 140px;
	position: relative;
	left: 160px;
	z-index: 2;
}

.menu {
	display: flex;
	border-left: 8px solid #56ff47;
	flex-direction: column;
	background-color: #fff;
	margin-left: -700px;
	width: 292px;
	padding-top: 10px;
	padding-bottom: 10px;
	position: fixed;
	border-radius: 5px;
	top: 225px;
	transition: all .15s;
	z-index: 10;
}

.menu a {
	text-decoration: none;
	color: limegreen;
	font-family: 'Kumar One Outline';
	font-size: 2.3rem;
	text-align: center;
	margin-top: 12px;
	margin-bottom: 12px;
	transition: all .5s ease;
}

a:hover {
	color: #007001;
}

.info-wrap {
	flex-basis: 60%;
}

.info {
	font-family: 'Cedarville Cursive';
	color: white;
	font-weight: bold;
	font-size: 4.5rem;
	text-align: center;
	margin-top: 60px;
}

.logo-wrap {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.logo-wrap div {
	font-family: 'Staatliches';
	color: white;
	font-size: 13rem;
	font-weight: bold;
	letter-spacing: 10px;
	margin-bottom: -5rem;
	position: relative;
	margin-left: auto;
	margin-right: auto;

}



/*------ABOUT------*/



.about-section {
	background-color: #17a832;
	width: 100%;
}

.about-section h1 {
	text-align: center;
	font-size: 4.5rem;
	margin-top: 0;
	margin-bottom: 30px;
	padding-top: 15px;
	color: white;
	font-family: 'Cedarville Cursive';
	font-weight: bold;
}

.about-wrap {
	display: flex;
	padding-bottom: 150px;
}

.about-info, .image-slider-wrap {
	flex-basis: 50%;
}

.about-info p {
	color: white;
	font-family: 'Josefin Sans';
	font-size: 2rem;
	margin-left: 100px;
	margin-bottom: 0;
	margin-top: 0;
}

.image-slider {
	width: 650px;
	height: 400px;
	background-color: red;
	border-radius: 13px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.image-slider i {
	color: white;
	font-size: 5rem;
	position: absolute;
	top: 50%;
	margin-top: -40px;
	transition: all .1s ease;
	cursor: pointer;
}

#left {
	transform: rotate(-90deg);
	left: -30px;
}

#right {
	transform: rotate(90deg);
	right: -30px;
}

#left:hover {
	transform: rotate(-90deg) scale(1.3);
}

#right:hover {
	transform: rotate(90deg) scale(1.3);
}


/*------MENU------*/


.menu-section {
	background-color: #edb12f;
	display: flex;
	width: 100%;
	top: -60px;
	position: relative;
	clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
}

.menu-section h1 {
	font-size: 9.5rem;
	margin-top: 0;
	position: absolute;
	left: 130px;
	margin-bottom: 60px;
	padding-top: 15px;
	color: white;
	font-family: 'Cedarville Cursive';
	font-weight: bold;	
}

.column-left, .column-right, .column-middle {
	flex-basis: 33.33%;
	margin-top: 230px;
}

.column-left {
	display: flex;
	justify-content: flex-end;
}

.column-left .menu-h2:after {
	display: block;
	content: "beans and rice included";
	color: white;
	font-size: 1.5rem;
	font-family: 'Josefin Sans';
	margin-top: -25px;
}

.column-middle h2:after, .column-right h2:after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background-color: white;
	border-radius: 3px;
	margin-top: -25px;
}

.column-middle {
	display: flex;
	justify-content: center;
}

.column-right {
	display: flex;
	justify-content: flex-start;
}

.column {
	min-width: 420px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

.column h2 {
	display: inline-block;
	align-self: center;
	font-family: 'Cedarville Cursive';
	color: #17a832;
	font-size: 3rem;
}

.row {
	font-family: 'Josefin Sans';
	font-size: 1.5rem;
}

.row div {
	display: flex;
	justify-content: space-between;
}

.row div:after {
	display: inline-block;
	position: absolute;
	content: "";
	width: 100%;
	margin-top: 33px;
	border-top: 4px dotted black;
}

.price {
	display: inline-block;
	background: #edb12f;
	overflow: hidden;
	position: relative; 
}

.menu-h2 {
	text-align: center;
}

.design-left, .design-right {
	position: absolute;
}

.design-right {
	right: 0;
	transform: rotate(180deg);
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
    border-left: 60px solid green;
 	position: relative;
 	top: -10px;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;  
  border-right:60px solid limegreen;
  position: relative;
  top: 20px; 
}

.arrow-top {
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
    border-left: 60px solid #20a04b;
 	position: relative;
 	top: -100px;
 	left: 60px;
}

.top-middle {
	position: relative;
	top: -110px;
}

.bottom-middle .arrow-left {
	top: -40px;
}

.bottom-middle .move {
	top: -70px;
}

.bottom {
	position: relative;
	top: -48px;
}

.bottom .arrow-left {
	top: -40px;
}


/*------HOURS------*/

.hours-section {
	background-color: green;
	width: 100%;
	height: 100px;
}

Answer 1

也许您可以使用此技巧，如果您给价格和商品名称指定金色背景并为其提供相对位置，则可以利用z-index属性，它将为您完成此技巧。

将此代码添加到您的css文件

.menu-section .row p {
    background-color: #edb12f;
    position: relative;
    z-index: 1;
    padding: 0 10px;
}

溢出：隐藏；和z-index无法将元素隐藏在其下方？

1 个答案: