javascript - 将选项卡链接移至博客的右侧

Question

对于我在编写博客博客时遇到的问题，我希望得到一些帮助 - http://www.blankesque.com .

我希望选项卡/“页面”链接出现在屏幕的右侧。我已经设法使用三个下拉菜单选项卡/“页面”链接来做到这一点，但是没有下拉菜单的选项卡链接(标题为“联系人”)不会出现在右侧的其他元素旁边屏幕。

我尝试添加以下代码来解决此问题:

#wctopdropnav li{
float : right;
}

但是，如果我使用上述编码，就会出现另一个问题。虽然该选项卡确实出现在屏幕的右侧，但其他三个选项卡的下拉菜单选项的文本/链接也出现在右侧，但理想情况下我希望它们保留在左侧。下面我包含了整个导航栏编码。

<style>

#wctopdropcont { /* width of the main bar categories */
width:100%;
height:40px;
display:block;
padding: 0;
margin-left: -16px;

z-index:100;
top:0px;
left:0px;
position:fixed;

background:#ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
  }

#wctopdropnav{ /* social */
float: right;
width:900px;
height:7px;
display:block;
padding:0;
margin-left:30px;
}
#wctopdropnav ul{
float:right;
margin:0;
padding:0;

}
#wctopdropnav li{
float:left;
list-style:none;
line-height:35px;
margin:0;
padding:6.5px;/* height of the clicked bar */
background:#ffffff;
}

#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float:right;
display:block;
margin: 0px;
text-transform: uppercase;
font:11px cantarell!important;
padding: 5px;
text-decoration:none;
letter-spacing : 0.13em;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active,
#wctopdropnav .current_page_item a  {
color:black;
font-weight: bold;
padding: 5px;
background: white; /* Old browsers */
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter:black;  
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 11px;
background:#ffffff;
color: #000000;
width: 100px;
margin: 0;
padding: 0px 1px;
line-height:20px;
position: relative;
}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter: white;
}
#wctopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
</style>


<div id='wctopdropcont'>
<div id='wctopdropnav'>
     <ul>
       <li><a href='#'>Blankesque</a> 
<ul>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li>
<li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li>
         </ul></li>
<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
</ul></li>
<li><a href='#'>Features</a>

         <ul>
              <li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
              <li><a href='http://www.blankesque.com/search/label/Creative'>Creative</a></li>
           <li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
              <li><a href='http://www.blankesque.com/search/label/Favourites'>Favourites</a></li>
              <li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li>
           <li><a href='http://www.blankesque.com/search/label/Hair'>Hair</a></li>
           <li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li>
              <li><a href='http://www.blankesque.com/search/label/Life'>Life</a></li>
           <li><a href='http://www.blankesque.com/search/label/Skincare'>Skincare</a></li>
           </ul>
       </li></ul>
<li><a href='#'>Contact</a></li>

</div>
</div>

我尝试了各种不同的方法，但没有效果，如果有人可以帮助我解决这个问题，那么我将非常感激。

提前谢谢您，

伊拉姆

Answer 1

您应该首先将 contact 的 li 放入 ul 中，如下所示:

<div id="wctopdropnav">
<ul>
<li><a href="#">Blankesque</a>
<ul>
<li><a href="http://www.blankesque.com">Home</a></li>
<li><a href="http://www.blankesque.com/p/about-blankesque-blog.html">About</a></li>
<li><a href="http://www.blankesque.com/p/disclaimer-policy_13.html">Policies</a></li>
</ul></li>
<li><a href="#">Social</a>
<ul>
<li><a href="http://www.pinterest.com/blankesque">Pinterest</a></li>
<li><a href="http://www.twitter.com/itsblankesque.com">Twitter</a></li>
<li><a href="http://www.bloglovin.com/people/aladyinwhite-8315551">Bloglovin</a></li>
<li><a href="http://www.instagram.com/blankesque/blankesquexo">Instagram</a></li>
</ul></li>
<li><a href="#">Features</a>
<ul>
<li><a href="http://www.blankesque.com/search/label/Beauty">Beauty</a></li>
<li><a href="http://www.blankesque.com/search/label/Creative">Creative</a></li>
<li><a href="http://www.blankesque.com/search/label/Fashion">Fashion</a></li>
<li><a href="http://www.blankesque.com/search/label/Favourites">Favourites</a></li>
<li><a href="http://www.blankesque.com/search/label/Fragrance">Fragrance</a></li>
<li><a href="http://www.blankesque.com/search/label/Hair">Hair</a></li>
<li><a href="http://www.blankesque.com/search/label/Haul">Haul</a></li>
<li><a href="http://www.blankesque.com/search/label/Life">Life</a></li>
<li><a href="http://www.blankesque.com/search/label/Skincare">Skincare</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li><!-- RIGHT HERE -->
</ul>

</div>

参见示例:https://jsfiddle.net/pyexm7us/