how do you get a div to render to the right?

Question

I am trying to get a menu div to appear below the menu icon that I have but have it open up to the left. The menu icon is on the top right of the screen, if the div opens to the right, it goes off the screen.

Does anyone know how to do this? I have tried float:right; position:relative/absolute; right:0px but it doesn't move.

I have also tried: text-align:right on the menu icon. On roll over it pushes the icon to the right of the div which is what I want but after I onmouseout the icon goes back to where it originally rendered.

The following picture shows what it's currently doing:

This shows what I would like the image to look like when the div renders, but not out of the header:

HTML:

<ul id="primary-nav">
    <li class='primary-link' style="text-align:right">
       <a id="lnkChannel" runat="server">
           <asp:image runat="server" id="menuImage" imageurl="Menu.gif"></asp:image>
       </a>
       <div class='secondary-nav-wrapper'>  
          <ul class='secondary-nav'>
             <li>
                 <a class="title-image">
                      <span class='block-green'>Main Header 1</span>
                 </a>
                 <div class="menu-column">
                      <ul class="tertiary-nav">
                          <li>
                              <a class="tertiary-title" href="">link 1</a>
                          </li>
                      </ul>
                 </div>
             </li> 
          </ul>
      </div>
    </li>
</ul>

CSS:

.header1 {
  max-width: 60px;
}
.header1 .main-nav #primary-nav {
  float: left;
}
.header1 .main-nav #primary-nav > li {
  float: left;
}
.header1 .main-nav #primary-nav > li .secondary-nav-wrapper {
  background-color: #eeeeee;
  border-top: 3px solid #35a096;
  border-bottom: 3px solid #35a096;
  display: none;
}
.header1 .main-nav #primary-nav > li:hover > a {
  background-color: #eeeeee;
}
.header1 .main-nav .secondary-nav {
  margin-bottom: 10px;
  overflow: hidden;
}
.header1 .main-nav .secondary-nav:before,
.header1 .main-nav .secondary-nav:after {
  content: " ";
  display: table;
}
.header1 .main-nav .secondary-nav:after {
  clear: both;
}
.header1 .main-nav .secondary-nav > li {
  border-right: 1px dotted #cccccc;
  float: left;
  margin: 6px 0 -5000px 0;
  padding: 0 6px 5000px 6px;
}
.header1 .main-nav .secondary-nav > li .title-image {
  overflow: hidden;
  position: relative;
}
.header1 .main-nav .secondary-nav > li .title-image img {
  display: block;
}
.header1 .main-nav .secondary-nav > li .title-image .block-green {
  display: block;
  font-weight: 700;
}
.header1 .main-nav .tertiary-nav {
  margin-top: 10px;
}
.header1 .main-nav .tertiary-nav li {
  line-height: 1;
  margin-bottom: 8px;
  margin-left: 5px;
}
.header1 .main-nav .tertiary-nav li a {
  color: #3a3a3a;
  display: block;
  font-family: 'Arial';
  font-size: 11px;
}