- Messages
- 168
- Reaction score
- 1
- Points
- 28
Mga boss patulong naman kung anong CSS/HTML codes ang pwede ko idagdag para magkaroon ng submenu ang drop down list ko. Nag ask narin ako kay big G and i tried to add those codes sa current CSS and HTML codes ko pero not working.
Eto po yung CSS ng dropdown list ko
At eto naman ang HTML Codes
Sa Programmer menu gusto ko ilagay ay ang mga ito WEB DESIGN/PROGRAMMING, MOBILE APPS, GAME DEVELOPER and APPS DEVELOPER
Yung ganito po ang output na gusto kong ma achieved. tHANKS IN ADVANCEPO SA MAKAKATULONG SA AKIN.
View attachment 330168
Eto po yung CSS ng dropdown list ko
Code:
/* CSS Main Menu */
#menu-wrapper {transform:translateZ(0);-webkit-transform:translateZ(0);}
#gvmenu{background:#F34108;;margin:0 auto 20px auto;width:100%;height:auto;text-align:left;max-width:1010px}
#gvmenu ul,#gvmenu li{margin:0;padding:0;list-style:none}
#gvmenu ul{display:inline-flex;position:relative}
#gvmenu li{float:left;display:inline-block;position:relative;font-size:14px;font-weight:700;border-right:1px solid rgba(0,0,0,0.1);}
#gvmenu li:last-child{border:0}
#gvmenu li a{color:#fff}
#gvmenu a{display:block;background:#F34108;padding:15px 20px;text-decoration:none;color:#fff;transition:all .2s}
#gvmenu li:hover > a{background:#015f9e;color:#fff}
#gvmenu li a:hover{background:#015f9e;color:#fff}
#gvmenu input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}
#gvmenu label{font-size:30px;font-weight:400;display:none;width:35px;height:51px;line-height:51px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#gvmenu ul.menus{height:auto;overflow:hidden;width:160px;background:#fff;position:absolute;z-index:99;display:none;color:#dadce0;box-shadow:0 0 1px 0 rgba(0,0,0,0.2)}
#gvmenu ul.menus a{background:#fff;color:#F34108;display:block;padding:10px;line-height:20px;border-bottom:1px solid #f5f5f5}
#gvmenu ul.menus a:hover{padding-left:17px;color:#53606f;}
#gvmenu ul.menus li{display:block;width:100%;font-size:13px;font-weight:400;text-transform:none;border-right:0;transition:all 0.1s ease-in-out}
#gvmenu ul.menus li:hover{width:100%}
#gvmenu ul.menus li:first-child a{border-top:none}
#gvmenu ul.menus li:last-child a{border-bottom:none}
#gvmenu ul.menus li:hover a{background:#015f9e;color:#FBFBEF;font-weight: bold;}
#gvmenu li:hover ul.menus{display:block}
At eto naman ang HTML Codes
Code:
<nav id='gvmenu'>
<input type='checkbox'/>
<label/>
<ul>
<li class='homers'><a href='/'>Home</a></li>
<li><a class='ai' href='#' >Freelancers<span class='caret'/></a></li>
<ul class='menus'>
<li><a href='#'>Technician</a></li>
<li><a href='#'>Programmer</a></li>
<li><a href='#'>View All</a></li>
</ul>
</nav>
</div>
Sa Programmer menu gusto ko ilagay ay ang mga ito WEB DESIGN/PROGRAMMING, MOBILE APPS, GAME DEVELOPER and APPS DEVELOPER
Yung ganito po ang output na gusto kong ma achieved. tHANKS IN ADVANCEPO SA MAKAKATULONG SA AKIN.
View attachment 330168