CODEWITHSUNDEEP
htmlcssnavigation
JaPerk14
JaPerk14

Reputation: 1664

css horizontal navigation bug

I am having trouble styling my css navigation bar. The last list item is dropped to a second line which looks really bad for the website. Can someone look over my code and find what I'm doing wrong? Thanks in advance.

HTML:

  <div id="HorizNav">
    <ul>
      <li><a href="#" id="horiznav-first">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#" id="horiznav-last">Social Media</a></li>
    </ul>
  </div>

CSS:

#HorizNav ul {
  float: right;
  text-Align: left;
  width: 465px;
  height: 50px;

  background: #ff0000;
  color: #fff;
  font-size: 12px;

}

#HorizNav ul li { float: left; }

#HorizNav ul li a {
  display: block;
  text-decoration: none;
  background: #aa00ff;
  color: #fff;

  width: 92px;
  height: 20px; /* height minus padding-top */

  padding-top: 30px;
  padding-left: 10px;

  border-right: 1px solid #fff;
}

#HorizNav ul li a:hover {
  background: #fff;
  color: #aa00ff;
}

#HorizNav ul li a#horiznav-last { none; }

Upvotes: 0

Views: 75

Answers (1)

Krish
Krish

Reputation: 2670

Change this rule in your CSS

#HorizNav ul {
  float: right;
  text-align: left;
  width: 515px;
  height: 50px;

  background: #ff0000;
  color: #fff;
  font-size: 12px;

}

DEMO http://jsfiddle.net/n5B5W/6/

Upvotes: 1

Related Questions