دوستو جئين ته مان پهرين به مينيو جي حوالي سان پنهنجي تحرير موڪلي چڪو آهيان. اڄ اوهان جي خدمت ۾ ڊراپ ڊائون مينيو ٺاهڻ لاء پنهنجي تحرير توهان جي سامهون رکان ٿو اميد ته پسند ايندي. دوستون جئين ته ڊراپ ڊائون ٺاهڻ ايڏو ڏکيو نه آهي پر هڪڙي قسم جي ٽرڪ آهي اميد ٿو رکان اهيا سمجھ ۾ ايندي. ويڊيو ڏسڻ لاء هن لنڪ تي ڪلڪ ڪريو. ڪوڊ جو لنڪ هي آهي جيڪو ڊاريڪٽ ڊانلوڊ ٿيندو. ڪوڊ: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Make Beautiful Drop Down Menus</title> <style type="text/css"> #menu{ margin: 0px; padding: 0px; } #menu ul{ margin: 0px; padding: 0px; line-height: 30px; } #menu ul li{ list-style-type: none; position: relative; float: left; } #menu a{ width: 130px; height: 30px; display: block; background: orange; text-decoration: none; text-align: center; color: black; font-size: 24px; font-family: Arial, Helvetica, sans-serif; border: 1px solid gray; text-shadow: 2px 1px 2px white; border-radius: 5px; margin-right: 8px; } #menu a:hover{ color: teal; background: white; } #menu ul ul{ position: absolute; visibility: hidden; top: 35px; } #menu ul li:hover ul li{ visibility: visible; } #menu ul ul li:hover a:hover{ color: white; background: teal; text-shadow: none; } </style> </head> <body style="background: pink;"> <div id="menu"> <ul> <li><a href="#">Product 1</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </li> <li><a href="#">Product 2</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </li> <li><a href="#">Product 3</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </li> <li><a href="#">Product 4</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </li> <li><a href="#">Product 5</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </li> <li><a href="#">Product 6</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </li> <li><a href="#">Product 7</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </li> <li><a href="#">Product 8</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </li> </ul> </div> </body> </html>
ادا اها توهان جي صحيح ڳالھ آهي مان ايئن ڪندس پر مان چيو ته اگر سمجھه نه اچي ته ان ۾ ڪوڊ جو اضافو ڪيم وري به مان سنڌي ۾ ٺاهڻ جي ڪوشش ڪندس. آءُ هڪ ٻي به پوري سنڌي ويب سائيٽ ٺاهيندس ان موضوع تي.
