Solved

Bootstrap 3 meny dropdown image bottom

Posted on 2013-12-28
5
1,287 Views
Last Modified: 2013-12-30
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
Comment
Question by:MickeC
  • 3
  • 2
5 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
.dropdown-menu:after {
    content: url("/path-to-image/korg-dropdown-bottom.png");
}
0
 

Author Comment

by:MickeC
Comment Utility
Look its dozent stck to the bootom...

http://www.smavitt.se/utv/
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
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
 

Author Comment

by:MickeC
Comment Utility
Thankz....
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Why only a grade B?
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now