When I put an icon on a menu item it makes the li tall but if you inspect the elements the li is the only thing that tall in the element.
Is this avoidable? if not, why?
Link to example: https://jsbin.com/kirekufoju/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div>
<ul id="e3ce4756-8352-40ab-b273-e87e253df37d" role="menu" tabindex="0" class="" aria-activedescendant="ui-id-18" >
<li action="Change Theme" id="menuItem_1467148140" d>
<nav id="ui-id-17" tabindex="-1" role="menuitem" class=""><span class="ui-icon ui-icon-disk "></span>Change Theme</nav>
</li>
<li action="Configure Dashboard" id="menuItem_772280342" >
<nav id="ui-id-18" tabindex="-1" role="menuitem" class=""><span class=""></span>Configure Dashboard</nav>
</li>
<li action="Change Password" id="menuItem_145997753" >
<nav id="ui-id-19" tabindex="-1" role="menuitem" class=""><span class="ui-icon ui-icon-disk "></span>Change Password</nav>
</li>
<li action="Help" id="menuItem_351754787" data-uri="">
<nav id="ui-id-20" tabindex="-1" role="menuitem" class=""><span class=" "></span>Help</nav>
</li>
<li action="Logout" id="menuItem_1997186055" >
<nav id="ui-id-21" tabindex="-1" role="menuitem" class=""><span class=" "></span>Logout</nav>
</li>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
$(document).ready(function(){
$('ul').menu({
})
});
});
</script>
</html>
Removing the list-style-image from your li should do the trick :
.ui-menu .ui-menu-item {
list-style-image: none;
}