What's Wrong With My CSS?

[say]

Hi, I face some problem. Here is the HTML:

<div>
  <ul>
    <li>
      <a href="">HOME</a>
    </li>
    <li>
      <a href="">ABOUT</a>
    </li>
    <li>
      <a href="">SERVICES</a>
    </li>
    <li>
      <a href="">PORTFOLIO</a>
    </li>
    <li>
      <a href="">BLOG</a>
    </li>
    <li>
      <a href="">CONTACT</a>
    </li>
  </ul>
</div>

And here is the CSS:

body {
  padding:0;
  margin:0;
}
.header {
  width:auto;
  max-width:900px;
  margin:0 auto;
}
.header h2 {
  margin:35px 0 35px 0;
  position:relative;
}
.nav {
  background:green;
}
.nav .menu {
  list-style:none;
}
 .nav .menu li {
  display:inline;
  float:left;
}
.nav .menu li a {
  display: inline-block;
  width: 140px;
  height: 45px;
  font: bold 13px 'Arial', sans-serif ;
  color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 48px;
  border-right: 1px solid #111;
}

But my nav bar doesn’t visible. There are just some borders,no text or background-color. I can’t understand what’s wrong. Can anyone help me?

[Steven Crader]

We will be unable to help since the CSS references classes but none are in the HTML provided. Also, if you could make a CodePen that reproduces the issue it would help a lot.

[__]

Your question is unclear. There are no elements in the html markup you posted that match any of the css rules.

The html + css you posted renders like this:

It displays as expected and does not match your description of the problem at all.

Perhaps you could share a link to the page in question, or recreate the problem on codepen?

[Author]

Posts