CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Robert
Robert

Reputation: 812

Small issue on CSS

I try to add a bootstrap dropdown in my page, but I have a problem with the top part of the dropdown, I think is something related with shadows, maybe someone can help me with this?

enter image description here

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

Upvotes: 0

Views: 55

Answers (2)

S. Nadezhnyy
S. Nadezhnyy

Reputation: 582

Try to add z-index to .dropdown-menu:

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

Upvotes: 0

ketan
ketan

Reputation: 19341

Remove box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.2); from .dropdown-menu:after will solve your issue.

Or you should make change in shadow like:

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

Working Fiddle

Upvotes: 1

Related Questions