1

I am trying to create a menu using html, I have added my link in an unordered list (ul) has shown below. In my css i added a display:inline; to the links so that they would display in a link like a menu but for some reason it doesn't seem to work.

#menu a {
  text-decoration: none;
}
#menu ul {
  list-style: none;
}
#menu ul li a {
  display: inline;
}
<div id="menu">
  <ul>
    <li><a href="index.php">Home</a>
    </li>
    <li><a href="about.php">About Us</a>
    </li>
    <li><a href="offers.php">Special Offers</a>
    </li>
    <li><a href="staff.php">Meet Our Staff</a>
    </li>
    <li><a href="contact.php">Contact</a>
    </li>
  </ul>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
becky
  • 81
  • 2
  • 8

3 Answers3

5

You are targeting the anchors, which are already inline by default. I believe you mean to target the list items:

#menu ul li {
    display: inline;
}

JSFiddle

George
  • 36,413
  • 9
  • 66
  • 103
1

You were very close!

The only thing wrong with your code, is that display: inline; should be on your <li> elements instead of your <a> elements :

#menu a {
  text-decoration: none;
}
#menu ul {
  list-style: none;
}
#menu ul li {
  display: inline;
}
<div id="menu">
  <ul>
    <li><a href="index.php">Home</a>
    </li>
    <li><a href="about.php">About Us</a>
    </li>
    <li><a href="offers.php">Special Offers</a>
    </li>
    <li><a href="staff.php">Meet Our Staff</a>
    </li>
    <li><a href="contact.php">Contact</a>
    </li>
  </ul>
</div>

(see also this Fiddle)

John Slegers
  • 45,213
  • 22
  • 199
  • 169
-1

Try this: ul li { float: left; padding-right:10px; }

https://jsfiddle.net/n4aak3nk/1/

john c. j.
  • 725
  • 5
  • 28
  • 81