Jesse Jesse - 22 days ago 7
CSS Question

Issues with DIVs and hover effect

I have been working on a sub menu for when I hover over main menu items. I have been trying to figure out a different way to display the same effect without the issues when moving my mouse slowly to the sub menu from the main menu items. (You will see the sub menu disappears.) Below is the jsFiddle. Any help would be much appreciated.

NOTE: It does appear slightly different on the jsFiddle as apposed to my website design, but that is irrelevant.



.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/

GvM GvM
Answer

REMOVE THE BORDER ON YOUR .menu

.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;
}
<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>

Comments