將鼠標光標移動到底部時將下拉菜單下拉下來

我遇到了一個問題：當我嘗試在下拉菜單的子菜單上移動鼠標光標時，出於某種動機而失望。我試圖在文件js中檢查文件css結束，但在第三天再次找不到解決方案..我認爲這可能是類css中的[block]有問題。有人看到有沒有什麼錯誤，最終如何解決這個問題？在這裏下載一個圖像的代碼。提前致謝。將鼠標光標移動到底部時將下拉菜單下拉下來

這裏的另一個圖像...也許更好理解：這裏頂一下鏈接代碼： /* ===== ================================================== ===================== */

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

這裏關於底部的代碼下拉：

.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的一部分：

<?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; ?>

來源

2017-07-14 alb084

問題究竟在哪裏？如果你還可以顯示HTML部分？ –

在嘗試小提琴 - https://jsfiddle.net/456f2sf7/

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

只是減少上邊距爲20px，確保下拉菜單沒有消失，因爲它是可見的只是懸停。

來源

2017-07-14 15:07:35

藍線是指主頁，CHI SIAMO，NEWS等標題欄嗎？您需要修改該欄的css，以便從子菜單中不會丟失焦點。 –

你是說，當你移到「ITALIANO」時，子菜單消失了嗎？ –

是的！......我在最後一張照片中表現得如何。 – alb084

將鼠標光標移動到底部時將下拉菜單下拉下來

回答

相關問題