菜單行爲不正確

我有一個帶有子菜單的菜單，但是當我將鼠標懸停在父菜單上時，它的行爲不正常（當我將鼠標懸停在另一個父菜單上時，父菜單正在移動）。如何解決這個問題？菜單行爲不正確

CSS：

#site-navigation .menu{ float: left; } 
.logo-center #site-navigation .menu{ display: inline-block; float: none; } 
#site-navigation ul li{ position: relative; } 
#site-navigation .menu > ul > li{ float: left; } 
#site-navigation .menu > ul > li > a{ color: #d31716; display: inline-block; font-size: 15px; font-weight: 600; padding: 0 10px; text-transform: initial; letter-spacing: 1px; font-family: 'Open Sans', sans-serif; margin-top: 19px; text-decoration: none; } 
.logo-center #site-navigation .menu > ul > li > a{ line-height: 20px; } 
.logo-center #site-navigation .menu > ul > li > a{ border-left: none; } 

/*-Main Menu-*/ 
#site-navigation .menu > ul > li:hover > a:before, #site-navigation .menu > ul > li.current_page_item > a:before, #site-navigation .menu > ul > li.current-menu-item > a:before, #site-navigation .menu > ul > li.current_page_ancestor > a:before, #site-navigation .menu > ul > li.current-menu-ancestor > a:before{ text-decoration: none; content: ""; height: 5px; left: 0; position: absolute; top: -5px; width: 100%; } 
.logo-center #site-navigation .menu > ul > li:hover > a:before, .logo-center #site-navigation .menu > ul > li.current_page_item > a:before, .logo-center #site-navigation .menu > ul > li.current_page_ancestor > a:before, .logo-center #site-navigation .menu > ul > li.current-menu-ancestor > a:before{ display: none; } 
#site-navigation .menu ul ul{ background: none repeat scroll 0 0 #FFF; border-bottom: 2px solid #d31716; border-top: 2px solid #d31716; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); display: none; left: 0; position: absolute; top: 100%; transition: all 0.3s ease-in-out 0s; z-index: 99999; font-family: 'Open Sans Bold', sans-serif; } 
#site-navigation .menu li:hover > ul{ display: block; } 
#site-navigation .menu ul ul li{ border-bottom: 2px solid #DDD; display: block; font-size: 13px; line-height: 20px; margin: 0 !important; text-align: left; } 
#site-navigation .menu ul ul li:last-child{ border-bottom: none; } 
#site-navigation .menu ul ul li a{ color: #666; display: block; font-weight: 300; min-width: 140px; padding: 10px 15px; position: relative; text-decoration: none; } 
#site-navigation .menu ul ul li > a:hover:before, #site-navigation .menu ul ul li.current_page_item > a:before{ background: #F0563D; content: ""; height: 2px; left: 0; position: absolute; top: -2px; width: 100%; } 
#site-navigation .menu ul ul li > a:hover, #site-navigation .menu ul ul li.current_page_item > a{ color: #d31716; } 
#site-navigation .menu ul ul ul{ top: -2px; right: 100%; left: auto; } 

/*-With Sub pages-*/ 
#site-navigation .menu > ul > li.menu-item-has-children > a:before{ color: #FFF; content: '\f107'; font-family: FontAwesome; font-size: 10px; vertical-align: 1px; } 
#site-navigation .menu > ul > li.menu-item-has-children > a::after{ content: '\f107'; font-family: FontAwesome; font-size: 14px; margin-left: 7px; vertical-align: 1px; } 
#site-navigation .menu > ul > li > ul > li.menu-item-has-children > a::after{ color: rgb(34, 34, 34); content: '\f105'; font-family: FontAwesome; font-size: 10px; vertical-align: 1px; float: right; }

來源

2015-10-07 User014019

*這不是正確行爲*請解釋更多。父菜單項有一個移位，是嗎？ –

請提供相關的代碼，我們不能通過您的整個代碼 –

請參閱更新的問題 – User014019

刪除這個CSS

#site-navigation .menu > ul > li:hover > a::before, #site-navigation .menu > ul > li.current_page_item > a::before, #site-navigation .menu > ul > li.current-menu-item > a::before, #site-navigation .menu > ul > li.current_page_ancestor > a::before, #site-navigation .menu > ul > li.current-menu-ancestor > a::before{ content: ""; 
height: 5px; 
left: 0; 
position: absolute; 
text-decoration: none; 
top: -5px; 
width: 100%;}

來源

2015-10-07 09:00:38

菜單行爲不正確

回答

相關問題