Indent for Nested List Items Next to Float Image - html

Question

I have nested lists sitting next to a floated image. The floated image "consumes" all of the left-margin for the nested list. Is there any way to make it so that the nested-list indents outward from the image, as if there were no image there?
Here is a screenshot:
On the left we have how it's being rendered when there's a float. On the right we have how it's being rendered when there is no float.
Is there any way to get the nested list items to kick to the right the same way, whether or not there's an image floated to the left?
Thanks!

Answer 1

I had exactly the same problem (that's how I found this post), but I finally got it figured out. Look at the attached image to see what I explain below.
The following HTML produces an error like what the original poster has (edited for brevity):
<figure style="float:left; margin:1em 4em 1em 0; width:231px;">
<img style="box-shadow:0 1px 5px; border-radius:5px;" src=" ... .jpeg?w=231" width="231" height="300" />
<figcaption> ... </figcaption>
</figure>
<p><strong>The Rough Plan</strong>
The app needs to have (eventually) all of the following features:</p>
<ul>
<li>A full recipe book
<ul>
<li>The ability to add/remove/edit recipes.</li>
</ul>
</li>
...
<li>Generate shopping lists.</li>
</ul>
When you inspect the list elements using the browser's dev tools you can see that all of the spacing for the Unordered List tag is being measured from the size of the page content area, not from the remaining space next to the floating image.
By setting the overflow style to auto that got me a partial fix. The list, and all of it's sub items, began to indent properly next to the image but for some reason all of the top-level bullets disappeared. This other post led me to try adjusting the padding of the list which worked! All together all I had to do was changed the opening tag from <ul> to <ul style="overflow:auto; padding:0 0 0 1em;">.
Obviously, you'd want to do this in a style sheet, not in the HTML itself.

Answer 2

You can give margin-left to the submenu .. but ..
Why not use flexbox?
.container {
display: flex;
flex-wrap: wrap;
width: 500px;
border: 1px solid #999;
background: #F2F2F2;
}
ul {
margin: 0 30px;
padding: 0;
}
ul > li + ul {
margin-left: 20px;
}
<div class="container">
<img src="http://placehold.it/200x200" alt="Imagen">
<div class="flex-uls">
<ul>
<li>Top Item</li>
<li>Top Item</li>
<li>Top Item</li>
<ul>
<li>SubLevel Item</li>
<li>SubLevel Item</li>
<li>SubLevel Item</li>
</ul>
</ul>
</div>
</div>