将鼠标光标移动到其上时，下拉按钮消失

Question

I've got a problem : when i try to move the cursor of the mouse on the sub-menu of the drop down, for some motive it disappier. I try to check in file css end in its file js but at the third day again i didn't find the solutions..i think that could be some problem with [block] in class css. does someone see if there something that wrong end eventually how could operate to resolve this problem? under here post an image with the code. Thank in advance.

Here another image...maybe understanding better: here the code about the top-link : /* ======================================================================================= */

-->   .top-link { background: #f7f7f7;line-height: 35px;  position: relative;color: #6a6a6a; border-bottom: 1px solid #d8d8d8;}
    .form-language, .form-currency { float: left;}
    .form-language label { display: none;}
    .form-language select, .form-currency select { padding: 4px 10px; background: #f2f2f2;}
    p.welcome-msg { margin: 0 0 0 25px; float:left; padding: 5px 0;}
    .top-link ul.links {   padding: 5px 0;}
    .top-link ul.links li { padding:0 15px 0 0; float: left;}
    .top-link ul.links li a {  color: #6a6a6a;font-size: 11px;text-transform: uppercase; }
    .top-link ul.links li a:hover {  }
    .call-phone{text-align: right;}
    .call-phone span{color:#999;font-weight: bold;}

here the code about bottom Drop down :

.drop-lang {
    list-style: none;
 padding: 0;
 margin: 0;float: right;
}
.drop-lang .drop-trigger {
    position: relative;
    z-index: 9999;
    float: right;
    padding: 0 5px 0 10px;
}

.drop-lang li a {
    position: relative;
    padding: 5px 0 5px 0;
    display: block;
    color: #6a6a6a;
    text-transform:uppercase;
    font-weight: normal;
    font-size: 11px;
    z-index: 9999;
}

.drop-lang .drop-trigger .sub-lang {
    position: absolute;
    top:40px;
    left:-1px; /* dropdown left or right */
    list-style: none;
    padding:0 11px 0 4px;
    margin: 0;
    display: none;  
    background: #f7f7f7;
    border: 1px solid #d8d8d8;
    border-top: none
    z-index: 9999;
}
.drop-lang .drop-trigger:hover .sub-lang {
    top:45px;
    display: block;
}

.drop-lang .sub-lang li a { padding: 0 5px; line-height: 22px; display: block; color: #666; text-transform:uppercase; font-weight: normal; font-size: 11px; border-top: 1px solid #d8d8d8;  border-right:0;border-left:0; border-bottom:0; border-radius:0;}
.drop-lang .sub-lang li a:hover { }

Html/php part :

<?php if(count($this->getStores())>1): ?>
<div class="form-language"> 
    <label for="select-language"><?php echo $this->__('Language:') ?></label>
    <ul class="drop-lang">
        <li class="drop-trigger">
            <?php foreach ($this->getStores() as $_lang): ?>
            <?php if($_lang->getId() == $this->getCurrentStoreId()): ?>
            <a class="<?php echo $_lang->getCode() ?>" href="<?php echo $_lang->getCurrentUrl() ?>"><?php echo $this->htmlEscape($_lang->getName()) ?><i class="fa fa-angle-down"></i></a>
            <?php endif?>
            <?php endforeach; ?>
        <ul class="sub-lang">
    <?php foreach ($this->getStores() as $_lang): ?>
        <?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' class="selected"' : '' ?>
        <li><a class="<?php echo $_lang->getCode() ?>" href="<?php echo $_lang->getCurrentUrl() ?>"<?php //echo $_selected; ?>><?php echo $this->htmlEscape($_lang->getName()) ?></a></li>
    <?php endforeach; ?>
        </ul>
        </li>
    </ul>
</div>
<?php endif; ?>

Answer 1

Try the fiddle at - https://jsfiddle.net/456f2sf7/

.drop-lang .drop-trigger:hover .sub-lang {
    top:20px;//Updated value 
    display: block;
}

Just decreasing the top margin to 20px, ensures that the dropdown does not disappear as it is visible only on hover.