I have a horizontal css menu, with one drop-down layer that is also horizontal. I would like to right-justify the links of only one of the drop-downs (Contact Us).
Currently I can float all the ul li links right, but I would like to only float one right. I tried aligning the text too, which did not work. There is a conflict somewhere and I cannot find it.
Any help would be appreciated, posting here since I have been working on this since yesterday and this is my last resort.
<div id="nav-wrapper">
<ul id="navbar">
<li>
<a href="about-company.html">Company</a>
<ul class="navlinkcompany">
<li><a href="about-company.html">Overview</a></li>
<li><a href="leadership.html">Leadership</a></li>
<li><a href="company-investors.html">Investors</a></li>
<li><a href="careers.html">Careers</a></li>
<li><a href="partners.html">Partners</a></li>
<li><a href="news-articles.html">News</a></li>
</ul>
</li>
<li>
<a href="wi-fi-overview.html">Technology</a>
<ul class="navlinktechnology">
<li><a href="wi-fi-overview.html">Overview</a></li>
<li><a href="quantenna-advantage.html">Quantenna Advantage</a></li>
<li><a href="4x4-mimo.html">4X4 MIMO</a></li>
<li><a href="beamforming.html">Beamforming</a></li>
<li><a href="mesh-networking.html">Mesh Networking</a></li>
<li class="channel"><a href="channel-monitoring.html">Channel Monitoring</a></li><!--<li><a href="whitepapers.html">Whitepapers</a></li>-->
</ul>
</li>
<li>
<a href="products-overview.html">Products</a>
<ul class="navlinkproducts">
<li><a href="products-overview.html">Overview</a></li><!--<li><a href="4x4-mimo-chipsets.html">4X4 MIMO Chipsets</a></li>-->
<!--<li><a href="qhs-1000.html">QHS1000</a></li>-->
<li><a href="qhs-600.html">QHS600</a></li>
<li><a href="qhs-610.html">QHS610</a></li><!--<li><a href="qhs-450.html">QHS450</a></li>-->
<!--<li><a href="reference-designs.html">Reference Designs</a></li>-->
</ul>
</li>
<li>
<a href="solutions-overview.html">Applications</a>
<ul class="navlinksolutions">
<li><a href="solutions-overview.html">Overview</a></li>
<li><a href="solutions-home-networking.html">Home Networking</a></li>
<li><a href="solutions-carrier.html">Carrier</a></li>
<li><a href="solutions-consumer-electronics.html">Consumer Electronics</a></li>
<li><a href="solutions-enterprise.html">Enterprise</a></li><!--<li><a href="case-studies.html">Case Studies</a></li>-->
</ul>
</li>
<li>
<a href="news-press-releases.html">News</a>
<ul class="navlinknews">
<li><a href="news-press-releases.html">Press Releases</a></li>
<li><a href="news-articles.html">In the News</a></li><!--<li><a href="resources.html">Resources</a></li>-->
<li><a href="awards.html">Awards</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="history.html">History</a></li>
<li><a href="keep-me-posted.html">Keep Me Posted</a></li>
</ul>
</li>
<li>
<a href="contact-sales.html">Contact</a>
<ul class="navlinkcontactus">
<li><a href="contact-sales.html">Sales</a></li>
<li><a href="contact-headquarters.html">Headquarters</a></li>
</ul>
</li>
</ul>
#navbar {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 3px 9px 7px 9px;
text-decoration: none;
font-family: Helvetica, Verdana, Arial, serif;
font-size: 16px;
color: #999;
font-weight: bold; }
#navbar li a:hover {
color: #005596;
}
#navbar li ul {
display: none;
}
#navbar li:hover ul, #navbar li.hover ul {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
background-image: url(../images/menu-bg.gif);
background-repeat: repeat;
background-position: top center;
/*background-color:#7BA7C9;*/
-moz-border-radius:3px;
-webkit-border-radius:3px;
-opera-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
z-index: 100;
}
#navbar li:hover li, #navbar li.hover li {
float:left;
}
#navbar li:hover li.channel {
padding-left:4px;
}
#navbar li:hover ul.navlinkcompany li.drop-down-arrow, #navbar li.hover ul.navlinkcompany li.drop-down-arrow {
background-image: url(../images/drop-down-arrow-top.jpg);
background-repeat: no-repeat;
background-position: top center;
display:block;
height:6px;
width:6px;
position:relative;
top:-5px;
left:42px;
}
#navbar li:hover ul.navlinktechnology li.drop-down-arrow, #navbar li.hover ul.navlinktechnology li.drop-down-arrow {
background-image: url(../images/drop-down-arrow-top.jpg);
background-repeat: no-repeat;
background-position: top center;
display:block;
height:6px;
width:6px;
position:relative;
top:-5px;
left:150px;
}
#navbar li:hover ul.navlinkproducts li.drop-down-arrow, #navbar li.hover ul.navlinkproducts li.drop-down-arrow {
background-image: url(../images/drop-down-arrow-top.jpg);
background-repeat: no-repeat;
background-position: top center;
display:block;
height:6px;
width:6px;
position:relative;
top:-5px;
left:250px;
}
#navbar li:hover ul.navlinksolutions li.drop-down-arrow, #navbar li.hover ul.navlinksolutions li.drop-down-arrow {
background-image: url(../images/drop-down-arrow-top.jpg);
background-repeat: no-repeat;
background-position: top center;
display:block;
height:6px;
width:6px;
position:relative;
top:-5px;
left:350px;
}
#navbar li:hover ul.navlinknews li.drop-down-arrow, #navbar li.hover ul.navlinknews li.drop-down-arrow {
background-image: url(../images/drop-down-arrow-top.jpg);
background-repeat: no-repeat;
background-position: top center;
display:block;
height:6px;
width:6px;
position:relative;
top:-5px;
left:425px;
}
#navbar li:hover ul.navlinkcontactus li.drop-down-arrow, #navbar li.hover ul.navlinkcontactus li.drop-down-arrow {
background-image: url(../images/drop-down-arrow-top.jpg);
background-repeat: no-repeat;
background-position: top center;
display:block;
height:6px;
width:6px;
position:relative;
top:-5px;
left:490px;
}
li.navlinkcontactus {
float:right;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #fff;
font-size:13.5px;
line-height:16px;
padding: 6px 6px;
}
#navbar li li a:hover {
color: #005596;
}
Thanks!