Проблема рендеринга Jmenu во время загрузки

Question

Я использую JQuery Jmenu для отображения меню. Он отображает в виде списка во время загрузки страницы в IE8. После загрузки через несколько секунд он отображается как обычный горизонтальный вид. Принимая во внимание, что он отлично работает в браузере Chrome. Пожалуйста, помогите. Это css, который мы используем. Его отображение данных в формате HTML во время загрузки меню. не прилагая JQuery меню CSS fileson во время загрузки Время

.jMenu { 
    display: table; 
    margin: 0; 
    padding: 0 
} 

/* First level */ 
.jMenu li { 
    display: inline; 
    background-color: rgb(000,063,096); 
    margin: 0; 
} 

.jMenu li a { 
    padding: 10px; 
    display: inline; 
    background-color: transparent; 
    color: white; 
    text-transform: capitalize; 
    cursor: pointer; 
    font-size: 12px; 
} 

/* Lower levels */ 
.jMenu li ul { 
    display: none; 
    position: absolute; 
    z-index:9999; 
    padding: 0; 
    margin: 0; 
} 

.jMenu li ul li { 
    background-color: rgb(000, 063, 096); 
    display: block; 
    border-bottom: 1px solid #484548; 
    padding: 0; 
} 

.jMenu li ul li.arrow { 
    background-color: rgb(000, 063, 096); 
    background-image: url('../images/arrow_down.png'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    height: 6px; 
    padding: 0; 
    border-bottom: none; 
    padding-bottom: 10px 
} 

.jMenu li ul li a { 
    font-size: 11px; 
    text-transform: none; 
    padding: 5px; 
    display: block; 
    border-top: 1px solid transparent; 
    border-bottom: 1px solid transparent; 
} 

.jMenu li ul li a.isParent { 
    background-color: #f2f2f2 ; 
    background-image: url('../images/arrow_right.png'); 
    background-repeat: no-repeat; 
    background-position: right center; 
    color: #000000; 

} 

.jMenu li ul li a:hover { 
    background-color: #c4e0f6; 
    border-top: 1px solid #c4e0f6; 
    border-bottom: 1px solid #c4e0f6; 
    color: #000000; 
} 

Binding, что теги в формате HTML с буквального

<table border="0" cellspacing="0" width="100%"> 
    <tr> 
     <td style="width: 100%" class="topMenuBar"> 
      <asp:Literal ID="Literal1" runat="server"></asp:Literal> 
     </td> 
    </tr> 
</table> 

функции Jquery

<link rel="stylesheet" type="text/css" href='<%# ResolveUrl("~/jMenu-master/css/jMenu.jquery.css") %>'/> 
    <script type="text/javascript" src='<%# ResolveUrl("~/jMenu-master/js/jquery.min.js") %>'></script> 
    <script type="text/javascript" src='<%# ResolveUrl("~/jMenu-master/js/jquery-ui.js") %>'></script> 
    <script type="text/javascript" src='<%# ResolveUrl("~/jMenu-master/js/jMenu.jquery.js") %>'></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#jMenu").jMenu({ 
       ulWidth: '150', 
       effects: { 
        effectSpeedOpen: 300, 
        effectTypeClose: 'slide' 
       }, 
       animatedText: false 
      }); 
     }); 


    </script> 


![this is how html format coming while loading menus] 

Answer 1

Попробуйте - В нашем случае мы показываем меню в ul и мы изначально скрываем его, по свойству стиля элементов управления. После полного рендеринга страницы и после привязки методов jquery отобразите его с помощью css или вашего удобства.

<ul class="menu-hvr" id="jMenu" style="display:none"> 
      @if (!showUserMenu) 
      { 
       <li class="buttonFirstAll homebtn1"> 
        <a href="/sign-up">sign up</a> 
       </li> 
       <li class="homebtn2"> 
        <a href="/sign-in/?popup=true">sign in</a> 
       </li> 
      }........ 
    </ul>