我有一个带有svg图像的<nav>,为了尊重空间添加了CSS margin-top属性,我的问题是<div>上的<a> ::hover文本没有像在第二个<li>上那样突出显示完整的<div>。
一小块我的<nav>
nav {
display: block;
background: linear-gradient(to right, indigo, darkgreen, indigo);
font-family: simpsonfont;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li div {
margin-top:-32px;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: #fff;
background: blue;
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: red;
background: yellow;
text-indent: 15px;
}
.menu ul li a:hover,.menu ul li:hover>a {
background: darkcyan;
color: #fff;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
background: #374147;
color: #fff;
text-decoration: none;
}
a#categoriasdepersonajes {
text-indent: 24px;
margin-top: -7px;
margin-right: -26px;
}
a#mecanica {
text-indent: -8px;
}
a#personajesdelacamaraacorazada {
text-indent: 15px;
text-align-last: center;
margin-right: -56px;
}
a#premium {
text-indent: 27px;
margin-right: -26px;
}
a#retosdiarios {
text-indent: 16px;
margin-top: -7px;
}
a#cash {
margin-top: -12px;
text-indent: 27px;
}
a#puntosdeexperiencia {
text-indent: 19px;
margin-right: -15px;
margin-top: -3px;
}<nav>
<ul class="menu">
<li><a class="homer" href="#">PERSONAJES</a>
<li><a href="#"><i class="fa fa-camera"></i>EL JUEGO</a>
<ul class="sub-menu">
<li>
<div>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122 112" style="
width: 35px;
height: 35px;
transform: translate(0px, 42px);
stroke: black;
stroke-width: 10px;
/* margin-top: -7px; */
" xml:space="preserve">
<g transform="translate(0.000000,112.000000) scale(0.100000,-0.100000)">
<path d="M492,1110c-19-4-57-23-85-42c-29-19-73-43-99-52c-46-17-48-19-48-56c0-33,4-39,26-44l27-7l-7-79c-3-44-18-118-31-165
c-42-145-95-235-207-351L0,243l122-48C449,67,564,29,586,41c16,8,35,6,89-10c51-16,71-18,81-10c8,6,25,9,38,5c16-4,26-1,29,8
s15,12,31,9c19-4,26-1,26,11c0,10,9,16,25,16s25,6,25,16c0,21,60,44,115,44c33,0,45,4,45,15c0,10,10,15,30,15c21,0,28,4,24,14
s2,12,21,9c20-4,24-2,19,11c-4,10-1,16,9,16s1,26-32,93c-68,136-107,270-126,429c-7,56-6,57,19,64c22,5,26,11,26,45
c0,33-4,41-25,49c-14,5-25,17-25,27s-9,32-19,49c-22,37-96,69-137,61c-18-3-38,3-62,19c-25,17-49,24-84,24s-58,6-75,20
c-14,11-35,20-47,20c-15,0-10-6,19-20c22-11,31-17,20-14c-47,16-98,16-138-2c-79-34-128-95-126-156c1-31,2-31,8,8
c12,73,60,122,142,144c40,11,102,3,93-12c-4-5-17-7-30-4c-59,15-160-36-184-93c-13-33-6-106,11-96c5,4,9-3,9-14c0-16-6-21-28-21
c-34,0-58,23-67,65l-6,30l15-31c7-18,19-35,26-39s4,4-5,19c-57,86,20,198,159,232c28,7,40,12,26,12S510,1114,492,1110z M791,1044
c17-8,29-17,27-20c-3-2-19,3-36,12c-74,36-206-37-230-129c-6-22-7-35-1-31c5,3,12-8,15-25c4-18,13-31,21-31s13-7,11-17
c-5-27-46-28-74-2c-41,38-28,117,30,187c15,17,23,32,18,32c-12,0-62-57-62-71c0-7-59-2-69,7c-6,5,31,44,52,56c10,5,37,11,60,13
s58,10,77,19C675,1064,753,1064,791,1044z M780,1020c13-9,13-10,0-11c-8-1-24,0-34,1c-60,6-148-45-173-100c-7-16-12-19-12-9
c-2,29,43,82,88,106C695,1031,754,1037,780,1020z M345,998c-4-10-15-13-33-10l-27,5l30,13C349,1020,353,1019,345,998z M991,972
c16-18,29-40,29-50c0-11-6-6-16,14c-18,37-62,64-103,64c-59,0-181-80-181-119c0-9,11,1,25,21c31,45,97,78,157,78c47,0,68-12,89-52
c13-24-1-18-38,14c-28,26-81,25-137-1c-46-23-71-51-82-95c-8-35,2-74,22-78c13-3,13-5,1-22c-13-17-18-18-44-7c-31,12-53,47-52,79
c0,9,7,0,15-20c9-20,22-39,30-42c9-4,7,5-7,23c-33,45-30,101,7,148c52,65,97,84,183,81C957,1005,964,1002,991,972z M317,972
c17-11,4-55-14-48c-8,3-17,6-19,6s-4,11-4,25C280,980,294,987,317,972z M720,975c0-3-12-22-28-43c-26-37-29-38-60-28l-33,11l28,26
c15,15,35,29,43,32C690,980,720,981,720,975z M490,898c0-26-2-28-27-22c-40,10-43,13-43,38c0,32,7,35,41,23
C483,928,490,919,490,898z M903,932c-8-5,17-15,63-27c41-10,77-22,79-25c2-4-25-17-60-29c-64-23-65-23-140-5c-41,10-75,21-75,24
c0,17,54,54,87,60C910,941,917,941,903,932z M651,881c3-3,3-18,0-33c-6-26-7-26-38-13s-44,41-27,58C594,900,641,891,651,881z
M392,811c32-16,58-2,58,30c0,11,7,19,15,19c17,0,21-26,5-33c-6-3-5-4,2-3s23-10,35-25c13-15,35-30,50-34c21-5,24-8,12-16
c-7-5-10-9-5-9c19,0,46,34,46,57c0,25,1,26,24,17c9-3,16-14,16-23c0-21,44-63,84-80c24-10,27-14,15-22c-8-5-9-9-3-9
c16,0,44,45,44,70c0,18,4,20,23,14c44-14,65-23,70-31c8-14-21-195-44-268c-36-118-107-244-194-346c-25-30-52-54-60-54
c-7,0-17-4-22-9s-2-6,6-1c9,5,12,4,7-3c-4-7-20-6-52,5c-34,11-42,18-33,25c10,7,8,8-7,3c-23-6-219,64-414,146l-45,20l74,77
c42,42,75,79,76,82c0,3,14,30,32,60c35,61,77,164,92,225c12,51,26,147,22,160c-1,6,8,1,21-10C355,833,377,818,392,811z M853,830
c56-13,57-14,57-47c0-28-3-33-17-29c-10,3-45,14-78,24c-60,18-74,34-61,68c4,11,11,12,23,6C787,846,821,837,853,830z M1030,828
c0-22-14-35-54-52c-48-20-46-21-46,8c0,22,21,38,52,41c3,0,10,3,14,8C1008,844,1030,841,1030,828z M1014,613c5-5,6,6,3,25
c-8,39,0,42,13,6c7-18,7-31,0-39c-26-31,22-204,91-332c34-62,37-73,22-73c-10,0-24,10-32,22c-37,60-91,180-97,217
c-4,23-11,44-15,47c-11,6-11,12,1-60c5-33,13-62,18-65s29-45,54-92c39-74,42-86,25-81c-15,4-18,2-12-9s4-11-8,1c-21,19-50,90-38,90
c5,0,13-9,16-21c4-11,9-18,12-16c9,9-17,47-32,47c-21,0-19-17,10-79c14-29,20-49,13-44c-15,12-70,8-97-7c-17-8-17-6-9,33
c20,93,21,100,9,93c-7-4-9-16-6-27c4-10,2-19-4-19c-5,0-13-24-16-53c-4-30-11-60-15-68c-15-24-22-2-11,37c24,90,55,394,39,394
c-3,0-9-35-12-77c-9-112-44-335-60-380c-8-21-15-32-15-25c-1,7-5,11-9,8c-9-6,19,176,28,184c4,3,6,21,6,40s4,44,8,55
c11,27,15,75,19,235c2,74,2,106,1,70c-6-102-26-234-34-221c-4,7-5,24-2,39s2,25-1,21c-4-3-9-30-12-60c-15-137-50-272-94-357
c-24-47-24-47-87-31c-51,13-53,29-3,45c29,9,39,22,71,87c21,42,39,91,41,109s15,60,29,93s31,82,39,108c10,36,15,43,21,30
c5-12,7-4,6,22c-1,22,2,77,7,123c6,71,10,82,26,82c15,0,19-7,19-40c0-22,4-40,9-40s7,19,4,42c-3,33,0,45,14,56c17,12,19,8,28-62
C1001,655,1009,618,1014,613z M1017,703c-2-16-4-5-4,22c0,28,2,40,4,28C1019,740,1019,718,1017,703z M1093,426c9-21,15-42,12-46
c-3-5-1-11,5-15s7-11,4-17c-10-16-25,14-18,36c5,13,3,16-7,11c-9-6-11-4-6,8c3,9,2,17-3,19c-13,4-37,89-31,113c3,14,8,7,16-25
C1072,485,1084,448,1093,426z M889,377c0-12-4-31-9-42c-7-15-9-8-7,27c1,25,5,44,10,41C887,401,890,389,889,377z M1145,280
c14-27,23-50,21-50c-5,0-56,86-56,94C1110,340,1122,325,1145,280z M866,273c-4-21-11-65-17-98c-17-99-30-135-51-135
c-20,0-21,1-12,24c3,9,11,13,16,10c6-4,8-1,6,7c-3,8,0,28,7,46c7,17,21,65,30,107C862,312,878,340,866,273z M770,241
c-10-27-28-69-40-95c-20-41-25-45-48-39c-14,3-23,2-20-3s-5-17-18-27c-35-26-30-15,22,45c25,29,62,79,81,111c20,31,37,57,39,57
S781,268,770,241z"></path>
<path d="M712,830c0-19,2-27,5-17c2,9,2,25,0,35C714,857,712,849,712,830z"></path>
<path d="M330,833c0-6,6-16,14-22c10-8,12-20,6-39c-5-15-16-63-25-107c-26-123-89-248-169-332c-37-39-63-74-57-77
c15-9,235-94,353-136l107-37l29,31c51,55,90,111,131,187c56,104,78,165,94,259c14,80,14,82-7,90c-25,11-307,95-389,117
c-32,9-54,19-48,23c7,4,2,15-14,30C341,833,330,839,330,833z M455,742c50-16,150-46,222-67l133-39l-6-41c-11-76-44-186-75-248
c-40-79-111-186-148-221l-28-27l-221,82l-221,82l58,63c93,99,152,223,181,377c7,37,13,67,14,67C364,770,406,757,455,742z"></path>
<path d="M492,670c-40-9-102-66-102-92c0-10,11-23,24-30c21-9,29-7,56,16c57,47,124,26,118-38c-3-28-8-32-51-43c-61-15-93-35-117-76
c-25-41-25-64-1-77c37-19,55-11,83,35c15,25,23,45,18,45s-19-18-31-40c-24-43-35-47-63-27c-17,12-17,16-3,43c23,44,50,64,108,79
c30,8,60,22,67,32c29,39-12,113-63,113c-12,0-39-11-59-25c-44-30-66-32-66-7c0,37,71,82,128,82c15,0,45-9,66-21c21-11,40-18,43-15
c7,7-59,46-79,46c-9,0-22,2-30,4C531,676,510,674,492,670z"></path>
<path d="M667,558c6-66-35-122-96-131c-14-2-27-9-28-14c-9-25,78,10,107,44c34,38,45,112,21,136C666,598,664,583,667,558z"></path>
<path d="M354,306c-12-9-24-24-27-36c-7-26,28-70,57-70c32,0,66,28,66,53C449,302,393,333,354,306z M424,284c19-18,19-20,6-45
c-20-36-90-19-90,21C340,298,395,314,424,284z"></path>
<path d="M811,278c-17-59-61-159-79-180c-8-10-25-18-36-18c-20-1-20-1-3-11c30-17,46-3,77,67c32,71,65,173,58,180
C825,318,818,301,811,278z"></path>
<path d="M997,238c3-17,14-39,25-50c23-23,23-21-2,36C996,278,988,283,997,238z"></path>
</g>
</svg>
</div>
<a id="retosdiarios" href="#" style="">Retos Diarios</a>
</li>
<li style="
width: 166px;
">
<div>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 105 76" xml:space="preserve" style="
width: 30px;
height: 30px;
transform: translate(0px, 45px);
stroke: black;
stroke-width: 15px;
">
<g transform="translate(0.000000,76.000000) scale(0.100000,-0.100000)">
<path d="M138,696l-26-24l49-132c27-73,49-136,49-140c0-6-41-93-168-352c-2-5,40-8,93-8c114,0,147,16,166,81c7,21,15,39,19,39
c3,0,12-27,18-60l13-60l192,1c251,2,241-4,235,141l-4,108h30c77,2,176,65,197,127c17,52,6,170-21,223c-37,72-68,80-326,79
c-208,0-221-1-251-22c-18-12-35-33-39-47c-6-23-8-21-21,23l-14,47h-82C175,719,162,716,138,696z M316,688c3-5,14-37,23-71
c10-34,22-62,26-62c5,0,22,32,38,72l29,72h74h74l-61-122c-33-67-64-130-69-139c-7-12,8-55,55-165c36-81,69-156,75-165
c9-17,3-18-80-18c-90,0-90,0-96,27c-27,117-41,167-49,170c-6,1-26-41-46-95l-37-97l-80-3l-80-3l84,171l83,170l-44,118
c-24,64-47,125-51,135c-6,17-1,18,60,16C281,698,313,693,316,688z M923,677c40-26,57-69,64-160c5-75,3-85-19-117
c-29-42-71-59-154-59l-62-1l5-125l5-125h-66h-66v238c0,130-3,268-7,305l-6,69l139-4C869,696,901,692,923,677z M213,553l46-123
l-85-176C128,157,87,79,85,82c-3,3,28,73,70,157c41,83,75,156,75,161c0,6-22,68-49,139c-34,92-45,133-38,140
C159,695,163,688,213,553z M609,383c0-270-2-304-14-273c-18,48-21,550-3,568c7,7,13,12,15,12S610,552,609,383z M384,624
c-9-21-19-34-21-27c-5,13,26,78,33,70C398,665,393,646,384,624z M563,397c2-114,2-206,0-203c-3,3-26,53-52,113l-46,108l45,101
c25,56,46,98,47,95S560,511,563,397z M865,320c-3-5-26-10-51-10c-59,0-50,14,11,18C854,329,869,327,865,320z M374,165
c17-70,16-95-3-95c-13,0-41,123-34,148C346,256,356,243,374,165z M198,63c-21-2-55-2-75,0c-21,2-4,4,37,4S218,65,198,63z M523,63
c-24-2-62-2-85,0c-24,2-5,4,42,4S546,65,523,63z M703,63c-18-2-48-2-65,0c-18,2-4,4,32,4S720,65,703,63z"></path>
<path d="M740,576c0-18,3-54,6-80c7-46,7-46,45-46c50,0,74,32,66,91c-7,55-22,69-73,69C741,610,740,609,740,576z M828,577
c20-15,14-107-7-107c-4,0-8,17-9,38c-1,26-9,43-27,59c-14,12-25,25-25,28C760,603,812,589,828,577z M793,521c4-19,6-40,3-48
c-11-29-30-6-33,41C758,571,779,575,793,521z"></path>
</g>
</svg>
</div>
<a id="puntosdeexperiencia" href="#" style="
text-indent: 19px;
margin-right: -15px;
margin-top: -2px;
">Puntos De Experiencia</a>
</li>
<ul>
</nav>
发布于 2020-01-17 13:56:27
首先,您有未关闭的<ul>和<li>。从总体上看,结构看起来有点混乱,伊夫罗。
我觉得有点像
.menu li div { margin-top:-32px; }
使底部的项目超过顶部的项目,这防止了高照明。
其次,我用一些不同的代码取得了接近相同的结果。请听着,这是你想要实现的吗?如果是这样的话,希望我的代码给您提供如何修复代码的想法。
nav {
background: linear-gradient(to right, indigo, darkgreen, indigo);
font-family: simpsonfont;
}
ul.menu {
padding: 20px;
}
ul.menu>li>a {
font-weight: 600;
text-decoration: none;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu>li {
display: inline;
padding: 20px 15px;
}
.menu>li:hover {
background: blue;
transition: all 0.2s ease-in-out 0s;
cursor: pointer;
}
.sub-menu {
visibility: hidden;
position: absolute;
top: calc(100% + 1px);
left: 0;
transform: translate(0,20px);
transition: all 0.2s ease-in-out;
opacity: 0;
}
.sub-menu:after {
content: '';
position: absolute;
top: -6px;
left: 10%;
background: #fff;
width: 12px;
height: 6px;
/* (left top: x y, right top: x y, center bottom: x y) */
clip-path: polygon(0 100%, 100% 100%, 50% 0);
}
.sub-menu-open {
position: relative;
}
.sub-menu-open:hover .sub-menu {
visibility: visible;
transform: translate(0,0);
opacity: 1;
}
.sub-menu {
list-style-type: none;
}
.sub-menu {
padding: 0;
background-color: yellow;
}
.sub-menu li {
white-space: nowrap;
padding: 5px 20px;
}
.sub-menu li a {
color: red;
}
.sub-menu li:hover {
background-color: darkcyan;
transition: all 0.2s ease-in-out 0s;
}
.sub-menu-li-content {
display: flex;
align-items: center;
}<html>
<head>
<link rel="stylesheet" href="css - Copy.css">
</head>
<body>
<script src="https://use.fontawesome.com/53b22dcfd4.js"></script>
<nav>
<ul class="menu">
<li><a href="#">PERSONAJES</a>
<li class="sub-menu-open"><a href="#"><i class="fa fa-camera"></i>EL JUEGO</a>
<ul class="sub-menu">
<li>
<div class="sub-menu-li-content">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122 112" style="
width: 35px;
height: 35px;
/*transform: translate(0px, 42px);*/
stroke: black;
stroke-width: 10px;
/*margin-top: -7px;*/
" xml:space="preserve">
<g transform="translate(0.000000,112.000000) scale(0.100000,-0.100000)">
<path d="M492,1110c-19-4-57-23-85-42c-29-19-73-43-99-52c-46-17-48-19-48-56c0-33,4-39,26-44l27-7l-7-79c-3-44-18-118-31-165
c-42-145-95-235-207-351L0,243l122-48C449,67,564,29,586,41c16,8,35,6,89-10c51-16,71-18,81-10c8,6,25,9,38,5c16-4,26-1,29,8
s15,12,31,9c19-4,26-1,26,11c0,10,9,16,25,16s25,6,25,16c0,21,60,44,115,44c33,0,45,4,45,15c0,10,10,15,30,15c21,0,28,4,24,14
s2,12,21,9c20-4,24-2,19,11c-4,10-1,16,9,16s1,26-32,93c-68,136-107,270-126,429c-7,56-6,57,19,64c22,5,26,11,26,45
c0,33-4,41-25,49c-14,5-25,17-25,27s-9,32-19,49c-22,37-96,69-137,61c-18-3-38,3-62,19c-25,17-49,24-84,24s-58,6-75,20
c-14,11-35,20-47,20c-15,0-10-6,19-20c22-11,31-17,20-14c-47,16-98,16-138-2c-79-34-128-95-126-156c1-31,2-31,8,8
c12,73,60,122,142,144c40,11,102,3,93-12c-4-5-17-7-30-4c-59,15-160-36-184-93c-13-33-6-106,11-96c5,4,9-3,9-14c0-16-6-21-28-21
c-34,0-58,23-67,65l-6,30l15-31c7-18,19-35,26-39s4,4-5,19c-57,86,20,198,159,232c28,7,40,12,26,12S510,1114,492,1110z M791,1044
c17-8,29-17,27-20c-3-2-19,3-36,12c-74,36-206-37-230-129c-6-22-7-35-1-31c5,3,12-8,15-25c4-18,13-31,21-31s13-7,11-17
c-5-27-46-28-74-2c-41,38-28,117,30,187c15,17,23,32,18,32c-12,0-62-57-62-71c0-7-59-2-69,7c-6,5,31,44,52,56c10,5,37,11,60,13
s58,10,77,19C675,1064,753,1064,791,1044z M780,1020c13-9,13-10,0-11c-8-1-24,0-34,1c-60,6-148-45-173-100c-7-16-12-19-12-9
c-2,29,43,82,88,106C695,1031,754,1037,780,1020z M345,998c-4-10-15-13-33-10l-27,5l30,13C349,1020,353,1019,345,998z M991,972
c16-18,29-40,29-50c0-11-6-6-16,14c-18,37-62,64-103,64c-59,0-181-80-181-119c0-9,11,1,25,21c31,45,97,78,157,78c47,0,68-12,89-52
c13-24-1-18-38,14c-28,26-81,25-137-1c-46-23-71-51-82-95c-8-35,2-74,22-78c13-3,13-5,1-22c-13-17-18-18-44-7c-31,12-53,47-52,79
c0,9,7,0,15-20c9-20,22-39,30-42c9-4,7,5-7,23c-33,45-30,101,7,148c52,65,97,84,183,81C957,1005,964,1002,991,972z M317,972
c17-11,4-55-14-48c-8,3-17,6-19,6s-4,11-4,25C280,980,294,987,317,972z M720,975c0-3-12-22-28-43c-26-37-29-38-60-28l-33,11l28,26
c15,15,35,29,43,32C690,980,720,981,720,975z M490,898c0-26-2-28-27-22c-40,10-43,13-43,38c0,32,7,35,41,23
C483,928,490,919,490,898z M903,932c-8-5,17-15,63-27c41-10,77-22,79-25c2-4-25-17-60-29c-64-23-65-23-140-5c-41,10-75,21-75,24
c0,17,54,54,87,60C910,941,917,941,903,932z M651,881c3-3,3-18,0-33c-6-26-7-26-38-13s-44,41-27,58C594,900,641,891,651,881z
M392,811c32-16,58-2,58,30c0,11,7,19,15,19c17,0,21-26,5-33c-6-3-5-4,2-3s23-10,35-25c13-15,35-30,50-34c21-5,24-8,12-16
c-7-5-10-9-5-9c19,0,46,34,46,57c0,25,1,26,24,17c9-3,16-14,16-23c0-21,44-63,84-80c24-10,27-14,15-22c-8-5-9-9-3-9
c16,0,44,45,44,70c0,18,4,20,23,14c44-14,65-23,70-31c8-14-21-195-44-268c-36-118-107-244-194-346c-25-30-52-54-60-54
c-7,0-17-4-22-9s-2-6,6-1c9,5,12,4,7-3c-4-7-20-6-52,5c-34,11-42,18-33,25c10,7,8,8-7,3c-23-6-219,64-414,146l-45,20l74,77
c42,42,75,79,76,82c0,3,14,30,32,60c35,61,77,164,92,225c12,51,26,147,22,160c-1,6,8,1,21-10C355,833,377,818,392,811z M853,830
c56-13,57-14,57-47c0-28-3-33-17-29c-10,3-45,14-78,24c-60,18-74,34-61,68c4,11,11,12,23,6C787,846,821,837,853,830z M1030,828
c0-22-14-35-54-52c-48-20-46-21-46,8c0,22,21,38,52,41c3,0,10,3,14,8C1008,844,1030,841,1030,828z M1014,613c5-5,6,6,3,25
c-8,39,0,42,13,6c7-18,7-31,0-39c-26-31,22-204,91-332c34-62,37-73,22-73c-10,0-24,10-32,22c-37,60-91,180-97,217
c-4,23-11,44-15,47c-11,6-11,12,1-60c5-33,13-62,18-65s29-45,54-92c39-74,42-86,25-81c-15,4-18,2-12-9s4-11-8,1c-21,19-50,90-38,90
c5,0,13-9,16-21c4-11,9-18,12-16c9,9-17,47-32,47c-21,0-19-17,10-79c14-29,20-49,13-44c-15,12-70,8-97-7c-17-8-17-6-9,33
c20,93,21,100,9,93c-7-4-9-16-6-27c4-10,2-19-4-19c-5,0-13-24-16-53c-4-30-11-60-15-68c-15-24-22-2-11,37c24,90,55,394,39,394
c-3,0-9-35-12-77c-9-112-44-335-60-380c-8-21-15-32-15-25c-1,7-5,11-9,8c-9-6,19,176,28,184c4,3,6,21,6,40s4,44,8,55
c11,27,15,75,19,235c2,74,2,106,1,70c-6-102-26-234-34-221c-4,7-5,24-2,39s2,25-1,21c-4-3-9-30-12-60c-15-137-50-272-94-357
c-24-47-24-47-87-31c-51,13-53,29-3,45c29,9,39,22,71,87c21,42,39,91,41,109s15,60,29,93s31,82,39,108c10,36,15,43,21,30
c5-12,7-4,6,22c-1,22,2,77,7,123c6,71,10,82,26,82c15,0,19-7,19-40c0-22,4-40,9-40s7,19,4,42c-3,33,0,45,14,56c17,12,19,8,28-62
C1001,655,1009,618,1014,613z M1017,703c-2-16-4-5-4,22c0,28,2,40,4,28C1019,740,1019,718,1017,703z M1093,426c9-21,15-42,12-46
c-3-5-1-11,5-15s7-11,4-17c-10-16-25,14-18,36c5,13,3,16-7,11c-9-6-11-4-6,8c3,9,2,17-3,19c-13,4-37,89-31,113c3,14,8,7,16-25
C1072,485,1084,448,1093,426z M889,377c0-12-4-31-9-42c-7-15-9-8-7,27c1,25,5,44,10,41C887,401,890,389,889,377z M1145,280
c14-27,23-50,21-50c-5,0-56,86-56,94C1110,340,1122,325,1145,280z M866,273c-4-21-11-65-17-98c-17-99-30-135-51-135
c-20,0-21,1-12,24c3,9,11,13,16,10c6-4,8-1,6,7c-3,8,0,28,7,46c7,17,21,65,30,107C862,312,878,340,866,273z M770,241
c-10-27-28-69-40-95c-20-41-25-45-48-39c-14,3-23,2-20-3s-5-17-18-27c-35-26-30-15,22,45c25,29,62,79,81,111c20,31,37,57,39,57
S781,268,770,241z"></path>
<path d="M712,830c0-19,2-27,5-17c2,9,2,25,0,35C714,857,712,849,712,830z"></path>
<path d="M330,833c0-6,6-16,14-22c10-8,12-20,6-39c-5-15-16-63-25-107c-26-123-89-248-169-332c-37-39-63-74-57-77
c15-9,235-94,353-136l107-37l29,31c51,55,90,111,131,187c56,104,78,165,94,259c14,80,14,82-7,90c-25,11-307,95-389,117
c-32,9-54,19-48,23c7,4,2,15-14,30C341,833,330,839,330,833z M455,742c50-16,150-46,222-67l133-39l-6-41c-11-76-44-186-75-248
c-40-79-111-186-148-221l-28-27l-221,82l-221,82l58,63c93,99,152,223,181,377c7,37,13,67,14,67C364,770,406,757,455,742z"></path>
<path d="M492,670c-40-9-102-66-102-92c0-10,11-23,24-30c21-9,29-7,56,16c57,47,124,26,118-38c-3-28-8-32-51-43c-61-15-93-35-117-76
c-25-41-25-64-1-77c37-19,55-11,83,35c15,25,23,45,18,45s-19-18-31-40c-24-43-35-47-63-27c-17,12-17,16-3,43c23,44,50,64,108,79
c30,8,60,22,67,32c29,39-12,113-63,113c-12,0-39-11-59-25c-44-30-66-32-66-7c0,37,71,82,128,82c15,0,45-9,66-21c21-11,40-18,43-15
c7,7-59,46-79,46c-9,0-22,2-30,4C531,676,510,674,492,670z"></path>
<path d="M667,558c6-66-35-122-96-131c-14-2-27-9-28-14c-9-25,78,10,107,44c34,38,45,112,21,136C666,598,664,583,667,558z"></path>
<path d="M354,306c-12-9-24-24-27-36c-7-26,28-70,57-70c32,0,66,28,66,53C449,302,393,333,354,306z M424,284c19-18,19-20,6-45
c-20-36-90-19-90,21C340,298,395,314,424,284z"></path>
<path d="M811,278c-17-59-61-159-79-180c-8-10-25-18-36-18c-20-1-20-1-3-11c30-17,46-3,77,67c32,71,65,173,58,180
C825,318,818,301,811,278z"></path>
<path d="M997,238c3-17,14-39,25-50c23-23,23-21-2,36C996,278,988,283,997,238z"></path>
</g>
</svg>
<a id="retosdiarios" href="#" style="">Retos Diarios</a>
</div>
</li>
<li>
<div class="sub-menu-li-content">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 105 76" xml:space="preserve" style="
width: 30px;
height: 30px;
/*transform: translate(0px, 45px);*/
stroke: black;
stroke-width: 15px;
">
<g transform="translate(0.000000,76.000000) scale(0.100000,-0.100000)">
<path d="M138,696l-26-24l49-132c27-73,49-136,49-140c0-6-41-93-168-352c-2-5,40-8,93-8c114,0,147,16,166,81c7,21,15,39,19,39
c3,0,12-27,18-60l13-60l192,1c251,2,241-4,235,141l-4,108h30c77,2,176,65,197,127c17,52,6,170-21,223c-37,72-68,80-326,79
c-208,0-221-1-251-22c-18-12-35-33-39-47c-6-23-8-21-21,23l-14,47h-82C175,719,162,716,138,696z M316,688c3-5,14-37,23-71
c10-34,22-62,26-62c5,0,22,32,38,72l29,72h74h74l-61-122c-33-67-64-130-69-139c-7-12,8-55,55-165c36-81,69-156,75-165
c9-17,3-18-80-18c-90,0-90,0-96,27c-27,117-41,167-49,170c-6,1-26-41-46-95l-37-97l-80-3l-80-3l84,171l83,170l-44,118
c-24,64-47,125-51,135c-6,17-1,18,60,16C281,698,313,693,316,688z M923,677c40-26,57-69,64-160c5-75,3-85-19-117
c-29-42-71-59-154-59l-62-1l5-125l5-125h-66h-66v238c0,130-3,268-7,305l-6,69l139-4C869,696,901,692,923,677z M213,553l46-123
l-85-176C128,157,87,79,85,82c-3,3,28,73,70,157c41,83,75,156,75,161c0,6-22,68-49,139c-34,92-45,133-38,140
C159,695,163,688,213,553z M609,383c0-270-2-304-14-273c-18,48-21,550-3,568c7,7,13,12,15,12S610,552,609,383z M384,624
c-9-21-19-34-21-27c-5,13,26,78,33,70C398,665,393,646,384,624z M563,397c2-114,2-206,0-203c-3,3-26,53-52,113l-46,108l45,101
c25,56,46,98,47,95S560,511,563,397z M865,320c-3-5-26-10-51-10c-59,0-50,14,11,18C854,329,869,327,865,320z M374,165
c17-70,16-95-3-95c-13,0-41,123-34,148C346,256,356,243,374,165z M198,63c-21-2-55-2-75,0c-21,2-4,4,37,4S218,65,198,63z M523,63
c-24-2-62-2-85,0c-24,2-5,4,42,4S546,65,523,63z M703,63c-18-2-48-2-65,0c-18,2-4,4,32,4S720,65,703,63z"></path>
<path d="M740,576c0-18,3-54,6-80c7-46,7-46,45-46c50,0,74,32,66,91c-7,55-22,69-73,69C741,610,740,609,740,576z M828,577
c20-15,14-107-7-107c-4,0-8,17-9,38c-1,26-9,43-27,59c-14,12-25,25-25,28C760,603,812,589,828,577z M793,521c4-19,6-40,3-48
c-11-29-30-6-33,41C758,571,779,575,793,521z"></path>
</g>
</svg>
<a id="puntosdeexperiencia" href="#">Puntos De Experiencia</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
发布于 2020-01-17 08:54:07
你没有相同的文本,一个更大,另一个更小
对两个li使用特定或相同的宽度
并为text-indent: 19px; margin-right: -15px;标记添加a。
nav {
display: block;
background: linear-gradient(to right, indigo, darkgreen, indigo);
font-family: simpsonfont;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li div {
margin-top:-32px;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: #fff;
background: blue;
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: red;
background: yellow;
text-indent: 15px;
}
.menu ul li a:hover,.menu ul li:hover>a {
background: darkcyan;
color: #fff;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
background: #374147;
color: #fff;
text-decoration: none;
}
a#categoriasdepersonajes {
text-indent: 24px;
margin-top: -7px;
margin-right: -26px;
}
a#mecanica {
text-indent: -8px;
}
a#personajesdelacamaraacorazada {
text-indent: 15px;
text-align-last: center;
margin-right: -56px;
}
a#premium {
text-indent: 27px;
margin-right: -26px;
}
a#retosdiarios {
text-indent: 16px;
margin-top: -7px;
}
a#cash {
margin-top: -12px;
text-indent: 27px;
}
a#puntosdeexperiencia {
text-indent: 19px;
margin-right: -15px;
margin-top: -3px;
}<nav>
<ul class="menu">
<li><a class="homer" href="#">PERSONAJES</a>
<li><a href="#"><i class="fa fa-camera"></i>EL JUEGO</a>
<ul class="sub-menu">
<li style="width: 166px;">
<div>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122 112" style="
width: 35px;
height: 35px;
transform: translate(0px, 42px);
stroke: black;
stroke-width: 10px;
/* margin-top: -7px; */
" xml:space="preserve">
<g transform="translate(0.000000,112.000000) scale(0.100000,-0.100000)">
<path d="M492,1110c-19-4-57-23-85-42c-29-19-73-43-99-52c-46-17-48-19-48-56c0-33,4-39,26-44l27-7l-7-79c-3-44-18-118-31-165
c-42-145-95-235-207-351L0,243l122-48C449,67,564,29,586,41c16,8,35,6,89-10c51-16,71-18,81-10c8,6,25,9,38,5c16-4,26-1,29,8
s15,12,31,9c19-4,26-1,26,11c0,10,9,16,25,16s25,6,25,16c0,21,60,44,115,44c33,0,45,4,45,15c0,10,10,15,30,15c21,0,28,4,24,14
s2,12,21,9c20-4,24-2,19,11c-4,10-1,16,9,16s1,26-32,93c-68,136-107,270-126,429c-7,56-6,57,19,64c22,5,26,11,26,45
c0,33-4,41-25,49c-14,5-25,17-25,27s-9,32-19,49c-22,37-96,69-137,61c-18-3-38,3-62,19c-25,17-49,24-84,24s-58,6-75,20
c-14,11-35,20-47,20c-15,0-10-6,19-20c22-11,31-17,20-14c-47,16-98,16-138-2c-79-34-128-95-126-156c1-31,2-31,8,8
c12,73,60,122,142,144c40,11,102,3,93-12c-4-5-17-7-30-4c-59,15-160-36-184-93c-13-33-6-106,11-96c5,4,9-3,9-14c0-16-6-21-28-21
c-34,0-58,23-67,65l-6,30l15-31c7-18,19-35,26-39s4,4-5,19c-57,86,20,198,159,232c28,7,40,12,26,12S510,1114,492,1110z M791,1044
c17-8,29-17,27-20c-3-2-19,3-36,12c-74,36-206-37-230-129c-6-22-7-35-1-31c5,3,12-8,15-25c4-18,13-31,21-31s13-7,11-17
c-5-27-46-28-74-2c-41,38-28,117,30,187c15,17,23,32,18,32c-12,0-62-57-62-71c0-7-59-2-69,7c-6,5,31,44,52,56c10,5,37,11,60,13
s58,10,77,19C675,1064,753,1064,791,1044z M780,1020c13-9,13-10,0-11c-8-1-24,0-34,1c-60,6-148-45-173-100c-7-16-12-19-12-9
c-2,29,43,82,88,106C695,1031,754,1037,780,1020z M345,998c-4-10-15-13-33-10l-27,5l30,13C349,1020,353,1019,345,998z M991,972
c16-18,29-40,29-50c0-11-6-6-16,14c-18,37-62,64-103,64c-59,0-181-80-181-119c0-9,11,1,25,21c31,45,97,78,157,78c47,0,68-12,89-52
c13-24-1-18-38,14c-28,26-81,25-137-1c-46-23-71-51-82-95c-8-35,2-74,22-78c13-3,13-5,1-22c-13-17-18-18-44-7c-31,12-53,47-52,79
c0,9,7,0,15-20c9-20,22-39,30-42c9-4,7,5-7,23c-33,45-30,101,7,148c52,65,97,84,183,81C957,1005,964,1002,991,972z M317,972
c17-11,4-55-14-48c-8,3-17,6-19,6s-4,11-4,25C280,980,294,987,317,972z M720,975c0-3-12-22-28-43c-26-37-29-38-60-28l-33,11l28,26
c15,15,35,29,43,32C690,980,720,981,720,975z M490,898c0-26-2-28-27-22c-40,10-43,13-43,38c0,32,7,35,41,23
C483,928,490,919,490,898z M903,932c-8-5,17-15,63-27c41-10,77-22,79-25c2-4-25-17-60-29c-64-23-65-23-140-5c-41,10-75,21-75,24
c0,17,54,54,87,60C910,941,917,941,903,932z M651,881c3-3,3-18,0-33c-6-26-7-26-38-13s-44,41-27,58C594,900,641,891,651,881z
M392,811c32-16,58-2,58,30c0,11,7,19,15,19c17,0,21-26,5-33c-6-3-5-4,2-3s23-10,35-25c13-15,35-30,50-34c21-5,24-8,12-16
c-7-5-10-9-5-9c19,0,46,34,46,57c0,25,1,26,24,17c9-3,16-14,16-23c0-21,44-63,84-80c24-10,27-14,15-22c-8-5-9-9-3-9
c16,0,44,45,44,70c0,18,4,20,23,14c44-14,65-23,70-31c8-14-21-195-44-268c-36-118-107-244-194-346c-25-30-52-54-60-54
c-7,0-17-4-22-9s-2-6,6-1c9,5,12,4,7-3c-4-7-20-6-52,5c-34,11-42,18-33,25c10,7,8,8-7,3c-23-6-219,64-414,146l-45,20l74,77
c42,42,75,79,76,82c0,3,14,30,32,60c35,61,77,164,92,225c12,51,26,147,22,160c-1,6,8,1,21-10C355,833,377,818,392,811z M853,830
c56-13,57-14,57-47c0-28-3-33-17-29c-10,3-45,14-78,24c-60,18-74,34-61,68c4,11,11,12,23,6C787,846,821,837,853,830z M1030,828
c0-22-14-35-54-52c-48-20-46-21-46,8c0,22,21,38,52,41c3,0,10,3,14,8C1008,844,1030,841,1030,828z M1014,613c5-5,6,6,3,25
c-8,39,0,42,13,6c7-18,7-31,0-39c-26-31,22-204,91-332c34-62,37-73,22-73c-10,0-24,10-32,22c-37,60-91,180-97,217
c-4,23-11,44-15,47c-11,6-11,12,1-60c5-33,13-62,18-65s29-45,54-92c39-74,42-86,25-81c-15,4-18,2-12-9s4-11-8,1c-21,19-50,90-38,90
c5,0,13-9,16-21c4-11,9-18,12-16c9,9-17,47-32,47c-21,0-19-17,10-79c14-29,20-49,13-44c-15,12-70,8-97-7c-17-8-17-6-9,33
c20,93,21,100,9,93c-7-4-9-16-6-27c4-10,2-19-4-19c-5,0-13-24-16-53c-4-30-11-60-15-68c-15-24-22-2-11,37c24,90,55,394,39,394
c-3,0-9-35-12-77c-9-112-44-335-60-380c-8-21-15-32-15-25c-1,7-5,11-9,8c-9-6,19,176,28,184c4,3,6,21,6,40s4,44,8,55
c11,27,15,75,19,235c2,74,2,106,1,70c-6-102-26-234-34-221c-4,7-5,24-2,39s2,25-1,21c-4-3-9-30-12-60c-15-137-50-272-94-357
c-24-47-24-47-87-31c-51,13-53,29-3,45c29,9,39,22,71,87c21,42,39,91,41,109s15,60,29,93s31,82,39,108c10,36,15,43,21,30
c5-12,7-4,6,22c-1,22,2,77,7,123c6,71,10,82,26,82c15,0,19-7,19-40c0-22,4-40,9-40s7,19,4,42c-3,33,0,45,14,56c17,12,19,8,28-62
C1001,655,1009,618,1014,613z M1017,703c-2-16-4-5-4,22c0,28,2,40,4,28C1019,740,1019,718,1017,703z M1093,426c9-21,15-42,12-46
c-3-5-1-11,5-15s7-11,4-17c-10-16-25,14-18,36c5,13,3,16-7,11c-9-6-11-4-6,8c3,9,2,17-3,19c-13,4-37,89-31,113c3,14,8,7,16-25
C1072,485,1084,448,1093,426z M889,377c0-12-4-31-9-42c-7-15-9-8-7,27c1,25,5,44,10,41C887,401,890,389,889,377z M1145,280
c14-27,23-50,21-50c-5,0-56,86-56,94C1110,340,1122,325,1145,280z M866,273c-4-21-11-65-17-98c-17-99-30-135-51-135
c-20,0-21,1-12,24c3,9,11,13,16,10c6-4,8-1,6,7c-3,8,0,28,7,46c7,17,21,65,30,107C862,312,878,340,866,273z M770,241
c-10-27-28-69-40-95c-20-41-25-45-48-39c-14,3-23,2-20-3s-5-17-18-27c-35-26-30-15,22,45c25,29,62,79,81,111c20,31,37,57,39,57
S781,268,770,241z"></path>
<path d="M712,830c0-19,2-27,5-17c2,9,2,25,0,35C714,857,712,849,712,830z"></path>
<path d="M330,833c0-6,6-16,14-22c10-8,12-20,6-39c-5-15-16-63-25-107c-26-123-89-248-169-332c-37-39-63-74-57-77
c15-9,235-94,353-136l107-37l29,31c51,55,90,111,131,187c56,104,78,165,94,259c14,80,14,82-7,90c-25,11-307,95-389,117
c-32,9-54,19-48,23c7,4,2,15-14,30C341,833,330,839,330,833z M455,742c50-16,150-46,222-67l133-39l-6-41c-11-76-44-186-75-248
c-40-79-111-186-148-221l-28-27l-221,82l-221,82l58,63c93,99,152,223,181,377c7,37,13,67,14,67C364,770,406,757,455,742z"></path>
<path d="M492,670c-40-9-102-66-102-92c0-10,11-23,24-30c21-9,29-7,56,16c57,47,124,26,118-38c-3-28-8-32-51-43c-61-15-93-35-117-76
c-25-41-25-64-1-77c37-19,55-11,83,35c15,25,23,45,18,45s-19-18-31-40c-24-43-35-47-63-27c-17,12-17,16-3,43c23,44,50,64,108,79
c30,8,60,22,67,32c29,39-12,113-63,113c-12,0-39-11-59-25c-44-30-66-32-66-7c0,37,71,82,128,82c15,0,45-9,66-21c21-11,40-18,43-15
c7,7-59,46-79,46c-9,0-22,2-30,4C531,676,510,674,492,670z"></path>
<path d="M667,558c6-66-35-122-96-131c-14-2-27-9-28-14c-9-25,78,10,107,44c34,38,45,112,21,136C666,598,664,583,667,558z"></path>
<path d="M354,306c-12-9-24-24-27-36c-7-26,28-70,57-70c32,0,66,28,66,53C449,302,393,333,354,306z M424,284c19-18,19-20,6-45
c-20-36-90-19-90,21C340,298,395,314,424,284z"></path>
<path d="M811,278c-17-59-61-159-79-180c-8-10-25-18-36-18c-20-1-20-1-3-11c30-17,46-3,77,67c32,71,65,173,58,180
C825,318,818,301,811,278z"></path>
<path d="M997,238c3-17,14-39,25-50c23-23,23-21-2,36C996,278,988,283,997,238z"></path>
</g>
</svg>
</div>
<a id="retosdiarios" href="#" style="text-indent: 19px;
margin-right: -15px;">Retos Diarios</a>
</li>
<li style="
width: 166px;
">
<div>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 105 76" xml:space="preserve" style="
width: 30px;
height: 30px;
transform: translate(0px, 45px);
stroke: black;
stroke-width: 15px;
">
<g transform="translate(0.000000,76.000000) scale(0.100000,-0.100000)">
<path d="M138,696l-26-24l49-132c27-73,49-136,49-140c0-6-41-93-168-352c-2-5,40-8,93-8c114,0,147,16,166,81c7,21,15,39,19,39
c3,0,12-27,18-60l13-60l192,1c251,2,241-4,235,141l-4,108h30c77,2,176,65,197,127c17,52,6,170-21,223c-37,72-68,80-326,79
c-208,0-221-1-251-22c-18-12-35-33-39-47c-6-23-8-21-21,23l-14,47h-82C175,719,162,716,138,696z M316,688c3-5,14-37,23-71
c10-34,22-62,26-62c5,0,22,32,38,72l29,72h74h74l-61-122c-33-67-64-130-69-139c-7-12,8-55,55-165c36-81,69-156,75-165
c9-17,3-18-80-18c-90,0-90,0-96,27c-27,117-41,167-49,170c-6,1-26-41-46-95l-37-97l-80-3l-80-3l84,171l83,170l-44,118
c-24,64-47,125-51,135c-6,17-1,18,60,16C281,698,313,693,316,688z M923,677c40-26,57-69,64-160c5-75,3-85-19-117
c-29-42-71-59-154-59l-62-1l5-125l5-125h-66h-66v238c0,130-3,268-7,305l-6,69l139-4C869,696,901,692,923,677z M213,553l46-123
l-85-176C128,157,87,79,85,82c-3,3,28,73,70,157c41,83,75,156,75,161c0,6-22,68-49,139c-34,92-45,133-38,140
C159,695,163,688,213,553z M609,383c0-270-2-304-14-273c-18,48-21,550-3,568c7,7,13,12,15,12S610,552,609,383z M384,624
c-9-21-19-34-21-27c-5,13,26,78,33,70C398,665,393,646,384,624z M563,397c2-114,2-206,0-203c-3,3-26,53-52,113l-46,108l45,101
c25,56,46,98,47,95S560,511,563,397z M865,320c-3-5-26-10-51-10c-59,0-50,14,11,18C854,329,869,327,865,320z M374,165
c17-70,16-95-3-95c-13,0-41,123-34,148C346,256,356,243,374,165z M198,63c-21-2-55-2-75,0c-21,2-4,4,37,4S218,65,198,63z M523,63
c-24-2-62-2-85,0c-24,2-5,4,42,4S546,65,523,63z M703,63c-18-2-48-2-65,0c-18,2-4,4,32,4S720,65,703,63z"></path>
<path d="M740,576c0-18,3-54,6-80c7-46,7-46,45-46c50,0,74,32,66,91c-7,55-22,69-73,69C741,610,740,609,740,576z M828,577
c20-15,14-107-7-107c-4,0-8,17-9,38c-1,26-9,43-27,59c-14,12-25,25-25,28C760,603,812,589,828,577z M793,521c4-19,6-40,3-48
c-11-29-30-6-33,41C758,571,779,575,793,521z"></path>
</g>
</svg>
</div>
<a id="puntosdeexperiencia" href="#" style="
text-indent: 19px;
margin-right: -15px;
margin-top: -2px;
">Puntos De Experiencia</a>
</li>
<ul>
</nav>
https://stackoverflow.com/questions/59783669
复制相似问题