1
我一直在研究子菜單，當我將鼠標懸停在主菜單項上時。我一直試圖找出一種不同的方式來顯示相同的效果，而不會將問題緩慢地移動到主菜單項的子菜單中。 （你會看到子菜單消失。）下面是jsFiddle。任何幫助將非常感激。DIV和懸停效果問題
注意：它確實在jsFiddle上看起來與我的網站設計略有不同，但這是無關緊要的。
.header {
\t height: auto;
\t width: 70vw;
\t
\t display: inline-block;
\t
\t background-color: #222;
\t \t
\t color: #fff;
\t
\t padding-top: 15px;
\t padding-bottom: 75px;
\t
\t border-top-left-radius: 10px;
\t border-top-right-radius: 10px;
}
.menu {
\t height: auto;
\t width: 100%;
\t
\t top: 0px;
\t
\t text-align: center;
\t
\t display: table;
\t table-layout: fixed;
\t
\t background-color: transparent;
\t
\t border: thin solid transparent;
\t
\t border-spacing: 0px;
\t border-collapse: collapse;
}
.menu-item {
\t font-size: 14px;
\t font-family: poppins;
\t \t
\t color: #9e9e9e;
\t
\t padding-top: 20px;
\t padding-bottom: 20px;
\t
\t height: auto;
\t width: auto;
\t
\t background-color: transparent;
\t
\t display: table-cell;
\t
text-align: center;
\t
\t cursor: pointer;
\t
\t text-decoration: none;
}
.menu-item:hover {
\t color: #fff;
\t background-color: #ff6e00;
}
.menu div {
\t border-right: solid thin #333;
\t border-left: solid thin #333;
}
.menu div:last-child {
\t border-right: none;
}
.menu div:first-child {
\t border-left: none;
}
.sub-menu {
\t height: auto;
\t width: 100%;
\t
\t display: table;
\t table-layout: fixed;
\t
\t border-spacing: 0px;
\t border-collapse: collapse;
}
.sub-menu-item {
\t display: table-cell;
\t
\t height: auto;
\t width: auto;
\t
\t font-size: 14px;
\t font-family: raleway;
\t
\t color: #999;
\t background-color: #333;
\t
\t padding-top: 20px;
\t padding-bottom: 20px;
\t
\t cursor: pointer;
}
.sub-menu-item:hover {
\t color: #fff;
\t background-color: #666;
}
.sub-menu-item-icon {
\t height: auto;
\t width: auto;
\t
\t padding-bottom: 20px;
\t
\t text-align: center;
\t
\t vertical-align: middle;
}<div class="header">
\t
<div class="menu">
\t
\t <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 & Pricing</div>
<div class="menu-item">Testimonials</div>
<div class="menu-item">Design Hub</div>
<div class="menu-item">Contact Us</div>
\t
</div>
<div class="sub-menu" id="sub-home" onMouseOver="document.getElementById('sub-home').style.display ='table';" onMouseOut="document.getElementById('sub-home').style.display = 'none';">
\t
\t <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';">
\t
\t <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/
LOL我不能相信我忽略了！這是令人尷尬的哈哈哈感謝隊友:) – Jesse
當我通過相關的子菜單時，我將如何將主菜單項設置爲其「懸停」狀態？ – Jesse
你的子菜單應該是主菜單項的子項。或者您可以設置子菜單的懸停來觸發菜單項 – GvM