• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1348
  • Last Modified:

Bootstrap 3 meny dropdown image bottom

Hallo! Can I put this in the bottom of the menu, or if it is possible to do the same with css without image.

This image bottom of the dropdown
image bottom off the dropdown
Look like this
shod look like this
Demo
http://www.smavitt.se/utv/

<!-- .meny -->
    <div class="navbar navbar-default navbar-static-top" style="margin-top: 20px;" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
       
        </div>
        <div class="collapse navbar-collapse"  style="margin-left: -15px;">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
               <li><a href="#contact"></a></li>
         
          </ul>


             <ul class="nav navbar-nav pull-right ">
           
            <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="images/cart_small.png" alt="varukorg" /> Varukorg: <b>2 varor</b><b class="caret"></b></a>
               
                <ul class="dropdown-menu varukorg-meny-ul">

                 <li class="varukorg-meny-li"><img src="http://www.euronicsoskarshamn.se/image/cache/data/Braun%20Series%203%20340s-500x500.jpg" class="varukorg-img" src="text" /> <div class="varukorg-text"><a href="" class="varukorg">BAJAJ - RCX3 - Rice
Cooker</a>
                 <div class="varukorg-kr">100 kr</div>
                 
                 </div>
                 
                    <div class="hr"></div>
                 
                 </li>


                   <li class="varukorg-meny-li"><img src="http://www.euronicsoskarshamn.se/image/cache/data/Braun%20Series%203%20340s-500x500.jpg" class="varukorg-img" alt="text" /> <div class="varukorg-text"><a href="" class="varukorg">BAJAJ - RCX3 - Rice
Cooker</a>
                 <div class="varukorg-kr">100 kr</div>
                 
                 </div>
                 
                    <div class="hr"></div>
                 
                 </li>
                    <li>
                    <img src="images/Till-kassan.png" class="varukorg-till-kassan" alt="Till-kassan" />

                        </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
          <!-- .meny end -->
0
MickeC
Asked:
MickeC
  • 3
  • 2
1 Solution
 
GaryCommented:
.dropdown-menu:after {
    content: url("/path-to-image/korg-dropdown-bottom.png");
}
0
 
MickeCAuthor Commented:
Look its dozent stck to the bootom...

http://www.smavitt.se/utv/
0
 
GaryCommented:
Change it to
.dropdown-menu li:last-child:after {
    content: url("images/korg_dropdown_bottom.png");
}

Open in new window


and add
.dropdown-menu li:last-child {
    height: 45px;
}

Open in new window

0
 
MickeCAuthor Commented:
Thankz....
0
 
GaryCommented:
Why only a grade B?
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now