用一个导航菜单的案例说一下css带三角的对话框怎么写

先看效果图

 

这里的效果是，鼠标指向Help导航的时候，出现一个对话框形式的子菜单

 

先看html，行内样式是我为了布局做的一些小修改，自己项目中根据个人项目修改

Html

<%--Help--%>
<li class="loginLiFour" style="text-align: center;width: 65px;">
    <a href="javaScript:;" target="_blank" class="menu_a clear" style="display: flex;"><p>Help</p>
        <span class="help-up"></span></a>
    <div class="Nav" style="display: none;">
        <div class="out-c"></div>
        <div class="inne-c"></div>
        <div style="margin: 8px 1px 8px 11px;">
            <a href="/helper.html" target="_blank" class="MenuS">User Guide</a>
            <a href="/iSCM.html" target="_blank" class="MenuS">i-SCM</a>
            <a href="/TradeServices.html" target="_blank" class="MenuS">Value-Add Services</a>
        </div>


    </div>
</li>

 这个是最外层的css

CSS

.loginLiFour{
   width: 101px;
   height: 21px;
   margin-top: 26px;
   margin-left: 22px;
}
.loginLiFour p:hover{
   color: #0EB1EA;
}

 重点是在于对话框的三角

在html中我们写了两个div

<div class="out-c"></div>

<div class="inne-c"></div>

注意他是在<div class="Nav" style="display: none;">里面的，起初这个对话框设置为隐藏

 

继续探讨他们三者之间的关系

 

献给对话框写样式

.Nav{
    width: 132px;
    height: 74px;
    background: #FFFFFF;
    border: 1px solid #EFEFEF;
    border-radius: 6px;
    position:relative;
    right: 154%;
    top: 17% ;
}

 

 

再写一个三角，这个三角就是我们第二个div

css如下

.out-c{
    width: 0;
    height: 0;
    border: 5px solid #FFFFFF;
    border-bottom-color: #EFEFEF;
    position: absolute;
    top: -14%;
    left: 83%;
}

 

第一个三角是实心的，我们为了和对话框融合在一起，必须填充他实心部分，让其变空心

方法是再写一个实心的比他更小三角，填充色要跟对话框保持一样，那么有

.inne-c{
    width:0;
    height:0;
    border:5px solid transparent;
    border-bottom-color:#fff;
    position: absolute;
    top: -12%;
    left:83%;
}

三角写出来了，旁边的小图片可以让美工或者网上找一个，可以根据鼠标放上去弹出对话框的同时，方向改变，需要加一些鼠标事件

 

写一下鼠标事件，需要用到jquery2.x  ,

    $("a.menu_a").mouseover(function () {
            $(this).next(".Nav").slideDown(200);
//            $(this).addClass("menu_aon");
            $(this).find(".help-up").addClass("help-dow");
            $(this).find(".help-dow").removeClass("help-up");
        });

        $(".loginLiFour").mouseleave(function () {
            $(this).find(".Nav").slideUp(200);
            $(this).find("a.menu_a").find(".help-dow").addClass("help-up");
            $(this).find("a.menu_a").find(".help-up").removeClass("help-dow");
        });