nimaaamin
جمعه 03 اردیبهشت 1395, 11:03 صبح
بهترین راه کار اینه که با html , css طراحیش کنی هم منعطف هم شکلی که بخوای میتونی درش بیاری
<style> nav { background-color: #fff; border: 1px solid #dedede; border-radius: 4px; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); color: #888; display: block; margin: 8px 2px 8px 22px; overflow: hidden; width: 99%; }
nav ul { margin: 0; padding: 0; }
nav ul li { display: inline-block; list-style-type: none; transition: all 0.2s; } nav > ul > li > a > .caret { border-top: 4px solid #aaa; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; display: inline-block; height: 0; width: 0; vertical-align: middle; transition: color 0.1s linear; }
nav > ul > li > a { color: #aaa; display: block; line-height: 56px; padding: 0 24px; text-decoration: none; }
nav > ul > li:hover { background-color: rgb( 40, 44, 47 ); }
nav > ul > li:hover > a { color: rgb( 255, 255, 255 ); }
nav > ul > li:hover > a > .caret { border-top-color: rgb( 255, 255, 255 ); } nav > ul > li > div { background-color: rgb( 40, 44, 47 ); border-top: 0; border-radius: 0 0 4px 4px; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); display: none; margin: 0; opacity: 0; position: absolute; width: 165px; visibility: hidden; z-index: 100; }
nav > ul > li:hover > div { display: block; opacity: 1; visibility: visible; }
nav > ul > li > div ul > li { display: block; }
nav > ul > li > div ul > li > a { color: #fff; display: block; padding: 12px 24px; text-decoration: none; }
nav > ul > li > div ul > li:hover > a { background-color: rgba( 255, 255, 255, 0.1); } </style> <nav > <ul> <li><a href="home.html">Home</a></li> <li> <a href="products.html">Products <span class="caret"></span></a> <div> <ul> <li><a href="products.html#chair">Chair</a></li> <li><a href="products.html#table">Table</a></li> <li><a href="cooker.html">Cooker</a></li> </ul> </div> </li> <li><a href="about.html">About</a></li> <li><a href="help.html">Help</a></li> </ul> </nav>