2 Replies Latest reply on Jan 20, 2015 9:38 AM by juictifer

    CSS dropdown menu

    juictifer

      I have a navigation menu that uses CSS style sheet. I need to add a sub category to some to some of the main menu items, but I can't figure it out. I have gotten dropdown navigation to work and tested it on Simple Pure CSS Drop Down Menu

      But when I import everything into Jive it does not work. Can someone Please help?

       

      Here is the original code and this is placed in an html widget.

      <style>

      @import url("/servlet/JiveServlet/downloadBody/79755-102-2-123590/salesiq.css");

      </style>

      <div class="pageHead">

          <h1>Product &amp; Content</h1>

          <ul class="menu" id="pcMenu">

              <li><a href="#" title="Sales IQ Home">Home</a>

              <li><a href="#" title="Credit">Credit</a>

                  <ul>

                      <li><a href="#" title="Level 1">Level 1</a></li>

                      <li><a href="#">Level 2 (General Sales) Part A - RD &amp; CHP</a></li>

                      <li><a href="#" title="Level 2 (General Sales) Part B - Risk Models, Data &amp; Analytics">Level 2 (General Sales) Part B - Risk Models, Data &amp; Analytics</a></li>

                  </ul>

              </li>

       

       

              <li><a href="#" title="PresCenter">PresCenter</a>

                  <ul>

                      <li><a href="#" title="Level 1">Level 1</a></li>

                      <li><a href="#" title="Level 2 (General Sales)">Level 2 (General Sales)</a></li>

                      <li><a href="#" title="Level 2 (Sales Specialist)">Level 2 (Sales Specialist)</a></li>

                  </ul>

              </li>

              <li><a href="#" title="Client Services">Client Services</a></li>

          </ul>

       

       

          <script>

      var l = location.href;

      var l = l.replace("?view=overview","");

      var menu = document.getElementById("pcMenu");

      var lnk = menu.getElementsByTagName("a");

      for (i=0; i<lnk.length; i++) {

          if (lnk[i].href==l) {

              //alert ("Found it! "+lnk[i].href);

              var nextLvl = lnk[i].parentNode.parentNode.parentNode.firstChild;

              //alert (nextLvl.tagName);

              lnk[i].className += " active";

              if (nextLvl.tagName=="A") {

                  nextLvl.className += "active";

              }

              break;

          }

      }

      </script>

      </div>

       

      This is what it looks like:

       

      screenShot.jpg

      I need to add a sub menu to Level 2(General Sales) Part A - RD & CHP and a couple of other menu items.

       

      This is what the CSS looks like:

       

      #jive-widget-container_1 .jive-widget-htmltext .jive-widget-body {

      overflow: visible;

      }

      .pageHead {

      position: relative;

      width: 100%;

      height: 100px;

      margin: 0 0 20px;

      border-radius: 5px 5px 0 0;

      background: transparent url(/servlet/JiveServlet/downloadBody/79754-102-2-123586/,DanaInfo=buzz.mcgraw-hill.com,SSL+header.png) no-repeat left top;

      }

      .pageHead h1 {

      margin: 0;

      padding: 0;

      font-size: 0;

      color: #000;

      text-align: center;

      }

      #jive-body h2.pageSubHead {

      height: 30px;

      margin: 0;

      border-radius: 5px;

      background: #C03;

      padding: 0 8px;

      font: bold 18px/30px Arial, Helvetica, sans-serif;

      color: #FFF;

      }

      .pageHead ul.menu {

      position: absolute;

      bottom: 0;

      width: 100%;

      margin: 0;

      border: dashed 1px #FFF;

      border-style: dashed none none;

      padding: 0;

      list-style: none;

      }

      .pageHead ul.menu li {

      height: 29px;

      float: left;

      margin: 0;

      border: dashed 1px #FFF;

      border-style: none dashed none none;

      padding: 0;

      list-style: none;

      line-height: 29px;

      }

      .pageHead ul.menu .right li {

      float: right;

      }

      .pageHead ul.menu li.lastChild {

      border-right-style: none;

      }

      .pageHead ul.menu li a {

      display: block;

      padding: 0 11px;

      font-weight: bold;

      text-decoration: none;

      color: #CCC;

      }

      .pageHead ul.menu li:hover {

      background: #666;

      }

      .pageHead ul.menu li:hover a {

      color: #FFF;

      }

      .pageHead ul.menu li:hover li a {

      color: #CCC;

      }

      .pageHead ul.menu li a.active {

      color: #0CC;

      }

      .pageHead ul.menu li li a.active,

      .pageHead ul.menu li li a:hover {

      color: #FFF!important;

      }

      .pageHead ul.menu ul {

      position: absolute;

      top: 29px;

      left: -9999px;

      width: 100%;

      background: #666;

      padding: 0;

      }

      .pageHead ul.menu li:hover ul {

      left: 0;

      }

      .pageHead ul.menu li li {

      border: none;

      border-style: none;

      text-align: center;

      }

      .pageHead ul.menu li li:after {

      content: "|";

      text-align: right;

      font-weight: bold;

      color: #FFF;

      position: relative;

      top: -29px;

      right: -50%;

      }

      .pageHead ul.menu li li.lastChild:after {

      color: #666;

      }

      .pageHead .joinGroup {

      display: block;

      height: 30px;

      width: 110px;

      position: absolute;

      right: 0;

      top: 0;

      background: transparent;

      font-size: 0em;

      text-decoration: none;

      }

      .pageBlurb {

      position: relative;

      }

      .pageBlurb .text {

      position: relative;

      top: 0;

      left: 0;

      right: 0;

      padding: 0;

      width: 100%;

      }

      .pageBlurb p, .pageBlurb ol, .pageBlurb ul {

      margin: 0 0 0.6em;

      }

      .pageBlurb ul {

      padding: 0;

      overflow: auto;

      width: 100%;

      }

      .jive-widget-body .jive-html-text-widget .pageBlurb ul li {

      list-style: none;

      }

      .pageBlurb ul ul {

      float: left;

      width: 215px;

      margin: 0 10px 0 0;

      }

      .jive-widget-body .jive-html-text-widget .pageBlurb ul ul li {

      list-style: disc;

      margin: 0 0 0.6em 15px;

      font-weight: bold;

      }

      .pageBlurb ul li em {

      font-weight: bold;

      color: #c03;

      font-style: normal;

      }

      .pageBlurb .ol span {

      margin: 0 70px 0 0;

      }

      .pageBlurb .links {

      position: relative;

      }

      .pageBlurb .graphic {

      display: block;

      width: 260px;

      margin: 0 0 15px;

      background-color: transparent;

      background-repeat: no-repeat;

      background-position: left top;

      padding: 0 15px;

      font: bold 0/0 Arial, Helvetica, sans-serif;

      text-decoration: none;

      color: #FFF;

      }

      .pageBlurb .withText {

      display: inline-block;

      height: 35px;

      background-image: url(/servlet/JiveServlet/downloadBody/37790-102-1-58466/,DanaInfo=buzz.mcgraw-hill.com,SSL+pc_button_arrow_noText_wide.png);

      font-size: 14px;

      line-height: 35px;

      color: #FFF;

      width: 295px;

      }

      .pageBlurb .links span {

      display: inline-block;

      width: 25px;

      }

      .enterprise div {

      background: #6CC;

      border-radius: 5px;

      width: 325px;

      float: left;

      margin: 0 25px 0 0;

      }

      .enterprise div.lastChild {

      margin: 0;

      }

      #jive-body .enterprise div h2 {

      margin: 0 0 12px;

      border-radius: 5px 5px 0 0;

      background: #066;

      padding: 0;

      color: #FFF;

      font-size: 12px;

      line-height: 30px;

      text-align: center;

      }

      .enterprise div p {

      margin: 0 15px 15px;

      }

       

      .jive-html-text-widget .toolboxes {

      background: transparent url("/servlet/JiveServlet/downloadBody/35941-102-1-55482/,DanaInfo=buzz.mcgraw-hill.com,SSL+pc_banner_toolbox_noText.png") no-repeat left top;

      font-size: 11px;

      height: 100px;

      padding: 35px 97px 0 17px;

      }

      .jive-html-text-widget .toolboxes p {

      margin: 0 0 1em;

      }

       

      .jive-box, .jive-sidebar, .jive-widget, .jive-content-block-container {

      margin-bottom: 15px;

      }