我在safari中的超级菜单与firefox和chrome不一样..怪异的CSS行为？

时间：2017-04-06 07:10:32

标签： javascript jquery html css safari

Safari显示重叠文本...我不知道在safari中发生了什么。 firefox和chrome没有重叠文本。

这是我的截图：

狩猎： docs

火狐： safari

请使用Safari来测试结果。我相信这是我的CSS的冲突？ jquery应该不是问题 

//START MEGA MENU JQUERY
jQuery(document).ready(function($){
	
    //on mobile - open submenu
	$('.has-children').children('a').on('click', function(event){
		//prevent default clicking on direct children of .has-children 
		event.preventDefault();
		var selected = $(this);
		selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out');
	});

	
	$('.lg-dropdown-content').menuAim({
		activate: function(row) {
			$(row).children().addClass('is-active').removeClass('fade-out');
			if( $('.lg-dropdown-content .fade-in').length == 0 ) $(row).children('ul').addClass('fade-in');
		},
		deactivate: function(row) {
			$(row).children().removeClass('is-active');
			if( $('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row)) ) {
				$('.lg-dropdown-content').find('.fade-in').removeClass('fade-in');
				$(row).children('ul').addClass('fade-out')
			}
		},
		exitMenu: function() {
			$('.lg-dropdown-content').find('.is-active').removeClass('is-active');
			return true;
		},
	});


	//submenu items - go back link
	$('.go-back').on('click', function(){
		var selected = $(this),
			visibleNav = $(this).parent('ul').parent('.has-children').parent('ul');
		selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
	}); 


});
/* BASIC style for nav, you can ingore this part */
a:focus {
  text-decoration:none;
}

a {
  transition: all 0.3s ease 0s;
  text-decoration:none;
}

a:hover {
    color: #5ad5f4;
    text-decoration: none;
}

a:active, a:hover {
    outline: 0 none;
}

ul{
    list-style: outside none none;
    margin: 0;
    padding: 0
}

.lg-dropdown-content {
  background-color: #ddd;
}

/* END BASIC style for nav, you can ingore this part */


/* START MEGA MENU CSS */

.back-width {
    width: 100%;
}

ul.column-two {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
}

.minheight2{
    min-height:0px;
}

.lg-dropdown h2,
.lg-dropdown-content a,
.lg-dropdown-content ul a {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
}


.lg-dropdown {
    margin-top: 15px;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #111433;
    color: #ffffff;
    visibility: hidden;
    position: absolute;
    height: auto;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    background-color: transparent;
    color: #111433;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}

.lg-dropdown.dropdown-is-active {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s, -webkit-transform 0.3s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s;
    transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
}


.lg-dropdown-content > li{
    display: inline-block;
}


.lg-dropdown-content, .lg-dropdown-content ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding-top: 0;
    overflow: visible;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.lg-dropdown-content a {
    display: block;
    color: #000;
    height: 50px;
    line-height: 50px;
    font-size: 1.5rem;
    /* truncate text with ellipsis if too long */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-top-width: 1px;
    border-style: solid;
    border-color: #ebebeb;
    border:none;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}

.lg-dropdown-content ul a {
    display: block;
    color: #111433;
    /* truncate text with ellipsis if too long */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-top-width: 1px;
    border-color: #242643;
    border-style: solid;
    border:none;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
}


.lg-dropdown-content.is-hidden > li > a, .lg-dropdown-content.move-out > li > a, .lg-dropdown-content ul.is-hidden > li > a, .lg-dropdown-content ul.move-out > li > a {
    opacity: 1;
}

.lg-dropdown-content.is-hidden, .lg-dropdown-content ul.is-hidden {
    /* push the secondary dropdown items to the right */
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

.lg-dropdown-content ul.move-out > li > a{
    /* push the dropdown items to the left when secondary dropdown slides in */
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    visibility: hidden;
}


.lg-dropdown-content .see-all a {
    color: #5f88c3;
}

.lg-dropdown-content.move-out > li > a{
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}
.lg-dropdown-content .lg-menu {
    top: 100%;
    height: auto;
    overflow: hidden;
    padding-bottom: 65px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(86, 86, 90, 0.5);
}

.lg-dropdown-content .lg-menu.is-hidden {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.lg-dropdown-content .lg-menu.fade-in {
    /* animate fade in */
    -webkit-animation: xs-fade-in 0.2s;
    -moz-animation: xs-fade-in 0.2s;
    animation: xs-fade-in 0.2s;
}
.lg-dropdown-content .lg-menu.fade-out {
    /* animate fade out */
    -webkit-animation: xs-fade-out 0.2s;
    -moz-animation: xs-fade-out 0.2s;
    animation: xs-fade-out 0.2s;
}

.lg-dropdown-content .lg-menu > .see-all {
    position: absolute;
    bottom: 1px;
    height: 45px;
    text-align: center;
}
.lg-dropdown-content .lg-menu > .see-all a {
    margin: 0;
    height: 100%;
    line-height: 45px;
    background: #ebebeb;
    pointer-events: auto;
    -webkit-transition: color 0.2s, background-color 0.2s;
    -moz-transition: color 0.2s, background-color 0.2s;
    transition: color 0.2s, background-color 0.2s;
}
.lg-dropdown-content .lg-menu > .see-all a:hover {
    color: #ffffff;
    background-color: #111433;
}

.lg-dropdown-content .lg-menu > li {
    /* 3 column */
    width: 33.333%;
    float: left;
}

.lg-dropdown-content .lg-menu::before {
    /* this is the separation line in the middle of the .lg-menu element */
    position: absolute;
    content: '';
    top: 290px;
    left: 15px;
    right: 15px;
    height: 1px;
    width: 100%;
    background-color: #ebebeb;
}

.lg-dropdown-content .lg-menu > li > a {
    color: #5f88c3;
    font-size: 1.6rem;
    margin-bottom: 10px;
    line-height: 30px;
    height: 30px;
    pointer-events: none;
}
.lg-dropdown-content .lg-menu > li > a::after, .lg-dropdown-content .lg-menu > li > a::before {
    /* hide the arrow */
    display: none;
}
.lg-dropdown-content .lg-menu.move-out > li > a {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.lg-dropdown-content .lg-menu > li {
    margin: 20px 0;
    border-right: 1px solid #ebebeb;
    padding: 0 30px;
    height: 250px;
}

.lg-dropdown-content .lg-menu > li > ul {
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
    transform: translate(0);
    position: relative;
    height: auto;
}
.lg-dropdown-content .lg-menu > li > ul > .go-back {
    display: none;
}
.lg-dropdown-content .lg-menu a {
    line-height: 22px;
    height: 20px;
    font-size: 1.3rem;
    padding-left: 0;
}

.lg-dropdown-content .lg-menu ul {
    padding-bottom: 25px;
    overflow: hidden;
    height: auto;
    min-height: 100%;
}
.lg-dropdown-content .lg-menu .go-back a {
    padding-left: 20px;
}

.lg-dropdown-content .lg-menu .go-back a::before, .lg-dropdown-content .lg-menu .go-back a::after {
    left: 0;
}
.lg-dropdown-content .lg-menu .see-all {
    /*position: absolute;*/
    /*bottom: 0;*/
    /*left: 0;*/
    width: 100%;
}

.lg-dropdown-content > .has-children > ul {
    visibility: hidden;
}
.lg-dropdown-content > .has-children > ul.is-active {
    /* when hover over .lg-dropdown-content items - show subnavigation */
    visibility: visible;
}
.lg-dropdown-content > .has-children > .lg-menu.is-active > li > ul {
    /* if .lg-menu is visible - show also subnavigation */
    visibility: visible;
}
.lg-dropdown-content > .has-children > a.is-active {
    /* hover effect for .lg-dropdown-content items with subnavigation */
    color: #5f88c3;
}
.lg-dropdown-content > .has-children > a.is-active::before, .lg-dropdown-content > .has-children > a.is-active::after {
    background: #5f88c3;
}



.has-children > a::before, .go-back a::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}


.has-children > a::after, .go-back a::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.has-children.root-menu > a::after {

    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    transform: rotate(130deg);
}


.has-children > a {
    padding-right: 40px;
}
.has-children > a::before, .has-children > a::after {
    /* arrow goes on the right side - children navigation */
    right: 20px;
    -webkit-transform-origin: 9px 50%;
    -moz-transform-origin: 9px 50%;
    -ms-transform-origin: 9px 50%;
    -o-transform-origin: 9px 50%;
    transform-origin: 9px 50%;
}

.lg-dropdown-content .go-back a {
    padding-left: 40px;
}
.lg-dropdown-content .go-back a::before, .lg-dropdown-content .go-back a::after {
    /* arrow goes on the left side - go back button */
    left: 20px;
    -webkit-transform-origin: 1px 50%;
    -moz-transform-origin: 1px 50%;
    -ms-transform-origin: 1px 50%;
    -o-transform-origin: 1px 50%;
    transform-origin: 1px 50%;
}

.root-menu.has-children > a::before, .root-menu.has-children > a::after {
    background: #fff;
}

.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
    /* arrow icon in CSS - for element with nested unordered lists */
    content: '';
    position: absolute;
    top: 50%;
    margin-top: 1px;
    display: inline-block;
    height: 2px;
    width: 10px;
    background: #ffffff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


@media only screen and (min-width: 1024px) {
    .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
        background: #b3b3b3;
    }
}
<head>
    <!-- css bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- import jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://rawgit.com/kamens/jQuery-menu-aim/master/jquery.menu-aim.js"></script>
    <!-- END import jquery -->
</head>


<!-- header start -->
<header class="header-pos navbar-fixed-top">
    <div class="header-bottom-area" >
        <div class="container-fluid">
            <div class="inner-container">
                <div class="row">

                    <div class="col-lg-12" style="padding:0px;">
                        <nav class="lg-dropdown dropdown-is-active">
                            <ul class="lg-dropdown-content">
                                <li class="has-children root-menu">
                                    <a href="#" class="">Products</a>

                                    <ul class="lg-menu is-hidden fade-out">
                                        <li class="see-all"><a href="#">All Products</a></li>
                                        <li class="has-children"><a href="#">Fashion</a>
                                            <ul class="is-hidden column-two move-out">
                                                <li class="go-back"><a href="#0">Products</a></li>
                                                <li class="see-all"><a href="#">All Fashion</a></li>
                                                <li class="has-children"><a href="#" title="Women Fashion">Women Fashion</a>
                                                    <ul class="column-two menu-level-2">
                                                        <li class="go-back back-width"><a href="#0">Back</a></li>
                                                        <li class="see-all"><a href="#">All Women Fashion</a></li>
                                                        <li><a href="#" title="Tudung">Tudung</a></li>
                                                        <li><a href="#" title="safari">safari</a></li>
                                                        <li><a href="#" title="safari 2">safari 2</a></li>
                                                        <li><a href="#" title="Jubah">Jubah</a></li>
                                                        <li><a href="#" title="Cheong Sam">Cheong Sam</a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="#" title="Baby Fashion">Baby Fashion</a></li>
                                                <li><a href="#" title="Man Fashion">Man Fashion</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

2 个答案:

答案 0 :(得分：0)

Safari列在列计数规则中。

在课程tmp_df$alpha中删除％规则中的min-height或在px中定义它。

答案 1 :(得分：0)

Solved.. with using bootstrap and jquery. thanks

相关问题
最新问题