CODEWITHSUNDEEP
htmlcss
Dianabolz
Dianabolz

Reputation: 79

CSS Navigation bar dropdown issue

Having trouble with some css on my dropdown navigation bar. On the dropdown i would like it to be the same width as the standard navigation links and directly below it rather than slightly to the right as you can see when hovering over 'Page2'. Also why is half of the dropdown navigation link white unless you hover over it.

Here is my Fiddle.

CSS / HTML / Demo

nav {
  width: 960px;
  background-color: #3673a7;
  height: 50px;
  line-height: 50px;
  margin: auto;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 1px 0px rgba(48, 50, 50, 0.81);
  -moz-box-shadow: 2px 2px 1px 0px rgba(48, 50, 50, 0.81);
  box-shadow: 2px 2px 1px 0px rgba(48, 50, 50, 0.81);
}
nav ul {
  text-align: center;
  margin: auto;
}
nav ul li {
  width: 65px;
  display: inline-block;
  padding: 0 30px 0 30px;
  border-right: 1px solid #355e7f;
  float: left;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav ul li:last-child {
  border-right: none;
}
nav ul li:hover {
  background-color: #3b8acc;
}
nav a:link,
a:visited {
  color: #ffffff;
  text-decoration: none;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 0.9em;
}
<nav>
  <ul>
    <li><a href="index.html">Page 1</a>
    </li>
    <li><a href="#">Page 2</a>
      <ul class="drop">
        <li><a href="#">Drop1</a>
        </li>
        <li><a href="#">Drop2</a>
        </li>
        <li><a href="#">Drop3</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Page 3</a>
    </li>
    <li><a href="#">Page 4</a>
    </li>
    <li><a href="#">Page 5</a>
    </li>
    <li><a href="#">Page 6</a>
    </li>
    <li><a href="#">Page 7</a>
    </li>
  </ul>
</nav>

Upvotes: 0

Views: 41

Answers (1)

APAD1
APAD1

Reputation: 13666

The padding that you have defined on the parent LIs was throwing off the alignment of the children, just add these two rules to your CSS(to cancel out the padding that is being applied to the parents):

nav ul li ul { padding:0; }
nav ul li ul li { padding:0; border:none; }

Updated Fiddle

Upvotes: 1

Related Questions