CSS help required for unordered list

I got two unordered list in the following fashion:

<ul>
   <li>My links
      <ul>
          <li>My First site link</li>
          <li>My Second Site Link</li>
      </ul>
   </li>
</ul>

Code (markup):

I want this to be displayed like this

My links

• My First Site Link
• My Second Site Link

Instead of this:

• My links

• My First Site Link
• My Second Site Link

​

Does any one has suggestions to control it using CSS?

 

li {
list-style-type: none;
}

li li {
list-style-type: disc;
}

Code (markup):

 

ul {
    list-style: none;
    margin: 0;   /*removes default indention from IE & Opera*/
    padding: 0; /*removes default indention from Moz & Safari*/
    }

ul ul {
    margin-left: 40px; /*adds indention to nested ul*/
    list-style: disc;
    }

Code (markup):

cheers,

gary

 

Thanks a lot guys;

by the way how can I make a div to occupy the all the rest of the empty space available.

I have sidebar and main content area sometimes when contets grow the side bar remains to its length that also depends upon the no. of links in it.

I want to control the height of the side bar and main content area; no matter which ever div grows they both grow in equal height.

any suggestions?

 

You may be able to take some ideas from this:

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ - there is a link at the bottom to see how it looks.

 

You're thinking like a print designer. The web is not print. It is nearly always a bad idea to think in terms of controlling height. The web page is as long as it needs to be. It is print that has finite dimensions.

For an example of a web based version of what you want, see http://garyblue.port5.com/webdev/2col.html

cheers,

gary