1

I would appreciate some help with an issue I've come across whilst coding my blogger blog - http://www.blankesque.com.

I would like the tabs / 'page' links to appear on the right hand side of the screen. I have managed to do this with the three dropdown menu tabs / 'pages' links however the tab link which doesn't have a dropdown menu - titled 'contact' - doesn't appear alongside the other elements on the right hand side of the screen.

I have tried to add the following piece of coding to resolve this issue:

#wctopdropnav li{
float : right;
}

However another issue comes to light if I use the above stated coding. Although the tab does indeed appear on the right side of the screen, but the text/links for the other three tabs' dropdown menu options then also appear on the right side, but I would ideally want them to stay on the left side. Below I have included the entire navigation bar coding.

<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>

I have tried various different methods but to no avail, if anyone can aid me in solving this issue then I'd be extremely grateful.

Thank you in advance,

Iram

1 Answer 1

0

You should start by putting the li for contact inside of your ul like this:

<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>

See example: https://jsfiddle.net/pyexm7us/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.