Web2 Style CSS Dynamic Menu with Arrows and Background-Images


Just another drop-down menu with web2 style background-images and arrows. We use two background images for < li > elements and two transparent background images(right positioned arrows with different directions) for < a > element. You can optimize background images as reducing width to 1 pixel. I dint use a smaller version, because we need to see images clearly. See demo of css menu.

CSS code of this page:


HTML code of menu elements:


Menu background image:

Hover background image:

Right and down arrows:

AttachmentSize
Download CSS-Menu and images (css-menu.zip)69.26 KB

Comments

How can I make this menu

How can I make this menu transparent?

You need to look a the css

You need to look a the css for the menu and change these lines to show that there is no background image.

#cssm1 * li { background: #abc url(bg2.png); }
#cssm1 * li:hover { background: #abc url(bg1.png); }

it`s imple

just
typebackground: transparent;

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <b> <pre> <h1> <h2> <h3> <h4> <h5> <h6> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <div> <style><img> <br> <blockquote>
  • Lines and paragraphs break automatically.
  • You may insert videos with [video:URL]

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.

CafeWebmaster.com(CW) is a free online community for webdevelopers and beginners. Anybody can share their code, articles, tips, tutorials, code-examples or other webdesign related material on the site. Newbies can submit their questions and reply to existing questions. CW does not guarantee or warrant reliability of code, data and information published on the site. Use the site on your own risk. The site takes no responsibility of direct or indirect loss or any kind of harm to its users. The site also doesn't take responsibility of infected files or source code with any kind of infection or viruses, worms, spywares, malwares, trojan horses. CW reserves the right to edit, move, or delete any of content for any reason.