Grumby HTML 프레임 워크 탐색 하위 레벨

Question

누구나 http://gumbyframework.com을 사용합니까? 현재 프레임 워크와 함께 제공되는 탐색 메뉴는 하나의 하위 수준 만 지원합니다. 두 번째 수준의 하위 탐색의 오른쪽에서 오는 다른 수준의 탐색 항목을 추가하려는 경우 누구든지 나를 도울 수 있습니까?

  <nav class="navbar"> 
      <a href="#" class="toggle" data-for=".navbar > ul"><img src="img/icon_nav_toggle.gif" /></a>          <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Solutions</a> 
         <div class="dropdown"> 
          <ul> 
           <li><a href="#">Permanent Access</a></li> 
           <li><a href="#">Temporary Access</a></li> 
           <li><a href="#">Industrial Rope Access</a></li> 
           <li><a href="#">Koltek</a></li> 
           <li><a href="#">FallProtec</a></li> 
           <li><a href="#">Consult</a></li> 
           <li><a href="#">Videos</a></li> 
          </ul> 
         </div> 
        </li> 
        <li><a href="#">Projects</a></li> 
        <li><a href="#">News</a></li> 
        <li><a href="#">Company</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 

및 CSS : 당신의 도움이

주셔서 감사합니다 여기 내 마크 업의 어떤 답변을

이

.navbar { 
    width: 100%; 
    display: table; 
    border: 1px solid #1d692d; 
    margin-bottom: 20px; 
    background: #5dbb73; /* Change this to suit the color theme of your site */ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.navbar .logo { 
    display: table-cell; 
    height: 55px; 
    margin: 0; 
    line-height: 0; 
    vertical-align: middle; 
} 

.navbar .logo a { 
    display: block; 
    height: 55px; 
    line-height: 60px; 
    padding: 0 0 0 15px; 
    overflow: hidden; 
} 

.navbar a.toggle { 
    display: none; 
} 

.navbar ul { 
    display: table; 
    width: 100%; 
    float: none; 
    vertical-align: middle; 
    margin-bottom: 0; 
} 

.navbar ul li { 
    display: table-cell; 
    float: none; 
    list-style-type: none; 
    margin-bottom: 0; 
    margin-left: 0; 
    text-align: center; 
    border-right: 1px solid #114a1e; 
} 

.navbar > ul > li > a { 
    display: block; 
    height: 55px; 
    line-height: 55px; 
    font-size: 16px; 
    padding: 0 15px; 
    white-space: nowrap; 
    color: #fff; 
    font-weight: bold; 
    text-shadow: 0 1px 2px #114a1e, 
          0 1px 0 #114a1e; 
} 

.navbar > ul > li .field { 
    position: relative; 
    display: inline-block; 
    text-align: center; 
} 

.navbar > ul > li .field .search input { 
    line-height: 14px; 
} 

.navbar > ul > li:hover > a { 
    position: relative; 
    background: #05390a; 
    z-index: 1000; 
} 

.navbar > ul > li > li > a { 
    padding: 0 33px; 
} 

.navbar > ul > li:last-child, .navbar > ul > li:last-child a:hover { 
    border-right: none; 
} 


/**** Navbar positioning for Microsoft's browser who deserves not to be mentioned ****/ 
.ie7 .navbar > ul { width: auto; } 

.ie7 .navbar, .ie7 .navbar > ul > li > a { display: block; } 

.ie7 .navbar .logo, .ie7 .navbar ul, .ie7 .navbar ul li { float: left; display: inline-block; } 

.ie7 .navbar .logo a { display: block; overflow: hidden; } 

.ie7 .navbar > ul > li .field { display: block; padding: 12px 18px 0; width: 80%; } 

/******** CSS3 Dropdown Menu Styles **********/ 

.navbar li .dropdown { 
    width: auto; 
    min-width: 0px; 
    max-width: 380px; 
    height: 0; 
    position: absolute; 
    background: #fff; 
    overflow: hidden; 
    z-index: 999; 
} 

.navbar li:hover .dropdown { 
    min-height: 60px; 
    max-height: 500px; 
    height: auto; 
    width: 100%; 
    padding: 0; 
    border-top: 1px solid #1d692d; 

    -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,.3); 
    box-shadow: 0px 3px 4px rgba(0,0,0,.3); 


    -webkit-transition: ease-in-out .2s; 
    -moz-transition: ease-in-out .2s; 
    -o-transition: ease-in-out .2s; 
    -ms-transition: ease-in-out .2s; 
    transition: ease-in-out .2s; 
} 

.navbar li .dropdown ul { 
    margin: 0; 
} 

.navbar li .dropdown ul > li { 
    display: block; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    font: 16px "Helvetica Neue", arial, sans-serif; 
    border-radius: none; 
} 

.navbar li .dropdown ul > li a { 
    display: block; 
    line-height: 26px; 
    height: 26px; 
    padding: 10px 20px; 
    border-bottom: 1px solid #ddd; 
} 

.navbar ul .dropdown ul li:first-child a { 
    border-radius: 0; 
} 

.navbar li .dropdown li a:hover { 
    background: #ebfeee; 
} 

@media only screen and (max-width: 767px) { 

    .navbar, .pretty.navbar { 
     position: relative; 
    background: transparent; 
    border: none; 
    text-align: center; 
    } 

    .navbar .logo { 
    float: left; 
    display: inline; 
    } 

    .navbar a.toggle { 
    position: relative; 
    float: right; 
    display: inline-block; 
    right: 10px; /* Move me around */ 
    top: 10px; /* Move me around */ 
    background: #3c8f4f; 
    width: 42px; 
    height: 36px; 
    line-height: 42px; 
    border-radius: 4px; 
    -webkit-transition-duration: .1s; /* Saf3.2+, Chrome */ 
    -moz-transition-duration: .1s; /* FF4+ */ 
    -ms-transition-duration: .1s; /* IE10 */ 
    -o-transition-duration: .1s; /* Opera 10.5+ */ 
    transition-duration: .1s; 
    } 

    .pretty.navbar a.toggle { 
    border: 1px solid #1d692d; 

    background: -moz-linear-gradient(top, #5dbb73 0%, #2d9047 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5dbb73), color-stop(100%,#2d9047)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* IE10+ */ 
    background: linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5dbb73', endColorstr='#2d9047',GradientType=0); /* IE6-9 */ 

    -webkit-box-shadow: inset 0 1px 1px #94dda6, 
     0 1px 1px #94dda6; 
    box-shadow: inset 0 1px 1px #94dda6, 
     0 1px 1px #94dda6; 
    } 

    .navbar a.toggle:hover, .navbar a.toggle.active { 
    background: #5dbb73; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    -webkit-transition-duration: .1s; /* Saf3.2+, Chrome */ 
    -moz-transition-duration: .1s; /* FF4+ */ 
    -ms-transition-duration: .1s; /* IE10 */ 
    -o-transition-duration: .1s; /* Opera 10.5+ */ 
    transition-duration: .1s; 
    } 

    .navbar a.toggle.active { 
    background: #114a1e; 
    } 

    .navbar ul { 
    position: absolute; 
    width: 93.75%; 
    height: 0; 
    max-height: 0; 
    top: 54px; 
    right: 3.125%; 
    overflow: hidden; 
    display: inline-block; 

    background: #fff; 
    border-radius: 4px; 

    -webkit-transition-duration: .2s; /* Saf3.2+, Chrome */ 
    -moz-transition-duration: .2s; /* FF4+ */ 
    -ms-transition-duration: .2s; /* IE10 */ 
    -o-transition-duration: .2s; /* Opera 10.5+ */ 
    transition-duration: .2s; 

    -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,.3); 
    box-shadow: 0px 3px 4px rgba(0,0,0,.3); 
    } 

    .navbar ul.active { 
    width: 93.75%; 
    height: auto; 
    max-height: 600px; 
    z-index: 999; 
    -webkit-transition-duration: .5s; /* Saf3.2+, Chrome */ 
    -moz-transition-duration: .5s; /* FF4+ */ 
    -ms-transition-duration: .5s; /* IE10 */ 
    -o-transition-duration: .5s; /* Opera 10.5+ */ 
    transition-duration: .5s; 
    } 

    .navbar ul li { 
    display: block; 
    width: 100%; 
    border-right: 0 !important; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    } 

    .pretty.navbar ul li { 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    } 

    .navbar ul li > a { 
     font-size: 22px !important; 
     border: 1px solid #1d692d; 
     background: #5dbb73; /* Old browsers */ 
    } 

    .navbar > ul > li .field { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    width: 90%; 
    } 

    .navbar > ul > li .search { 
    border: 1px solid #bbb; 
    -webkit-box-shadow: inset 0 1px 3px #ccc; 
    box-shadow: inset 0 1px 3px #ccc; 
    } 

    .navbar li a:hover, .navbar > ul > li:first-child, .navbar > ul > li:first-child a:hover, .navbar > ul > li:last-child, .navbar > ul > li:last-child a:hover {  
    -webkit-box-shadow: none; 
    box-shadow: none; 
    } 

    .navbar > ul > li:last-child, .navbar > ul > li:last-child a:hover { 
    border-right: none; 
    } 

    .navbar li:first-child a { 
    border-radius: 4px 4px 0 0 !important; 
    } 

    .navbar li:last-child a { 
    border-radius: 0 0 4px 4px !important; 
    } 

    .navbar li:hover .dropdown { 
    display: none; 
    } 

    .navbar ul li > a { 
    background: transparent; 
    border: none; 
    color: #d04526; 
    font-size: 16px; 
    border-bottom: 1px solid #ccc; 
    border-radius: none; 
    text-shadow: none; 
    } 

    .navbar ul li:hover > a { 
    background: #f5f5f5; 
    border-right: none; 
    -webkit-box-shadow: none !important; 
    box-shadow: none !important; 
    } 

    .pretty.navbar { 
    border: 1px solid #1d692d; 

    background: -moz-linear-gradient(top, #5dbb73 0%, #2d9047 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5dbb73), color-stop(100%,#2d9047)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* IE10+ */ 
    background: linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5dbb73', endColorstr='#2d9047',GradientType=0); /* IE6-9 */ 

    -webkit-box-shadow: inset 0 1px 1px #94dda6, 
     0 1px 2px rgba(0,0,0,0.61) !important; /* Remove this line if you dont want a dropshadow on your buttons*/ 
    box-shadow: inset 0 1px 1px #94dda6, 
       0 1px 2px rgba(0,0,0,0.61) !important; /* Remove this line if you dont want a dropshadow on your buttons*/ 
    border-radius: 0; 
    } 

    .pretty.navbar ul li .btn { 
    margin-top: 20px; 
    } 

} 

감사합니다! 건배, 폴

Answer 1

귀하의 경우 Gumby 1 또는 2를 사용하고 있는지 확실하지 않습니다.하지만 2에서는 이것이 효과가있는 것으로 보입니다.

<div class="navbar" id="nav1"> 
    <div class="row"> 
     <a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a> 
     <h1 class="four columns logo"> 
     <a href="#"> 
      <img src="img/gumby_mainlogo.png" gumby-retina /> 
     </a> 
     </h1> 
     <ul class="eight columns"> 
     <li><a href="#">Features</a></li> 
     <li> 
      <a href="#">Documentation</a> 
      <div class="dropdown"> 
      <ul> 
       <li><a href="#">Item</a></li> 
       <li> 
       <a href="#">I HAVE STUFF NESTED UNDER ME</a> 
       <div class="dropdown"> 
        <ul> 
        <li><a href="">nested</a></li> 
        </ul> 
       </div> 
       </li> 

       <li><a href="#">Item</a></li> 
      </ul> 
      </div> 
     </li> 
     <li><a href="#">Customize</a></li> 
     <li class="field"><input class="search input" type="search" placeholder="Search" /></li> 
     </ul> 
    </div> 
    </div>