HTML UL CSS Border style

I have a little question concerning html-lists and CSS. I want to have a list (whit sublist) that looks like this (view the result by coping the code into http://htmledit.squarefree.com/):

 <style type="text/css">
 ul
 {
  border: 0px solid #90bade;
 }
 li
 { 
  list-style-type:none;
  border: 1px solid black;
 }
 .lv1
{
   marg开发者_开发问答in:0px 0px 0px 10px;
}

</style>

<ul>
  <li>One</li>
  <li class ="lv1">Sub</li>
  <li>One</li>
</ul>

But I would prefer to use html-code like this for the list:

<ul>
  <li>One
     <ul>
        <li>Sub</li>
     </ul>
  </li>
  <li>One</li>
</ul>

Unfortunately I cannot figure out, how to style the second list whit CSS in order to make it look like the first one. Does anyone know if it’s possible by only using CSS or do I have to make one big list and use classes (like in the first list) to get the desired layout?

Thanks in advance

---

You can wrap the text with a div and give the div the desired border. Add the style for the div to your CSS and remove the border from your li. That should do the trick. I don't see a possible sollution without editing the HTML, though.

.border {      
  border: 1px solid black; 
}

    <ul>   
      <li>
        <div class="border">One</div>
        <ul>
          <li><div class="border">Sub</div></li>
        </ul>
      </li>   
      <li><div class="border">One</div></li>
    </ul>

---

As Elwhis said, what you can do is add the <div> in <li> but you can avoid "class" like this:

 <style type="text/css">
 ul
 {
  border: 0px solid #90bade;
 }
 li
 { 
  list-style-type:none;
  border: 0px solid black;
 }

 ul li div 
 {
   border:1px solid black
 }

</style>

<ul>
  <li><div>One</div>
     <ul>
        <li><div>Sub</div></li>
     </ul>
  </li>
  <li><div>One</div></li>
</ul>

---

Replace list-style-type:none;
with list-style-position:inside;

li
 { 
  list-style-position:inside;
  border: 1px solid black;
 }