Tener un menú a la izquierda que sea independiente de lo que está a su derecha

Lo que quiero es un menú a la izquierda y que a su derecha aparezca un chiste. He creado un menú con varios items y lo que hace es bajar el chiste tanto como opciones(items) tiene el menú y quiero que sea independiente( que el menú pueda crecer o decrecer( tener más o menos cantidad de opciones) sin que afecten a la posición del chiste- Al poner el display:inline y float left, en vez de poner el DIV del menú a la izquierda y el cuerpo a su derecha(que es lo que quiero, pone las opciones del menú en línea .
Uso display: inline;
float: left;
pero debe ser que no lo pongo en el lugar correcto porque no lo consigo.
Muchas gracias
Debajo pego el código por si alguien puede ayudar

    <title>chistesy humor, clasificados por categorias y ordenados por fecha de publicación</title>
    <meta charset="utf-8"> 
     <meta name="description" content="Chistes  y humor en español ">
     <style type="text/css">
        * {
            margin: 0;
            border: 0;
            padding: 0;
        }
         body {
          /*  background: rgba(38, 60, 154, 0.83);
            background-color: white;
            */
            background-color: black;
            
            
            font-family: sans-serif;
            font-size: 14pt;
        
        
        }
         menu{
            width: 20%;
            margin-top: 1080px;
            
            padding-left: 0px;
            height: 500px;
            background-color: white;
             
                display: inline;
    float: left;
                
               /*
                display: flex; 

flex-direction: row;
*/

        }
         H1{
              color: blue;
            font-size: 18pt;
          font-family: sans-serif;
                
            
            }
  .recuadroexterno{
                margin: 0 auto;
              /*  padding-left: 40%;*/
                margin-left: 15%;
                
                
                    
                width: 50%;
                height: 300px;
                background-color: #baa37c;
                -webkit-border-radius: 10px 10px 10px 10px;

border: 0px solid #000000;

                /*border- 10px 10px border-radius: 10px solid  black;
                */
                            display: inline;
    float: left;
   
             /*    display: flex; 

flex-direction: row;
*/

            }
         .chiste{
            margin-left: 10%;
            
             width: 40%;
          
            
                height: 200px;
                background-color: azure
                border- 10px 10px border-radius: 10px solid  white;
            font-size: 18pt;
            color: antiquewhite;
            font-size: 18pt;
            font-weight: bold;
            
            
            
                
                
            
ul li {
            list-style-type:none ;
            background-color:antiquewhite;
            width: 10%;
            margin: 1px;
           padding: 5px;
 /*  display: inline;
    float: left;
   */        
            font-family: sans-serif;
            font-style: 12pt;
            
            
           border-left: solid 4px #98d0ff;
            
        }                          
                
            }
         a:hover {
            border-left: solid 1px #267b9a;
            color: #baa37c;
           background-color: #1d3c2b;      
            cursor:pointer;
              border: solid 1px #baa37c; 
                  font-size: 16pt;
                 opacity: 1;
        }

         .publicado{
            font-family: sans-serif ;
                font-size: 16 pt;
            font-weight: bold;
            color: yellow;
            
        }
        
        H2{
             font-family: sans-serif;
                font-size: 16 pt;
           
               font-weight: bold;
           /* color: rgba(113, 9, 113, 0.97);
            */
            color: orange;
         
            
            
            
        }
         H3{
             font-family: sans-serif;
                font-size: 16 pt;
           
               font-weight: bold;
            color: red;
         
            
            
            
        }
       
        
        p{
            
            color: white;
            
        }
       
        
        header{
          *    background: white;*/
        background-color: black;
            padding-top: 75px;
            
          
            width: 100%;
            height: 250px; 
            color: white;
            
        }
                  
        
        
                    
        
        
             
        
       
      
      
        
            
          
            
            
            
        
            
            
            
  
         
         

        
            
            
            
        
        
        
    a:hover {
            border-left: solid 1px #267b9a;
            color: #baa37c;
           background-color: #1d3c2b;      
            cursor:pointer;
              border: solid 1px #267b9a; 
                  font-size: 16pt;
                    
        }

ol

        .limpiar{
            
             clear: both;
        }
      
        img{
                  display: inline;
            float: left;
      
        }

        
  </head>  
   

    </style>
    <header>
        <div   class= "sonrisa">
        <img src="images/sonrisa.jpg" width="150px" alt="Dibuja tu mejor sonrisa con estos chistes">
             <h2> Dibuja  tu mejor sonrisa con estos chistes</h2>
       
        </div>
        
             <div   class="limpiar"></div>
        

           <H1> Chistes, Gracias y Humor para  provocar risas y mejorar el estado de ánimo . <br> Toma un chute de dopamina gratis <br>Antidepresivo Natural
            
        </H1>
         <p> Está denostrado científicamente que la risa es uno de los mejores generadores de felicidad  y de substancias en nuestro cuerpo que fomentan nuestro bienestar y mejoran el estado de ánimo, además de ejercitar el corazón y los pulmones</p>
       
        
        <h2> Aquí te dejamos muchos chistes clasificados por temas <br> y ordenados por fecha de publicación</h2>
                
    
  </header>    
<body>
    
    
  
            

        
        
    <div class="menu">
        
        
       <br>  <br>   <H3>CHISTES DE:</H3>
        <br><br>
        
        <ul>
            <li><a href="http://www.bing.com/" target="_blank">Bing</a></li>
            <li><a href="http://www.google.com/" target="_blank">Google</a></li>
            
            <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
         <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
         <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
         <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
         <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
         <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
         <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
         <li><a href=https://fernandodiezgutierrez.blogspot.com/2023/01/chistes-de-abogados.html target="_blank">Abogados </a> </li>
         
        </ul>
        
        
        
        
        
      </div>
        
        

      <article class="recuadroexterno">
            <span   class= "publicado">Fecha Publicación: 03/01/2023</span>
         <span   class= "titulo">  <a href="luz automatica.html"luz%20automatica.html><H2> Luz automática</H2> </a>
           <span   class= "Chiste">LLega  el marido completamente borracho y  dice a su mujer al irse para cama:
  • Me ha pasado algo increíble. He ido al baño y al abrir la puerta se ha encendido la luz automáticamente, sin hacer nada.
  • ¡La madre que te parió!, ¡Te mato!, ya te has vuelto a mear en la nevera.

             <H3>Categorías del Chiste:<br> 
                  <a href="#">Cortos</a> <a href="#">,Malos</a> 
                 <a href="#">Borrachos</a> <a href="#">,Matrimonios</a></H3>
             
              
            
          
    
      
            </span>    
    

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.