Hi,
My testing website is http://www.brilliant-storage.com.hk/testsite/
When I move down the mouse from the menu bar down to the pull down down menu,the pull down menu will disappears depending on :
- when the header color is purple grey,the pull down menu will still exist
- when the header color is grey,the pull dowm menu will disappear !
Strange !!!
CSS of the relevant part is:
.h_menu4{
float:right;
}
.toggleMenu {
display: none;
background:#E46A3B;
width: 100%;
color: #FFF;
font-size: 1.5em;
}
li.logo a:hover{
background:none;
border-bottom:10px solid green;
}
.nav li.logo.active a, .nav li.logo a:hover {
border-bottom:none;
}
.nav {
list-style: none;
*zoom: 1;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 14em;
border-bottom:5px solid #2aacc8;
z-index:888;
}
.nav li a {
display: block;
padding: 10px 15px;
color: #555;
font-size: 0.85em;
font-weight: 600;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
text-decoration: none;
}
.nav li{
border-top:5px solid #E8EBF1;
}
.nav li:hover {
background:#fff;
border-top:5px solid #2aacc8;
}
.nav li {
position: relative;
}
.nav li.active{
border-top:5px solid #2aacc8;
background:#fff;
}
.nav > li > a.parent{
background: url(../images/arrow.png) no-repeat 15px 18px;
padding: 10px 10px 10px 30px;
}
.nav > li > a.parent:hover{
background: url(../images/arrow.png) no-repeat 15px 18px #fff;
padding: 10px 10px 10px 30px;
}
.nav > li {
float:left;
margin: 0 10px;
}
.nav > li > a:hover{
color:#2aacc8;
}
.nav > li.hover > ul {
left:-1px;
top:40px;
}
.nav li li.hover ul {
left: 100%;
-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;
-ms-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
}
.nav > li > li > a{
font-size: 0.85em;
padding: 10px 20px;
display: block;
color: #555;
background: #fff;
position: relative;
z-index: 9999;
font-weight: normal;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 100%;
text-decoration: none;
margin: 0;
text-transform: lowercase;
}
.nav li li {
border-top:none;
}
.nav li li:hover{
border-top:none;
}
.nav li li a{
text-transform: capitalize;
font-size:0.85em;
border-bottom: 1px solid #e8ebf1;
border-left: 1px solid #e8ebf1;
border-right: 1px solid #e8ebf1;
}
.nav li li a:hover{
color:#2aacc8;
}
.nav > li > ul {
position: absolute;
left: -9999px;
padding: 0;
z-index: 9999;
background:#fff;
}
@media screen and (max-width:768px){.h_logo4{text-align:center;float:none;margin:4% 0;}
.h_menu4{float:none;}
.toggleMenu{padding:5px 10px;width:100%;}
.nav li a{padding:10px 15px;}
.nav{background:rgba(255, 255, 255, 0.22);}
.active{display:block;}
.nav > li{float:none;}
.nav > li > .parent{background-position:95% 50% !important;}
.nav ul{display:block;width:100%;}
.nav > li.hover > ul , .nav li li.hover ul{position:static;}
}
@media screen and (max-width:640px){.toggleMenu{width:100%;}
}
@media screen and (max-width:480px){.toggleMenu{width:100%;}
}
@media screen and (max-width:320px){.toggleMenu{width:100%;}
}
The relevant HTML is:
<div class="h_menu4"><!-- start h_menu4 -->
<a class="toggleMenu" href="#">菜單</a>
<ul class="nav">
<li><a href="guardforce.htm">新倉優惠</a></li>
<li><a>迷你倉分店</a>
<ul>
<li><a href="guardforce.htm">紅磡(衛安)迷你倉</a></li>
<li><a href="bluebox-self-storage-14.htm">香港仔田灣(大生)迷你倉14樓</a></li>
<li><a href="bluebox-self-storage.htm">香港仔田灣(大生)迷你倉11樓</a></li>
<li><a href="tinwan-self-storage.htm">香港仔田灣(金山)迷你倉</a></li>
<li><a href="LuenHing-selfstorage.htm">荔枝角長沙灣(聯興)迷你倉</a></li>
<li><a href="kaming-self-storage.htm">荔枝角長沙灣(嘉名)迷你倉</a></li>
<li><a href="Kwuntongselfstorage.htm">觀塘(怡生)迷你倉</a></li>
<li><a href="NgauTauKok-selfstorage.html">牛頭角(泉源)迷你倉</a></li>
</ul>
</li>
<li><a>商務中心</a>
<ul>
<li><a href="ESbusinesscentre.html">觀塘(怡生)商務中心</a></li>
<li><a href="mailbox.html">信箱服務</a></li>
</ul>
</li>
<li><a href="storage-service.html">存倉服務及承諾</a></li>
<li><a href="contact.html">聯絡我們</a></li>
<li><a href="aboutus.html">關於我們</a></li>
</ul>
<script type="text/javascript" src="js/nav.js"></script>
</div><!-- end h_menu4 -->
<div class="clearfix"> </div>
</div><!-- end header_main4 -->
Can someone please help me on this problem.
Thanks & Best Regards,
Tony