带顶部三角形的下拉菜单

问题描述

我想创建一个如下所示的下拉菜单：

但我不能横向居中顶部三角形和下拉菜单（基于 li a ），我有一些：hover 问题，因为 ul 的下拉菜单将消失。

我该如何做？

JSFiddle ：

html {text-align：center;} nav {width：100％;身高：自动; background-color：＃000;} ul li {display：inline-block;位置：相对; margin：1em} ul ul {display：none;位置：绝对; background-color：＃000; top：50px;} ul ul：after {position：absolute;剩下：50％;顶部：-8px;宽度：0;身高：0;内容：''; border-left：20px solid transparent; border-right：20px solid transparent; border-bottom：20px solid＃000000;} a {color：#fff; text-decoration：none;} li：hover ul {display：block;}

 < NAV> < UL> <李> < a href =＃> Dropdown1< / a> < UL> < li>< a href =＃> Option1< / a>< / li> < li>< a href =＃> Option2< / a>< / li> < li>< a href =＃> Option3< / a>< / li> < / UL> < /锂> <李> < a href =＃> Dropdown2< / a> < UL> < li>< a href =＃> Option1< / a>< / li> < li>< a href =＃> Option2< / a>< / li> < li>< a href =＃> Option3< / a>< / li> < / UL> < /锂> <李> < a href =＃> Dropdown3< / a> < UL> < li>< a href =＃> Option1< / a>< / li> < li>< a href =＃> Option2< / a>< / li> < li>< a href =＃> Option3< / a>< / li> < / UL> < /锂> < / nav>  

解决方案

为了使箭头居中，您可以添加：

  ul ul：after {
 margin-left：-20px; 
} 
  

要解决下拉不能保留的问题，请提供足够的底部填充，如下所示：

  nav> ul> li> {
 padding-bottom：50px; 
 
  

更新：居中下拉菜单和箭头： p>

演示

  $（document）.ready（function（）{
 $（nav> ul> li ）.mouseover（function（）{
 var the_width = $（this）.find（a）。width（）; 
 var child_width = $（this）.find（ul）。 width（）; 
 var width = parseInt（（child_width  -  the_width）/ 2）; 
 $（this）.find（ul）.css（'left'，-width）; 
}）; 
}）; 
  

I want to create a dropdown menu like this:

but I cant horizontally center the top triangle and the dropdown menu (based on the li a) and I'm having some :hover problem, because the dropdown ul fades away.

how can I do that?

JSFiddle:

html {
    text-align: center;
}
nav {
    width: 100%;
    height: auto;
    background-color: #000;
}
ul li {
    display: inline-block;
    position: relative;
    margin: 1em
}
ul ul {
    display: none;
    position: absolute;
    background-color: #000;
    top: 50px;
}
ul ul:after {
    position: absolute;
    left: 50%;
    top: -8px;
    width: 0;
    height: 0;
    content: '';
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #000000;
}
a {
    color: #fff;
    text-decoration: none;
}
li:hover ul {
	display:block;
}

<nav>
    <ul>
        <li>
            <a href="#">Dropdown1</a>
            <ul>
                <li><a href="#">Option1</a></li>
                <li><a href="#">Option2</a></li>
                <li><a href="#">Option3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Dropdown2</a>
            <ul>
                <li><a href="#">Option1</a></li>
                <li><a href="#">Option2</a></li>
                <li><a href="#">Option3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Dropdown3</a>
            <ul>
                <li><a href="#">Option1</a></li>
                <li><a href="#">Option2</a></li>
                <li><a href="#">Option3</a></li>
            </ul>
        </li>
    </ul>
</nav>

解决方案

For centering the arrow, you can add this:

ul ul:after {
    margin-left: -20px;
}

To fix the dropdown doesn't stay, give enough bottom padding like this:

nav > ul > li > a {
    padding-bottom: 50px;
}

Updated: centering dropdown and arrow:

Demo http://jsfiddle.net/esjrhg5n/

$(document).ready(function() {
    $("nav > ul > li").mouseover(function() {
        var the_width = $(this).find("a").width();
        var child_width = $(this).find("ul").width();
        var width = parseInt((child_width - the_width)/2);
        $(this).find("ul").css('left', -width);
    });
});

这篇关于带顶部三角形的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！