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

2 replies
  • WEB DESIGN
  • |
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!
#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
    Signature
    Outsource to the experts...

    We customize your Blog, eBook, Press Release and Sale Copy content with your message.

    {{ DiscussionBoard.errors[7577490].message }}
    • Profile picture of the author Marty M
      Originally Posted by TheContentAuthority View Post

      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
      Hi Shawn,

      Thanks, that was a big help!
      {{ DiscussionBoard.errors[7605646].message }}

Trending Topics