基础5.2 - 下拉子菜单方向

Question

我正在尝试将Share下拉子菜单内容右对齐，而不是Share下面

这是我的代码：

<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
    <li><a href="#">Infos</a></li>
    <li class="has-dropdown" ><a href="#">Share</a>
        <ul class="dropdown" >
            <li><a href="#">This is a link</a></li>
            <li><a href="#">This is another</a></li>
            <li><a href="#">Yet another</a></li>
        </ul>
    </li> 
    <li><a href="#">Third option</a></li>
</ul>

将自定义css添加到原始基础中：

.has-dropdown ul{display:none;}
.has-dropdown:hover ul{display:block;}

问题在于我无法访问Third option个链接，因此我希望This i a link，This another，Yet another子菜单不在Share之下，就在右边...

正如我在docs中发现的那样，我试图像这样添加一些data-options="align:right"：

<li class="has-dropdown" ><a data-options="align:right" href="#">Share</a>

......没有成功...... :(

EDIT1

在Sai Ram Sudheer的回答中，我有：

不是更好......

Answer 1

一种做法是将ul中的文本对齐

.has-dropdown ul{display:none;}
.has-dropdown:hover ul{display:block;text-align:right;}

或者你可以在li元素上使用class right

<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
    <li><a href="#">Infos</a></li>
    <li class="has-dropdown" ><a href="#">Share</a>
        <ul class="dropdown" >
            <li class="right"><a href="#">This is a link</a></li>
            <li class="right"><a href="#">This is another</a></li>
            <li class="right"><a href="#">Yet another</a></li>
        </ul>
    </li> 
    <li><a href="#">Third option</a></li>
</ul>

哎呀我以前没有得到这个问题。 我尝试使用data-options =“align：left”但无法将其置于主菜单的右侧。 检查这个link中的导航，我做了一段时间。我使用了jquery和一些css来获取它。