css下拉菜單懸停1秒延遲

我有一個非常大的大型菜單下拉菜單，它有點惱火，它只是從滾動時試圖進入內容和超級菜單打開覆蓋大部分的屏幕。有沒有辦法到1秒。當你將鼠標懸停在菜單上時，會在菜單的css中延遲？css下拉菜單懸停1秒延遲

這裏的網站http://www.brokenarrowwear.com/

button, .button { 
    padding: 0.7rem 1.345rem 1.0625rem; /*move menu text height*/ 
    font-size: 1.5rem; 
} 
.button-group > li > button, .button-group > li .button { 
    height: 44px; /*move menu background height */ 
    margin-top: -10px; 
} 
.button-group > li { 
    height: 30px; 
    border-left: 1px solid #899299; 
} 
.button-group { 
    width: 104%; 
    letter-spacing: .014em; 
} 
.button-group .button { 
    font-family: 'Pathway Gothic One', sans-serif; 
    color: black; 
    background-color: ; 
    text-transform: uppercase; 
} 
.buttonleft { 
    border-left: 0 !important; 
} 
.button-group .button:hover { 
    background: white; 
    box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08); 
} 

/*Strip the ul of padding and list styling*/ 
.menu ul { 
    list-style-type:none; 
    padding:0; 
    position: absolute; 
} 

/*Style for menu links*/ 
.menu li a { 
    /*display:block;*/ 
    text-align: center; 
    text-decoration: none; 
    color: transparent; 
} 

/*Hover state for top level links*/ 
.menu li:hover .button { 
    background: white; 
    color: #828282; /* hover on menu links */ 
} 

.menu li:hover { 
    box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08); 
} 
/*Style for dropdown links*/ 
.menu li:hover ul .button { 
    background: white; 
    color: #161616; 
    height: 40px; 
    line-height: 40px; 
} 

/*Hover state for dropdown links*/ 
.menu li:hover ul a:hover { 
    color: #161616; 
} 

/*Hide dropdown links until they are needed*/ 
.menu li ul { 
    display: none; 
    z-index: 100; 
    width: 101.5%; /* width of drop down box */ 
} 

/*Make dropdown links vertical*/ 
.menu li ul li { 
    display: block; 
    float: none; 
    box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08); 
    -moz-box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08); 
    -webkit-box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08); 
} 

.hidden li { 
    width: 96%; 
    height: 461px; 
    background-color: white; 
} 
.hidden li img { 
    margin-top: -55px; 
} 
.hidden 
{ 
    left:0px; 
    margin-top: -20px; 
    margin-left: -2px; 
} 

/*Display the dropdown on hover*/ 
.menu ul li a:hover + .hidden, .hidden:hover { 
    display: block; 
}

來源

2015-12-09 Felicyia

的可能重複覆蓋它[延遲：？將鼠標懸停在CSS3] （http://stackoverflow.com/questions/8566090/delay-hover-in-css3） – SamHH

您可以使用轉換選項延遲徘徊。試試這個：

div:hover{ 
    transition-delay:1s; 
}

來源

2015-12-09 17:58:37

可以在foundation.css在下面的框更改 -

.button, button { 
... 
}

，或者你可以在你的style.css

來源

2015-12-09 18:10:28

css下拉菜單懸停1秒延遲

回答

相關問題