Anybody know how to create a drop down menu with text and images?

by 2 replies
3
Hi,

I would like to create a drop down menu with both images and text and a vertical line dividing them. If you go to Cosmo their drop down nav bar is what I am trying to do. Any help would be appreciated. Thanks!
#website design #create #drop #images #menu #text
  • Marty,

    There is nothing special about the menu. It is constructed in the same way you would construct any other drop down menu. It is composed of unordered lists and list elements. There is another div inside the main menu list that has an image as its background.

    So

    <div class=”dropdown”>
    <ul>
    <li>
    <a href=”link”>Menu Item Text</a>
    </li>
    </ul>
    <div class”menu item with image”>
    <ul>
    <li>
    <a href=”link”>Text under image</a>
    </li>
    </ul>
    </div>
    </div>

    And the corresponding CSS

    .menuitemwithimage ul li {
    background-image: url(/cm/cosmopolitan/images/redes);}

    Naturally you will have to add some other styling to get the menu items and image positioned the way you want.

    Hope that helps you,

    Shawn
    • [ 1 ] Thanks
    • [1] reply
    • Hi Shawn,

      Thanks, that was a big help!
  • Banned
    [DELETED]
Join the discussion

Next Topics on Trending Feed