菜单链接不能右移

问题描述：

我正在制作自定义响应菜单。并在我的菜单上有两个链接注销和网站正面，我需要正确地浮动。在桌面模式下到另一侧时。我已经试过漂浮，但不能让它们都对齐。菜单链接不能右移

当移动视图我需要漂浮的右侧链接，只是正常的垂直。

你可以在这里看到。例如：http://codepen.io/riwakawebsitedesigns/pen/GgLjmL和http://codepen.io/riwakawebsitedesigns/full/GgLjmL/

什么是最好的方式。

HTML

<div class="container-menu"> 
<a class="toggleMenu" href="#">Menu</a> 
<ul id="menu"> 
    <li><a href="">Dashboard</a></li> 
    <li><a href="#">Catalog</a> 
     <ul> 
      <li><a href="">Categories</a></li> 
      <li><a href="">Categories</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Extensions</a> 
     <ul> 
      <li><a href="">Modules</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Sales</a> 
     <ul> 
      <li><a href="#" class="top">Customers</a> 
       <ul> 
        <li><a href="#">Customers</a></li> 
        <li><a href="#">Customer Group</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">System</a> 
     <ul> 
      <li><a href="">Setting</a></li> 
      <li><a href="#" class="top">Design</a> 
       <ul> 
        <li><a href="#">Layouts</a></li> 
        <li><a href="#">Banners</a></li> 
       </ul> 
      </li> 
      <li><a href="#" class="top">Users</a> 
       <ul> 
        <li><a href="#">User</a></li> 
        <li><a href="#">User Group</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="">Website Front</a></li> 
    <li><a href="">Logout</a></li> 
</ul> 
</div> 

<div class="container-fluid"> 
<div class="row" style="margin-top: 10px;"> 
<div class="col-lg-12"> 
<div class="alert alert-danger">Test</div> 
</div> 
</div> 
</div>

CSS

body, 
#menu, 
ul, 
li, 
a { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 

a { 
    text-decoration: none; 
} 

.container-menu { 
    width: 100%; 
    margin: 0 auto; 
} 

.right { 
    float: right; 
} 

.toggleMenu { 
    display: none; 
    background: #666; 
    padding: 10px 15px; 
    color: #fff; 
} 
#menu { 
    list-style: none; 
    *zoom: 1; 
    background: rgba(0,0,0,1); 
    background: rgba(19,19,19,1); 
    background: -moz-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,19,19,1)), color-stop(0%, rgba(17,17,17,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(0%, rgba(43,43,43,1)), color-stop(2%, rgba(44,44,44,1)), color-stop(4%, rgba(71,71,71,1)), color-stop(27%, rgba(61,61,61,1)), color-stop(100%, rgba(28,28,28,1))); 
    background: -webkit-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); 
    background: -o-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); 
    background: -ms-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); 
    background: linear-gradient(to bottom, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131313', endColorstr='#1c1c1c', GradientType=0); 
} 

#menu:before, 
#menu:after { 
    content: " "; 
    display: table; 
} 

#menu:after { 
    clear: both; 
} 

#menu ul { 
    list-style: none; 
} 

#menu a { 
    padding: 10px 15px; 
    color:#fff; 
    text-decoration: none 
} 

#menu li { 
    position: relative; 
} 

#menu > li { 
    float: left; 
} 

#menu > li > a { 
    display: block; 
} 

#menu li ul { 
    position: absolute; 
    left: -9999px; 
} 

#menu > li.hover > ul { 
    left: 0; 
} 
#menu li li.hover ul { 
    left: 100%; 
    top: 0; 
} 

#menu ul .top { 
    background-image: url('./images/arrow-right.png'); 
    background-position: 95% center; 
    background-repeat:no-repeat; 
} 

#menu li li a { 
    display: block; 
    background: black; /* A grey background */ 
    opacity: 0.7; /* 80% opacity */ 
    position: relative; 
    z-index:100; 
    width: 147px; 
} 

#menu li li li a { 
    background: black; /* A grey background */ 
    opacity: 0.7; /* 80% opacity */ 

    z-index:200; 
} 

@media screen and (max-width: 768px) { 
    .active { 
     display: block; 
    } 
    #menu > li { 
     float: none; 
    } 

    #menu li li a { 
     width: 100%; 
    } 

    #menu ul { 
     display: block; 
     width: 100%; 
    } 
    #menu > li.hover > ul , #menu li li.hover ul { 
     position: static; 
    } 

}

答

你可以做到以下几点：

HTML

<li class='float-right'><a href="">Website Front</a></li> 
    <li class='float-right'><a href="">Logout</a></li>

CSS

.float-right{ 
    float:right!important; 
}

例子：http://codepen.io/anon/pen/yyraQX

在移动视图中，它仍然显示在右边可以让它们垂直，并在移动视图左侧？ – user4419336 2015-04-01 09:16:34

你不能那样做简单的CSS。你可以使用一些javascript来检测是否移动，然后移除这个类：'$（“。float-right”）。removeClass（“float-right”）'。阅读更多在这里：http://*.com/a/13805337/2063910 – enb081 2015-04-01 09:20:20

伟大的建议欢呼 – user4419336 2015-04-01 09:27:26

答

如果菜单的数量是固定的，你可以通过nth-of-type选择它，并添加浮动：权利;

http://codepen.io/anon/pen/qEwaMJ

这里是代码。但如果你不知道菜单元素的数量，然后添加特殊的课程，并按类别选择

菜单链接不能右移

相关推荐