Anchor in menu item breaks styling

Can you explain what you mean by "CSS styling no longer works?" If I add an anchor to a menu, it works just fine.

Previous comment from #10130 - Menu: Remove requirement for anchors in menu items

Not sure if this is intended but there are various examples of implementing a header (non selectable list element) but I've found that whatever I try and can't stop the default "ui-menu-item" class being applied to my listitem. I've managed to workout that the examples that work are using 1.8 but I'm using 11.0 and it's defaulting to the "ui-menu-item" and doesn't seem to be over-ridable.

Example of working header

http://stackoverflow.com/a/20676143/692942

http://jsfiddle.net/IrvinDominin/rMkER/

Code Excerpt

      $("#list").autocomplete("instance")._renderMenu = function(ul, items) {
        var self = this;
        $.each( items, function( index, item ) {
          self._renderItemData(ul, item);
          // prepended element still ends up with "ui-menu-item" class??
          if (index == 0) ul.prepend('<li class="ui-header"><span>Returned ' + items.length + ' record(s)</span></li>');
        });
        // attempt to hack css!
        ul.find("li:first-child").removeClass("ui-menu-item");
      };

I've now pin pointed what I think is the cause it appears after 1.10.4 and is present in 1.11.0 it's in the refresh() method in menu.js (previously jquery.ui.menu.js).

It looks like it's due to the requirement for an anchor to be present being removed (see https://github.com/jquery/jquery-ui/blob/3a61627a501cb7ba1ce80046bfabbff0f7f2f517/ui/jquery.ui.menu.js#L325 and https://github.com/jquery/jquery-ui/commit/3a61627a501cb7ba1ce80046bfabbff0f7f2f517#commitcomment-7591515)

So this is about autocomplete, doesn't use anchors at all, and doesn't provide a demo using the latest version? Please create a reduced test case using the latest version, along with an explanation of what you're trying to accomplish and how the anchors are related to the problem.

A couple of screenshots to show what I mean:

http://aklaver.org/wordpress/wp-content/gallery/paste/jquery-ui_menu_1.png

http://aklaver.org/wordpress/wp-content/gallery/paste/jquery-ui_menu_2.png

jquery-1.11.3.min.js

jquery-ui.css -- From jquery-ui-1.11.4 Cupertino

Menu layout:

#!text/html
<ul id="menu">
            <li>
            {% if user.is_authenticated %}
                Logged in: <br><b> {{ user.first_name}} {{user.last_name }}</b>
                <a href="/accounts/logout"><button type="button" >Log Out </button></a>
                <input type="hidden" id="logged_in" value={{user.username}}>
            {% endif %}
            </li>
            <li>
                {% if user.is_superuser %}
                    <a href="/hplc_admin/">Admin</a>
                {% endif %}
            </li>
            <li>
                <a href="/welcome/">Home</a>
            </li>

            <li>
                <a href="#">Tasks</a>
                <ul>
                    <li><a href="/student_information/">Students</a></li>
                    <li><a href="/daily_attendance/">Attendance</a></li>
                    <li><a href="/student_lunch">Student Lunch</a></li>
                    <li><a href="/enter_grades/">Enter Grades</a></li>
                    <li><a href="/school_calendar/">School Calendar</a></li>
                    <li><a href="/missed_attendance/">Missed Attendance</a></li>
                    <li><a href="/district_contacts/">District Contacts</a></li>
                </ul>
            </li>

            <li>
                <a href="#">Reports</a>
                <ul>
                    <li>
                    <a href="#">District</a>
                    <ul>
                        <li><a href="/district_reports/attendance/">District Attendance</a></li>
                        <li><a href="/district_reports/billing/">Billing</a></li>
                        <li><a href="/district_reports/student_contacts/">Student Contacts</a></li>
                        <li><a href="/district_reports/special_education/">Special Ed</a></li>
                        <li><a href="/district_reports/missed_attendance/">Missed Attendance</a></li>
                        <li><a href="/district_reports/student_lunch/">Lunches Served</a></li>
                        <li><a href="/district_reports/ethnicity/">Ethnicity Report</a></li>
                        <li><a href="/district_reports/student_history/">Student History Report</a></li>
                        <li><a href="/district_reports/lunch/">Lunch Report</a></li>
                        <li><a href="/district_reports/parole_officer/">Parole Officer</a></li>
                        <li><a href="/district_reports/school_days/">School Days</a></li>
                    </ul>
                    </li>

                    <li>
                    <a href="#">Student</a>
                    <ul>
                        <li><a href="/student_reports/attendance/">Student Attendance</a></li>
                        <li><a href="/student_reports/transcript/">Student Transcript</a></li>
                        <li><a href="/grade_history_student/">Student Grades</a></li>
                        <li><a href="/student_reports/service_learning/">Service Learning</a></li>
                        <li><a href="/student_reports/comments/">Student Comment</a></li>
                        <li><a href="/notice_transition/">Notice of Transition</a></li>
                    </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Print</a>
                <ul>
                    <li><a href="/attendance_sheet/" >Attendance Sheet</a></li>
                    <li><a href="/grade_sheet/" >Grade Sheet</a></li>
                </ul>
            </li>
        </ul>

Can you please try again? Provide a reduced test case that we can actually look at using jsbin or jsFiddle. Explain what you expect to happen and what's actually happening.

New look:

http://jsbin.com/dogobageha/edit?html,js,output

Set up with cupertino which makes the submenus almost unreadable. Other themes make things look a little better, but still not like in 1.10.4:

http://jsbin.com/yazuyetalo/1/edit?html,js,output

So is the actual bug you're trying to report that the color of anchors inside a menu may not look good based on the theme you're using?

No the 'big' is that what worked before does not work now to the extent that the menu becomes unreadable. It is pretty simple, the change broke theming. I have also yet to see an explanation of problem the change solved and/or why it was necessary?

It seems like you're just trying to be adversarial at this point. I'll let someone else respond since you don't want to cooperate with me.

Really? I created a test case, as requested, to demonstrate the issue I raised. It did and proved there is a difference in behavior between the past and the present. Your response was to basically blow it off as a minor detail. I think not being able to see items in a menu as not minor. As to my other question issue #10130 has no explanation for why it was created or acted on and in light of the fact that it demonstrably changes behavior for the worse, I think asking what is its purpose is a legitimate response.

The upgrade guide for 1.11 says that "Markup containing anchors will still work, although there may be styling issues. It's recommended to remove the anchors from your markup.": http://jqueryui.com/upgrade-guide/1.11/#remove-the-requirement-to-use-anchors-in-menu-items

If I understand this ticket correctly, the ticket author considers that a bug, which is fine, but at this point very unlikely to get addressed, since we haven't done any changes to 1.11 in a long time, and since its reasonable to address this by overriding the styles as needed (something like http://jsbin.com/bubolavide/edit?css,output ), and since it is also resolved in master (1.12): http://jsbin.com/pavapuxulu/edit?html,css,output

Am I missing something?

Seems I am the one missing something, namely why themes created by the project do not stay in sync with changes produced by the project. As to this being resolved in 1.12 I am not seeing it. If you take away the CSS hack then it does not work, unless again I missing something. More to the point if there is a fix why has it not been back-patched to 1.11, given that this version is listed as the stable one. Lastly no one has answered to the rationale for eliminating anchors in the first place. If there was an issue it caused that the change fixed it would go a long way to help me understand.

Sorry to disappoint, but this isn't going anywhere.

Hello - can we re-open? I think I am having the same issues as this guy. But I am nicer. :-)

Here is my jsfiddle to reproduce - https://jsfiddle.net/2Lx3cqv1/3/

Basically remove from the CSS the lines under the /* HACK */ comment and you will see that Option 3 under Activity A does not show up correctly in the Black Tie theme. The hack that I put it makes it work... BUT I am not sure how to fix it for icons (which are having the exact same problem). You can see the wrench icon under Activity A do not show up until you mouse into the menu.

Don't get thrown off by my horizontal menu code - the issue is present in the normal vertical menu as well.