Coldfusion, использующий класс вместо встроенного стиля, нарушает код

Question

При написании в ColdFusion у меня есть собственное меню, которое выпадает или сворачивается при нажатии. Когда я помещаю CSS в строку с утверждением стиля, все работает нормально. Когда я заменяю выражение стиля на определенный класс, раскрывающийся список не работает.

Класс navct:

  .navct {
    display:none;
    margin-left:5%; 
    overflow:visible;
    white-space:nowrap
  }

Первый раскрывающийся список "people" использует класс navct и не падать. Второе «событие» использует встроенный стиль и работает отлично. Вот соответствующий код ColdFusion. ,

<table border = "2" class = "navbar" >
  <tr>  
    <td> 
      <ul class= "navul" style = "padding-right: 10px">      
         <li style = "color: ##800517;  cursor:pointer" onclick = toggnav('ctpeople','#controllist#')"> People </li> 
           <div id = 'ctpeople'  class = "navct" >
              <ul class = 'navul'>        
                <li><a  href = "xref1.cfm?basetab=PersType">Person Types</a><li>
                <li><a href = "xref1.cfm?basetab=Source">Person Sources</a></li> 
             </ul>  
           </div>

      <li style = "color: ##800517;  cursor:pointer" onclick = "toggnav('ctevent','#controllist#')">Events</li>
         <div id = 'ctevent'  style = "display:none;
                               margin-left:5%; 
                               overflow:visible;
                               white-space:nowrap">
            <ul class = 'navul'>
               <li> <a  href = "xref1.cfm?basetab=EventType"> Event Types </a></li>
               <li> <a  href = "xref1.cfm?basetab=Subevent"> Subevents </a> </li>
               <li> <a  href = "xref1.cfm?basetab=Period">Time Periods </a> </li>  
               <li> <a  href = "xref1.cfm?basetab=Activity"> Activities  </a></li>
               <li> <a  href = "xref1.cfm?basetab=ActStatus">Activity Status</a> </li>
            </ul>
       </div>
       etc.....

javascript toggnav () имеет значение

function toggnav(id, navlist) {
  var navarr = navlist.split(",");

  navarr.forEach(toggtest); 
    function toggtest(item){     
      var auxbutton = document.getElementById(item);
         if (item == id) { 
           if(auxbutton.style.display == 'none'){
              auxbutton.style.display = '';}
         else if(auxbutton.style.display != 'none'){
              auxbutton.style.display = 'none';} 
    }
  if (item != id) {  
    auxbutton.style.display = 'none'; }  
  }//end of toggtest                      
  }//end of toggnav

При трассировке через функцию toggnav я обнаружил, что элемент с class = "navct" указывается как показывающий, (т. е. отображение none в navct не работает), поэтому для него устанавливается значение none. Добавление встроенного стиля отображения: ни один не исправляет это.

Результаты для второго элемента:

Вроде как должно быть что-то, что я не понимаю, используя стиль против использования класса. Может кто-нибудь объяснить, почему использование класса не работает. А еще лучше, вы можете предложить, как заставить это работать, так как стиль загромождает код.