菜單項下的Css箭頭

大家好！我得到了一個簡單的菜單，並且我試圖爲每個項目製作一個懸浮箭頭它應該看起來的樣子： sample image。我已經得到了這個代碼感謝您的任何建議！菜單項下的Css箭頭

.mainmenu{ 
 
\t display: inline-block; 
 
\t list-style-type: none; 
 
\t padding-top: 25px; 
 
\t padding-left: 0px; 
 
} 
 
.mainmenu_item{ 
 
\t display: inline; 
 
\t padding-right:8px; 
 
} 
 
.mainmenu_link{ 
 
\t font-family:FrutigerCELight,Arial,Helvetica,sans-serif; 
 
\t text-decoration: none; 
 
\t font-size:14px; 
 
    color:black; 
 
}

<ul class="mainmenu"> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Home">Home</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="About Us">About Us</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Services">Services</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Portfolio">Portfolio</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Blog">Blog</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Contact">Contact</a> 
 
    </li> 
 
</ul>

來源

2016-10-17 Oleg22J

你可以用CSS僞元素實現這一點（**：**後，**：**前） – Natiq

我知道，這就是爲什麼我爲這個問題添加僞元素類別標籤lmao，我需要一些例子，所以我可以分析它。 – Oleg22J

https://css-tricks.com/almanac/selectors/a/after-and-before/ google it bro！ –

如果要懸停添加僞元素首先你需要的目標：懸停，然後添加僞元素。您的選擇將是.mainmenu_item：懸停：後

.mainmenu{ 
 
\t display: inline-block; 
 
\t list-style-type: none; 
 
\t padding-top: 25px; 
 
\t padding-left: 0px; 
 
    font-size:0; 
 
} 
 
.mainmenu_item{ 
 
    font-size: 14px; 
 
\t display: inline-block; 
 
\t padding:8px; 
 
    position: relative; 
 
    line-height:2em; 
 
    background: #000; 
 
    color: #FFF; 
 
} 
 
.mainmenu_item a { 
 
    text-decoration: none; 
 
    color: currentColor; 
 
} 
 
.mainmenu_item:hover:after { 
 
    content:''; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-bottom: 5px solid currentColor; 
 
    position: absolute; 
 
    bottom:0; 
 
    left:50%; 
 
    margin-left: -5px; 
 
} 
 
.mainmenu_link{ 
 
\t font-family:FrutigerCELight,Arial,Helvetica,sans-serif; 
 
\t text-decoration: none; 
 
\t font-size:14px; 
 
}

<ul class="mainmenu"> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Home">Home</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="About Us">About Us</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Services">Services</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Portfolio">Portfolio</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Blog">Blog</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Contact">Contact</a> 
 
    </li> 
 
</ul>

來源

2016-10-17 08:49:51

謝謝，這個爲我工作！ – Oleg22J

每a標籤後添加<span class="arrow-up"></span>。

然後添加CSS：

.mainmenu_item:hover .arrow-up { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid white; 
    position: absolute; 
    top:33px; 
    left:40%; 
}

試試你的自我https://jsfiddle.net/5fbuLh7g/

來源

2016-10-17 08:53:01

菜單項下的Css箭頭

回答

相關問題