Question

当我将鼠标悬停在主菜单项上时，我一直在处理子菜单。我一直试图找出一种不同的方式来显示相同的效果，而不会出现问题，从主菜单项缓慢移动鼠标到子菜单。（您将看到子菜单消失。）下面是jsFiddle。任何帮助将不胜感激。

注意：jsFiddle与我的网站设计相比确实略有不同，但这是无关紧要的。

.header {
	height: auto;
	width: 70vw;
	
	display: inline-block;
	
	background-color: #222;
		
	color: #fff;
	
	padding-top: 15px;
	padding-bottom: 75px;
	
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.menu {
	height: auto;
	width: 100%;
	
	top: 0px;
	
	text-align: center;
	
	display: table;
	table-layout: fixed;
	
	background-color: transparent;
	
	border: thin solid transparent;
	
	border-spacing: 0px;
	border-collapse: collapse;
}
.menu-item {
	font-size: 14px;
	font-family: poppins;
		
	color: #9e9e9e;
	
	padding-top: 20px;
	padding-bottom: 20px;
	
	height: auto;
	width: auto;
	
	background-color: transparent;
	
	display: table-cell;
	
    text-align: center;
	
	cursor: pointer;
	
	text-decoration: none;
}
.menu-item:hover {
	color: #fff;
	background-color: #ff6e00;
}
.menu div {
	border-right: solid thin #333;
	border-left: solid thin #333;
}
.menu div:last-child {
	border-right: none;
}
.menu div:first-child {
	border-left: none;
}



.sub-menu {
	height: auto;
	width: 100%;
	
	display: table;
	table-layout: fixed;
	
	border-spacing: 0px;
	border-collapse: collapse;
}
.sub-menu-item {
	display: table-cell;
	
	height: auto;
	width: auto;
	
	font-size: 14px;
	font-family: raleway;
	
	color: #999;
	background-color: #333;
	
	padding-top: 20px;
	padding-bottom: 20px;
	
	cursor: pointer;
}
.sub-menu-item:hover {
	color: #fff;
	background-color: #666;
}
.sub-menu-item-icon {
	height: auto;
	width: auto;
	
	padding-bottom: 20px;
	
	text-align: center;
	
	vertical-align: middle;
}

<div class="header">
	
  <div class="menu">
    	
    	<div class="menu-item" onMouseOver="document.getElementById('sub-home').style.display = 'table';"  onMouseOut="document.getElementById('sub-home').style.display = 'none';">Home</div>
        
        <div class="menu-item" onMouseOver="document.getElementById('sub-pricing').style.display = 'table';"  onMouseOut="document.getElementById('sub-pricing').style.display = 'none';">Plans &amp; Pricing</div>
        <div class="menu-item">Testimonials</div>
        <div class="menu-item">Design Hub</div>
        <div class="menu-item">Contact Us</div>
    	
    </div>
    
    <div class="sub-menu" id="sub-home" onMouseOver="document.getElementById('sub-home').style.display ='table';" onMouseOut="document.getElementById('sub-home').style.display = 'none';">
    	
    	<div class="sub-menu-item">About Us</div>
        <div class="sub-menu-item">Our Mission</div>
        
    </div>
    
    <div class="sub-menu" id="sub-pricing" onMouseOver="document.getElementById('sub-pricing').style.display = 'table';" onMouseOut="document.getElementById('sub-pricing').style.display = 'none';">
    	
    	<div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Website Hosting</div>
        <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Email Hosting</div>
        <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Domain Names</div>
        <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Other Services</div>
        
    </div>
    
</div>

https://jsfiddle.net/oqjwvv8m/

Answer 1

删除.menu

上的边框

＆＃13;

.header {
	height: auto;
	width: 70vw;
	
	display: inline-block;
	
	background-color: #222;
		
	color: #fff;
	
	padding-top: 15px;
	padding-bottom: 75px;
	
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.menu {
	height: auto;
	width: 100%;
	
	top: 0px;
	
	text-align: center;
	
	display: table;
	table-layout: fixed;
	
	background-color: transparent;
	
   
	
	border-spacing: 0px;
	border-collapse: collapse;
}
.menu-item {
	font-size: 14px;
	font-family: poppins;
		
	color: #9e9e9e;
	
	padding-top: 20px;
	padding-bottom: 20px;
	
	height: auto;
	width: auto;
	
	background-color: transparent;
	
	display: table-cell;
	
    text-align: center;
	
	cursor: pointer;
	
	text-decoration: none;
}
.menu-item:hover {
	color: #fff;
	background-color: #ff6e00;
}
.menu div {
	border-right: solid thin #333;
	border-left: solid thin #333;
}
.menu div:last-child {
	border-right: none;
}
.menu div:first-child {
	border-left: none;
}



.sub-menu {
	height: auto;
	width: 100%;
	display: table;
	table-layout: fixed;
	border-spacing: 0px;
	border-collapse: collapse;
}
.sub-menu-item {
	display: table-cell;
	
	height: auto;
	width: auto;
	
	font-size: 14px;
	font-family: raleway;
	
	color: #999;
	background-color: #333;
	
	padding-top: 20px;
	padding-bottom: 20px;
	
	cursor: pointer;
}
.sub-menu-item:hover {
	color: #fff;
	background-color: #666;
}
.sub-menu-item-icon {
	height: auto;
	width: auto;
	
	padding-bottom: 20px;
	
	text-align: center;
	
	vertical-align: middle;
}

＆＃13;

<div class="header">
	
  <div class="menu">
    	
    	<div class="menu-item" onMouseOver="document.getElementById('sub-home').style.display = 'table';"  onMouseOut="document.getElementById('sub-home').style.display = 'none';">Home</div>
        
        <div class="menu-item" onMouseOver="document.getElementById('sub-pricing').style.display = 'table';"  onMouseOut="document.getElementById('sub-pricing').style.display = 'none';">Plans &amp; Pricing</div>
        <div class="menu-item">Testimonials</div>
        <div class="menu-item">Design Hub</div>
        <div class="menu-item">Contact Us</div>
    	
    </div>
    
    <div class="sub-menu" id="sub-home" onMouseOver="document.getElementById('sub-home').style.display ='table';" onMouseOut="document.getElementById('sub-home').style.display = 'none';">
    	
    	<div class="sub-menu-item">About Us</div>
        <div class="sub-menu-item">Our Mission</div>
        
    </div>
    
    <div class="sub-menu" id="sub-pricing" onMouseOver="document.getElementById('sub-pricing').style.display = 'table';" onMouseOut="document.getElementById('sub-pricing').style.display = 'none';">
    	
    	<div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Website Hosting</div>
        <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Email Hosting</div>
        <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Domain Names</div>
        <div class="sub-menu-item"><div class="sub-menu-item-icon"><img src="file:///C|/Users/jesse/Desktop/sight.png" width="100" height="100" alt=""/></div>Other Services</div>
        
    </div>
    
</div>

＆＃13;

Answer 2

你的<div class="menu">有边框。因此，当您将光标移动到子菜单时，您会点击其间的边框，然后您不再悬停菜单，因此子菜单会消失。

要解决此问题，请将此添加到您的css中（删除菜单底部的边框）：

.menu {
    ...
    border: thin solid transparent;
    border-bottom: 0px; /* ADDED */
    ...
}

请参阅jsfiddle

DIV和悬停效果的问题

2 个答案: