To style individual menu items differently in a jQuery UI Menu, you can use custom CSS classes:
Using Custom CSS Classes
$(function() {
$("#menu").menu({
create: function(event, ui) {
$(this).find("li").eq(0).addClass("highlight-item"); // First item
$(this).find("li").eq(2).addClass("warning-item"); // Third item
}
});
});
CSS:
.highlight-item a {
background-color: #ffeb3b !important;
color: #333 !important;
font-weight: bold;
}
.warning-item a {
background-color: #ff5722 !important;
color: white !important;
}