将选项卡 Link 移动到博客的右侧

Question

对于我在编写博客博客时遇到的问题，我将不胜感激 - http://www.blankesque.com。

我希望选项卡/'page' links 出现在屏幕的右侧。我已经设法用三个下拉菜单选项卡 / 'pages' links 做到了这一点，但是没有下拉菜单的选项卡 link - 标题为 'contact' - 没有t 出现在屏幕右侧的其他元素旁边。

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

#wctopdropnav li{
float : right;
}

然而，如果我使用上述编码，则会出现另一个问题。虽然选项卡确实出现在屏幕的右侧，但其他三个选项卡的下拉菜单选项的 text/links 也出现在右侧，但我希望它们留在左侧.下面我已经包含了整个导航条编码。

<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

您应该首先将 li for contact 放在您的 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/

将选项卡 Link 移动到博客的右侧

Moving The Tabs Link To The Right Hand Side Of The Blog

html

javascript

css

blogger