html - How can I use CSS to select and style all LI elements that have UL sub-elements?

I'm making a CSS context menu and I want all list items that have submenus to be styled differently to visually represent to the user that they have submenus.

The context menu is a UL element, its list items are LIs, and submenus are ULs. I already have the functionality down, I just need to be able to style submenu items differently so that they are obviously different.

Code and Pseudocode:

---

What I have (working CSS):

.bhContextMenu,
.bhContextMenu LI UL{
background:white;
background:rgba(255,255,255,0.95);
border:0.5mm solid lightgray;
border-color:rgba(0,0,0,0.25);
border-radius:1mm;
box-shadow:0 1mm 2mm lightgray;
box-shadow:0 1mm 2mm rgba(0,0,0,0.25);

cursor:default;
display:none;
list-style:none;
margin:0;
padding:0;
position:absolute;
width:1.5in;
}
.bhContextMenu LI{
padding:1mm 4mm;

}
.bhContextMenu LI:hover{
 background: lightgray;
 background: rgba(0,0,0,0.1);
}
.bhContextMenu LI UL{
display:none;
list-style:none;
position:absolute;
left:1.5in;

margin-top:-1.5em;
}
.bhContextMenu LI:hover UL,
.bhContextMenu LI UL:hover{
display:block;
}
.bhContextMenu HR{
border: none;
border-bottom: 0.5mm solid lightgray;
}

What I also want (pseudocode):

.bhContextMenu LI contining UL{
font-weight:bold;/* or something */
}

Answer

Unless you're only distinguishing between empty and non-empty elements (which you aren't...), you can't select elements based on their contents.

What you could do is

1. Change your markup to add a class for menu items which contain submenus, and style that.




2. Change your style for submenus in "invisible/folded" mode so that they are actually visible, but only as a little arrow or whatever else you want to use to indicate that there is a submenu there. Demo here: http://jsbin.com/ojociq/1/edit