水平菜单：如何向右浮动，但菜单项保持正确顺序？ [英] Horizontal menu: how to float right but keep the menu items in the correct order?

问题描述

我在水平菜单（.drop_menu li）中使用 float：right ，因为我希望菜单与屏幕右侧（和徽标）对齐到左侧）。一切正常，唯一的问题是我的菜单项现在顺序错误（链接3然后是链接3，然后是链接1而不是相反的顺序）。有办法解决吗？
非常感谢

I'm using float: right for my horizontal menu (.drop_menu li) as I want the menu to be aligned to the right side of the screen (and logo to the left side). It works OK, the only issue is that my menu items are now in the wrong order (Link 3 then Link 3 then Link 1 instead of the opposite). Is there a way to fix that? Many thanks

http://jsfiddle.net / eLSbq /

<div class="header">
<div class="logo">Logo</div>                            
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    </ul>
</li>
<li><a href='#'>Link 2</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
<li><a href='#'>Link 3</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
</ul>
        </div>


.header {
    width: 100%;
    background: #fff;
    color: #124191;
    font-weight: 300;
    font-size: 28px;
    height: 120px;
    display: table;
     position: fixed;
        z-index: 999999;
        opacity: 0.7;
    background: aqua;
}

.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}

 .drop_menu {
    padding:0;
    margin:0;
    list-style-type:none;

    right: 0;
    display: table;
    z-index: 3000;
       display: table-cell;
    vertical-align: middle;
    right: 0;

}


.drop_menu li { display: table-cell;
    vertical-align: middle; float: right;}

.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#666;
    text-decoration:none;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;



}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }

推荐答案

删除 float：right 来自 li ，可防止反向订单。

Remove float:right from li which prevent the reverse order.

添加 float：right 到ul的 .dropdown 类中，该菜单将整个菜单置于右侧。

Add float:right to the ul's .dropdown class which put your entire menu at right side.

在 li 中添加 float：left ，这有助于子菜单保持对齐。

Add float:left to the li which helps your sub-menu to stay align.

.drop_menu {
    float: right;  
}
.drop_menu li { 
    display: table-cell;
    vertical-align: middle;
    float:left;
}

Js Fiddle演示

这篇关于水平菜单：如何向右浮动，但菜单项保持正确顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！