你怎么得到一个div来向右移动？

Question

我正在尝试将菜单div显示在我所拥有的菜单图标下方，但将其打开到左侧。菜单图标位于屏幕的右上角，如果div向右打开，则会离开屏幕。

有谁知道怎么做？我试过了float:right; position:relative/absolute; right:0px，但它没有动。

我还在菜单图标上尝试了text-align:right。滚动时，它会将图标推到div的右侧，这是我想要的，但在onmouseout之后，图标会回到最初渲染的位置。

下图显示了目前正在做的事情：

这显示了我想在div渲染时图像的样子，但不是在标题之外：

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;
}