Drop Down Problems

[fibernut]

Hello,
I seam to be having a problem adding drop down sub menus to my navigation bar using the methods in this thread http://forum.broadleafcommerce.org/viewtopic.php?f=11&t=647.

I copied the code including the missing end tag and the update posted to stop null errors into my nav.html. I then just copied the CSS code into the start of styles.css.

When I view the site, the sub menu is displayed in a linear fashion parallel to the main nav bar once I click on the parent category.

I am guessing this has to do with my CSS. Am I placing the CSS code in the right place or should it go under a certain class and is everything else I am doing okay.

I am using broadleaf commerce version 2.0.2 and I have made no other changes to the demo site.

Thanks

[fibernut]

Anyone, this is quite an annoying problem. After further looking it appears that css classes are not applied to the sub menu. Where exactly in the styles.css am I to place the CSS code?

[fibernut]

A polite bump.

[fibernut]

This is what my nav.html looks like:

Code: Select all

<nav>   
   <div th:remove="all">
      <!--
           This template displays the navigation of the site by looking up the category named "Nav"
           and building a list of the categories sub-categories.                             
      -->
   </div>
   <blc:categories resultVar="navCategories" parentCategory="Primary Nav" maxResults="6" />
   
   <ul>
      <li th:each="category : ${navCategories}">
         <a class="home" th:href="@{${category.url}}" th:class="${categoryStat.first}? 'home'" th:text="${category.name}"></a>
      </li>
         <ul th:if="${#objects.nullSafe(category,default)}" class="sub-menu">
            <li th:each="cat : ${category.getChildCategories()}">
            <a th:text="${cat.name}" th:href="@{${cat.url}}" />
         </li>
      </ul>
   </ul>
</nav>

And this is the nav part of my styles.css

Code: Select all

nav {
   width: 940px;
   height: 70px;
   margin: 0 20px;
   border-bottom: double #C8C3C1;
}

   nav ul {
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
   }
   
   nav ul li {
      margin: 0;
      padding: 0;
      display: inline;
   }
   
   nav ul li a {
      font: 16px/76px 'Open Sans', Helvetica, sans-serif;
      font-weight: 600;
      color: #342020;
      padding: 25px 30px;
      background: url('../img/nav-divider.png') top left no-repeat;
   }
   
   nav ul li a.home {
      background: none;
   }
      
   nav ul li:hover .sub-menu { display: block; }

        nav ul li ul.sub-menu {
        position: absolute;
        top: 181px;
          list-style-type: none;
        background: url(../img/canvas.jpg);
        z-index: 99999;
        display: none;
          width: 253px;
      }

        nav ul li ul.sub-menu li {
            display: block;
            float: none;
        }

        nav ul li ul.sub-menu li:hover {
            background-color: #A9C8CB;
            -webkit-transition: background-color 0.1s ease-in;
            -moz-transition: background-color 0.1s ease-in;
            -o-transition: background-color 0.1s ease-in;
            transition: background-color 0.1s ease-in;
        }

        nav ul li ul.sub-menu img {
            z-index: 99999;
            float: left;
            width: 200px;
            height: 200px;
        }

        nav ul li ul.sub-menu a {
            font: 12px/35px 'ProximaNovaBold', Helvetica, sans-serif;
            color: #342020;
            padding: 10px;
            background: none;
        }
      
      nav ul li a:link, nav ul li a:visited {
         color: #342020;
         text-decoration: none;
         text-transform: uppercase;
      }
      
      nav ul li a:hover {
         background-color: #E7E3E2;
         -webkit-transition: background-color 0.2s ease-in; 
         -moz-transition: background-color 0.2s ease-in; 
         -o-transition: background-color 0.2s ease-in; 
         transition: background-color 0.2s ease-in;
      }
      

And my sub menu is displayed like another parent nav below the default one.

[phillipuniverse]

What browser?

[fibernut]

I have tried using Google Chrome, Firefox and IE9. The same result every time.
I have attached an image of what I get.

nav - Copy.gif (168.38 KiB) Viewed 19743 times

[fibernut]

Do you have any idea why this would be happening?

[fibernut]

I believe I may have found the cause of this problem but I do not have a resolution.

Eclipse says "invalid location of tag "ul"" for the ul tag in the sub menu code ( In bold below)

<ul th:if="${#objects.nullSafe(category,default)}" class="sub-menu">
<li th:each="cat : ${category.getChildCategories()}">
<a th:text="${cat.name}" th:href="@{${cat.url}}" />
</li>
</ul>

I believe this is why the CSS sub-menu class is not getting applied to the submenu.

Could anyone offer a resolution for this probelm.

Code: Select all

<nav>   
   <div th:remove="all">
      <!--
           This template displays the navigation of the site by looking up the category named "Nav"
           and building a list of the categories sub-categories.                             
      -->
   </div>
   <blc:categories resultVar="navCategories" parentCategory="Primary Nav" maxResults="6" />
   
   <ul>
      <li th:each="category : ${navCategories}">
         <a class="home" th:href="@{${category.url}}" th:class="${categoryStat.first}? 'home'" th:text="${category.name}"></a>
      </li>
         <ul th:if="${#objects.nullSafe(category,default)}" class="sub-menu">
            <li th:each="cat : ${category.getChildCategories()}">
            <a th:text="${cat.name}" th:href="@{${cat.url}}" />
         </li>
      </ul>
   </ul>
</nav>

[phillipuniverse]

Try encapsulating the submenu within the li:

Code: Select all

  <ul>
      <li th:each="category : ${navCategories}">
           <a class="home" th:href="@{${category.url}}" th:class="${categoryStat.first}? 'home'" th:text="${category.name}"></a>
           <ul th:if="${#objects.nullSafe(category,default)}" class="sub-menu">
                <li th:each="cat : ${category.getChildCategories()}">
                    <a th:text="${cat.name}" th:href="@{${cat.url}}" />
                 </li>
            </ul>
       </li>
   </ul>


[fibernut]

Thank you very much, it now works perfectly. I just have to get it working for secondary menus and it will be finished.