关于CSS的小问题

Question

我尝试在我的页面中添加一个引导下拉列表，但是我对下拉列表的顶部有一个问题，我认为这与阴影有关，也许有人可以帮我解决这个问题？

HTML：

<ul class="links-dropdown links">
    <li class="dropdown Inloggen">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-user pull-left"></span><b class="caret"></b></a>
        <ul class="dropdown-menu" id="menu1" style="width: 300px;">
            <li style="width: 100%"><span class="glyphicon glyphicon-menu-right pull-left"></span><a href="<?php echo $this->getUrl('customer/account/') ?>" class="dropdown-toggle"><?php echo $this->__('Account Dashboard') ?></a></li>
            <li style="width: 100%"><span class="glyphicon glyphicon-menu-right pull-left"></span><a href="<?php echo $this->getUrl('customer/account/edit/') ?>" class="dropdown-toggle"><?php echo $this->__('Account Information') ?></a></li>
            <li style="width: 100%"><span class="glyphicon glyphicon-menu-right pull-left"></span><a href="<?php echo $this->getUrl('customer/address/') ?>" class="dropdown-toggle"><?php echo $this->__('Address Book') ?></a></li>
            <li style="width: 100%"><span class="glyphicon glyphicon-menu-right pull-left"></span><a href="<?php echo $this->getUrl('sales/order/history/') ?>" class="dropdown-toggle"><?php echo $this->__('My Orders') ?></a></li>
            <li style="width: 100%"><span class="glyphicon glyphicon-menu-right pull-left"></span><a href="<?php echo $this->getUrl('customer/account/logout') ?>" class="dropdown-toggle"><?php echo $this->__('Log Out') ?></a></li>
         </ul>
    </li>
    <?php else: ?>
        <li><a href="javascript:void(0)" id="alogin" class="top-link-last dropdown-toggle"><span class="glyphicon glyphicon-user pull-left"></span><span class="text"><?php echo $this->__('Account') ?></span></a></li>
    <?php endif; ?>
</ul>

CSS：

.links-dropdown .dropdown-menu {
  border-radius: 0;
  box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.2);
  color: #30a5ff;
  font-size: 170%;
  font-weight: 600;
  left: -250px;
  line-height: 1em;
  padding: 0;
  position: absolute;
}

.dropdown-menu:after {
  position: absolute;
  right: 0px;
  top: -40px;
  display: inline-block;
  border-right: 40px solid #ffffff;
  border-bottom: 40px solid #ffffff;
  border-left: 40px solid #ffffff;
  border-topt: 40px solid #ffffff;
  content: '';
  box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.2);
}

Answer 1

从box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.2);移除.dropdown-menu:after将解决您的问题。

或者您应该在阴影中进行更改，如：

box-shadow: 1px 0 1px 0 rgba(0, 0, 0, 0.1);

<强> Working Fiddle

Answer 2

尝试将z-index添加到.dropdown-menu：

.dropdown-menu {
  z-index:100;
}