Hello I just try a menu that found on net and the result is: http://www.chaniabasket.gr/6/ Now what i need is to add the arrow icon on the right so the users will know that a sub menu exist : Arrow link: http://www.chaniabasket.gr/6/img/arrow.png And when the user move the mouse on messages to get a new sub menu.... Like when the user move the mouse on the main menu "Views" i need the same to happend when the user move mouse on messages and it must expand the extra submenu on the right... Can you please help me to do this? Thank you Here is my html code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS3 Menu - Impressionist UI - by Valeriu Timbuc for Design Modo</title> <link rel="stylesheet" href="css/style.css" media="screen"> <style type="text/css"> html, body { margin: 0; padding: 0; } body { margin: 5px; background: #f2f2f2 no-repeat top center; } ul.menu { margin: 250px auto 0 auto; } </style> <meta name="robots" content="noindex,follow" /> </head> <body> <ul class="menu"> <li><a href="#">My dashboard</a></li> <li><a href="#">Likes</a></li> <li><a href="#">Views</a> <ul> <li><a href="#" class="documents">Documents</a></li> <li><a href="#" class="messages">Messages</a></li> <li><a href="#" class="signout">Sign Out</a></li> </ul> </li> <li><a href="#">Uploads</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Documents</a></li> </ul> <!-- end .menu --> </body> </html> HTML: And here is my css: /* Reset */ .menu, .menu ul, .menu li, .menu a { margin: 0; padding: 0; border: none; outline: none; } /* Menu */ .menu { height: 40px; width: 505px; background: #4c4e5a; background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .menu li { position: relative; list-style: none; float: left; display: block; height: 40px; } /* Links */ .menu li a { display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition: color .2s ease-in-out; } .menu li:first-child a { border-left: none; } .menu li:last-child a{ border-right: none; } .menu li:hover > a { color: #8fde62; } /* Sub Menu */ .menu ul { position: absolute; top: 40px; left: 0; opacity: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s; } .menu li:hover > ul { opacity: 1; } .menu ul li { height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s; } .menu li:hover > ul li { height: 36px; overflow: visible; padding: 0; } .menu ul li a { width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; } .menu ul li:last-child a { border: none; } /* Icons */ .menu a.documents { background: url(../img/docs.png) no-repeat 6px center; } .menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; } .menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; } Code (markup):
Try this .menu ul li { background: url("http://www.chaniabasket.gr/6/img/arrow.png") no-repeat scroll right center transparent; height: 0; overflow: hidden; padding: 0; transition: height 0.25s ease 0.1s; } HTML:
Working great thanks And the last question how can i create a submenu inside the existing submenu? Thank you