title: CSS: how to change "ul" position?
body: <p>The following code shows a pop up menu. </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;position ul&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
  html, body, div, ul {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  }
  #main {
  position:relative;
  width:950px;
  height:30px;
  margin:75px auto 0;/*75px beneath top of page, auto distance from page's right/left   side*/
  border:2px solid #8c8b4b;
  }
  #main li {
  width:92px;
  height:30px;
  float:left;
  list-style-type:none;
  border:2px solid red;
  }
  #main li a { text-decoration:none; }
  #main li ul li {
  width:400px;
  border:2px solid #8c8b4b;
  height:30px;
  }
  li.menu1 { background-image:url('images/men1.png'); }
  li.menu2 { background-image:url('images/men1.png'); }
  .menu2 li a {
  color:white;
  font-weight:bold;
  }
  li.menu2 div {
  position:absolute;
  margin-left:-999em;
  padding-top:200px;
  }
  li.menu2 ul {
  top:400px;
  list-style:none;
  margin:0;
  font-size:110%;
  }
  li.menu2:hover div { margin:0; }
  li.menu2:hover ul li { clear:left; }
  ul li ul.rounded-corner {
  border:2px solid red;
  height: 200px;
  width:776px;
  background-image:url(../banner/bg_to_sitepoint.gif);
  background-repeat:no-repeat;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  border-radius:50px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;ul id="main"&gt;
  &lt;li class="menu1"&gt;&lt;a href="#"&gt;menu item1&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu2"&gt;menu item2
      &lt;div&gt;
         &lt;ul class="rounded-corner"&gt;
       &lt;li&gt;&lt;a href="#"&gt;submenu2 item1&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;submenu2 item2&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;submenu2 item3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
       &lt;/div&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The submenu is consisted of a ul entity reesides inside a div.
  I would like to change that ul's position within its' ancestor: a div.
  I add: "top:100px;" to "li.menu2 ul" selector and see no impact whatsoever. "left" value is no good as well.
  Can anyone explain me please why i cannot make that ul repositioned inside its' div?
  How can i make it move to other place within the div?
  Attached is a screen shot of the present page which i'd like to change.
  Thanks a lot !</p>