problems with nav bar and text boxes when using @media

I have just programmed my first website and am now trying to make it adaptive. I have used html and css. I decided to use @media as I couldn't get a grid to work.

I am currently working on a 480px screen size.

I have 2 problems;

1. Nav bar. The border doesn't stretch to enclose the nav bar titles and the sub menu's don't show.
The sub menus show in the full size url.

Is there a way to get the sub menu's to show? The other option that I have is to c&p the drop down
menu that I currently use in my current site.

2. I am trying to make the content text box wider by reducing the margin on the left. The code isn't working. What do I need to do to get the code to work?

I have pasted a copy of the nav bar css code below, a copy of the text box code and attached a screen print of the opera 7 result;

The css nav bar

Code:

---

#menu {position: relative;
      border-style: outset;
      border-width: 5px;
      border-color: #D5D6FF;
      padding-bottom: 30px;
      background-color: #FEFEE1;
      }
#menu ul {
    padding: 5px;
    font-family: Arial,Verdana;
    font-size: 1.5em;
    list-style: none;
}

#menu ul li {
    display: block;
    float: left;
    position: relative;
}

#menu li ul {
    display: none;
}

#menu ul li a {
    display: block;
    margin-left: 5px;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    white-space: nowrap;
    color: blue;
}

#menu ul li a:hover {
    background: #fffff0;
}

#menu li:hover ul {
    display: block;
    position: absolute;
}

#menu li:hover li {
    z-index: 200;
    float: none;
    font-size: 0.5em;
}

#menu li:hover a {
    background: #fffff0;
    border-style: outset;
    border-color: #D5D6FF;
    border-width: 3px;
}

#menu li:hover li a:hover {
    background: #fffff0;
}

---

The text box frame code in the @media file

Code:

---

@media only screen and (max-device-width: 480px) {
body{maximum-width: 30em;}
#main-box { padding-bottom: 20px;
            background-color:#FFFFFF;
          position: relative; left: 2.00%;
          position: relative; right: 2.00%;
          width: 96%;
          position: relative; top: 30px;
          padding: 10px;
          border-color: #D5D6FF;
          border-style: outset;
          border-width: 4px;
          text-align: left;
          font-family: arial,san-serif;
          font-size: 1.25em;
          color: black;
          }
}

---

Screen print of opera 7 mobile layout

Attachment 15075

I don't have a mobile with internet. I use a screen simulator that#s available from opera..