Symbianize Forum

Most of our features and services are available only to members, so we encourage you to login or register a new account. Registration is free, fast and simple. You only need to provide a valid email. Being a member you'll gain access to all member forums and features, post a message to ask question or provide answer, and share or find resources related to mobile phones, tablets, computers, game consoles, and multimedia.

All that and more, so what are you waiting for, click the register button and join us now! Ito ang website na ginawa ng pinoy para sa pinoy!

HELP!!! Menu List With Submenus

emaxx18

Professional
Advanced Member
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

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
 

Attachments

  • menu_scroll.jpg
    menu_scroll.jpg
    25.5 KB · Views: 5
Back
Top Bottom