```
<html>

<head>

<style type="text/css">

   ul{
      list-style:none;
      padding:0;
      margin:0;

   }

   li{
      float: left; 
      border: dotted 1px;
      line-height: 30px; 
      color:green;
      width: 100px;

      }
    ul li ul li{
    color:violet;
    width: 150px;

    }

</style> 
</head>
<body> 
<ul id="wow">
   <li>example 1</li>
   <li>example 2
      <ul><li>example1</li>
      <li>example1</li><li>
      example1</li></ul>
   </li>
   <li>example 3
   <ul><li>example1</li>
      <li>example2</li>
      <li>example3</li></ul>
   </li>
   <li>example 4</li>
   <li>example 5</li>
   <li>example 6</li>
   <li>example 7</li>      
</ul>   
</body>   
</html>

```

This is my code. My question is why when I set my height properties for list in css, there is a overlapping between the list and sub-list?how can I solve this