Prevent markup being altered when switching between Visual and HTML editors

It might be difficult to completely eliminate all of TinyMCE’s quirks when it comes to editing HTML.

Another (clunky?) work round would be to set up shortcodes for the unordered list. When you then apply the shortcodes, the HTML will be output to the browser without manipulation from TinyMCE.

For example:

function ul_func( $atts ){
    return '<ul class="pageitem accordion-menu">';
}
add_shortcode( 'ul', 'ul_func' );

function li_func( $atts ){
    return '<li class="accordion-menu">';
}
add_shortcode( 'li', 'li_func' );

function close_ul_func( $atts ){
    return '</ul>';
}
add_shortcode( 'close_ul', 'close_ul_func' );

function close_li_func( $atts ){
    return '</li>';
}
add_shortcode( 'close_li', 'close_li_func' );

You could then create the list in the visual editor with:

[ul]
[li]list item here[close_li]
[close_ul]