我試圖讓下面的自定義導(dǎo)航條有響應(yīng)性。我只用div塊創(chuàng)建它,因?yàn)樗鼘ξ襾碚f更容易理解,而且代碼更短、更簡單,是純CSS。這里有一個代碼筆的鏈接:https://codepen.io/familias/pen/WNYraNy.
下面是CSS:
.table-cell {
display: table-cell;
margin: 0;
padding: 0;
border: 0;
outline: 0;
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
.superior {
position: relative;
display: inline-block;
}
.superior a {
position: relative;
display: inline-block;
margin: none;
padding: none;
border: none;
outline: none;
font-size: 16px;
color: #000000;
text-transform: uppercase;
text-decoration: none;
height: 30px;
line-height: 30px;
text-align: center;
padding: 8px 20px 8px 20px;
}
.superior a:hover {
text-decoration: none;
color: #e5633f;
font-weight: 400;
}
.inferior {
display: none;
position: absolute;
width: auto;
left: 50%;
transform: translateX(-50%);
text-align: center;
white-space: nowrap;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #000;
}
.inferior a {
margin: none;
padding: none;
border: none;
outline: none;
display: block;
font-size: 14px;
font-weight: 400;
padding-right: 30px;
padding-left: 30px;
color: #000000;
text-transform: uppercase;
text-decoration: none;
height: 20px;
line-height: 20px;
text-align: center;
border-bottom: 1px solid #000;
}
.inferior a:hover {
font-weight: 400;
text-decoration: none;
color: #fff;
background-color: #000;
}
.superior:hover .inferior {
display: block;
}
<div id="table">
<div id="table-row">
<div class="table-cell">
<div class="superior"><a href="#">News</a>
<div class="inferior">
<a href="#">This is the first link</a>
<a href="#">This is the second link</a>
</div>
</div>
<div class="superior"><a href="#">Politics</a>
<div class="inferior">
<a href="#">This is the first link</a>
<a href="#">This is the second link</a>
</div>
</div>
<div class="superior">
<a href="#">Economy</a>
<div class="inferior">
<a href="#">This is the first link</a>
<a href="#">This is the second link</a>
</div>
</div>
<div class="superior"><a href="#">Culture</a>
<div class="inferior">
<a href="#">This is the first link</a>
<a href="#">This is the second link</a>
</div>
</div>
<div class="superior"><a href="#">Health</a>
<div class="inferior">
<a href="#">This is the first link</a>
<a href="#">This is the second link</a>
</div>
</div>
<div class="superior"><a href="#">Education</a>
<div class="inferior">
<a href="#">This is the first link</a>
<a href="#">This is the second link</a>
</div>
</div>
<div class="superior"><a href="#">Live</a>
<div class="inferior">
<a href="#">This is the first link</a>
<a href="#">This is the second link</a>
</div>
</div>
</div>
</div>
</div>
你可以試試這個。@媒體專用屏幕和(最大寬度:600像素)& quot意味著只有在特定條件為真時(shí)才包含CSS屬性塊,在這種情況下,如果屏幕小于600像素。它將創(chuàng)建垂直菜單,你可以添加你需要的風(fēng)格。