Hi,

I have this code

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

  <title></title>
  <style type="text/css">
  
  * {
  margin: 30px;
  padding: 0; 
      }
      
       ul {
       background: blue;
       color: white;
       }
   ul li {
   list-style-type: none;
   background-color: red;
   }
   
   p#hello {
   padding: 10px;
   background: yellow;
   }
  </style>
  
  </head>
  <body>
  <p id="hello" onclick="show(this);">select...</p>
  <ul id="list" onclick="hide();" style="display:none"><li onclick="changeOut(this);">hello you!</li><li onclick="changeOut(this);">hello this</li><li onclick="changeOut(this);">hello yes</li><li onclick="changeOut(this);">hello no<li></ul>
  <script type="text/javascript">
      
     var onornot = 0;
   
      
      function show(thing) {
          if(onornot == 0) {
              var ul = document.getElementById("list");
              ul.style.display = 'block';
              
              onornot = 1;
          }
          else if(onornot == 1) {
              var ul = document.getElementById("list");
              ul.style.display = 'none';
              onornot = 0;
          }
      }
      
      
      function changeOut(thistext) {
          var mytext = thistext.innerHTML;
          var oldtxt = document.getElementById('hello');
          oldtxt.innerHTML = mytext;
      }
      
      function hide() {
          var hideus = document.getElementById('list');
          hideus.style.display = 'none';
          var focusthis = document.getElementById('hello');
        
        
      }
      
      
  </script>
  

  </body>
</html>
now it works fine until a point....what i want it to do is toggle the list on and off if the user clicks the yellow select, clicks on a list item (red) or clicks on the list(blue) or clicks outside of either the list or the yellow p tag ( basically ant white area)

Im completely stumped on the last one but i have another issue which is the reason for this post....if the user clicks the yellow select box on and off the list appears and dissapears correctly...however if the user clicks the yellow select and then clicks the list ( red or blue) the list correctly dissapears but then the user has to click twice on the yellow select to get the list to show again....try it..

Somehow the yellow select loses focus or something....how can i get it working so it only takes a single click???

thanks