მენიუ/Menu 2025-07-08 |
HTML კოდი Code <ul id="menubar"> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a> <ul class="sub1"> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a></li> </ul> </li> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a> <ul class="sub2"> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a></li> </ul> </li> <li><a href="#">Categories</a></li> <li><a href="#">Categories</a></li> </ul> Css კოდი Code body{ font-family: serif; font-size: 20px; } #menubar li{ float: left; position: relative; text-align: center; list-style: none; width: 125px; } #menubar a{ text-decoration: none; display: block; background-color: #363636; color: #fff; padding: 17px; padding-bottom:15px; box-shadow: 2px 2px 3px rgba(0,0,0,2) inset; line-height: 24px; margin: 1px; border-radius:15px; } #menubar a:hover{ background-color: #b5b5b5; } #menubar ul.sub1{ display: none; position: absolute; left:12px; } #menubar .sub1 a{ margin: 2px; } #menubar li:hover .sub1{ display: block; } #menubar .sub1 a:hover{ background-color: #ff7b00; color:#fff; } #menubar ul.sub2{ display: none; position: absolute; left:12px; } #menubar .sub2 a{ margin: 2px; } #menubar li:hover .sub2{ display: block; } #menubar .sub2 a:hover{ background-color: #ff7b00; color:#fff; } |
სულ კომენტარები: 0 | |