您好我已经找到了在导航栏下放置箭头的方法,但我无法在导航栏上工作。任何帮助将不胜感激。
<nav>
<div class="hello"></div>
<ul>
<li class="icon-home"><a href="Premiership.html"><span>Home</span></a></li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li><a href="Premiership.html">Premiership</a>
</li>
<li><a href= "Unavailble.html">Championship</a>
</li>
<li><a href="Unavailble.html">League 1</a>
</li>
<li><a href="Unavailble.html">League 2</a>
</li>
</ul>
</li>
<li class="arrow"> <a href="#">France</a>
<ul >
<li id="r"><a href="Unavailble.html">Ligue 1</a>
</li>
</ul>
</li>
<li class="arrow"> <a href="#">Germany </a>
<ul>
<li><a href="Unavailble.html">Bundesliga</a>
</li>
</ul>
</li>
<li class="arrow"> <a href="#">Italy</a>
<ul>
<li><a href="Unavailble.html">Serie A</a>
</li>
</ul>
</li>
<li class="arrow"> <a href="#">Spain</a>
<ul>
<li><a href="Unavailble.html">La Liga</a>
</li>
</ul>
</li>
</ul>
<div class="handle"> Menu </div>
</nav>
我认为css会起作用,但它没有
li a:after {
content: '';
display: none;
width: 0;
height: 0;
border-top: 6px solid #333;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
答案 0 :(得分:0)
在您的情况下,箭头就在那里,overflow:hidden
上的ul
表示您无法看到它。
我已经对您的代码进行了一些调整(请参阅下面的代码段),但需要进行一些调整才能完全按照您的意愿进行调整。为简单起见,我将箭头涂成了红色。
nav ul {
/* overflow:hidden; REMOVE */
}
nav ul li.arrow:after {
content: '';
width: 0;
height: 0;
border-top: 6px solid red;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
nav ul {
background-color: #43a286;
color: white;
padding: 0;
text-align: center;
margin: 0;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li {
display: inline-block;
padding: 20px;
width: 12.3%;
text-align: center;
position: relative;
}
nav ul li:hover {
background-color: #399077;
}
nav ul li.arrow:after {
content: '';
width: 0;
height: 0;
border-top: 6px solid red;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
nav ul ul {
display: none;
position: absolute;
background-color: #399077;
margin-left: -3%;
z-index: 150;
}
nav ul ul li {
display: block;
width: 75%;
text-align: center;
}
nav ul li:hover ul {
margin-top: 2%;
display: block;
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
width: 165px;
}
nav ul li a,
visited {
color: white;
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
display: block;
text-decoration: none;
}
nav ul ul li a:hover {
color: white;
font-size: 20px;
}
&#13;
<nav>
<div class="hello"></div>
<ul>
<li class="icon-home"><a href="Premiership.html"><span>Home</span></a>
</li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li><a href="Premiership.html">Premiership</a>
</li>
<li><a href="Unavailble.html">Championship</a>
</li>
<li><a href="Unavailble.html">League 1</a>
</li>
<li><a href="Unavailble.html">League 2</a>
</li>
</ul>
</li>
<li class="arrow"> <a href="#">France</a>
<ul>
<li id="r"><a href="Unavailble.html">Ligue 1</a>
</li>
</ul>
</li>
<li class="arrow"> <a href="#">Germany </a>
<ul>
<li><a href="Unavailble.html">Bundesliga</a>
</li>
</ul>
</li>
<li class="arrow"> <a href="#">Italy</a>
<ul>
<li><a href="Unavailble.html">Serie A</a>
</li>
</ul>
</li>
</ul>
</nav>
&#13;