Trying to create a menu in HTML/CSS which is not showing up horizontally

Question

I'm trying to create a very basic menu but having some problems why its not alligning horizontally showing up, any help would be appreciated... Code is:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow:hidden; 
}
li { 
    float: center; 
}
a:link, a visited {
    font-family: arial;
    display: block;
    width: 120px;
    color: white;
    background color: #BBDB88;
    text-align: center; 
}
a:hover, a:active { 
    background-color: #69C08A; 
}

<div id="header">
    <h1>Portfolio</h1> 
</div>

<body> 
    <ul>
        <li><a href="#HomePage">Home</a></li>
        <li><a href="#AboutMe">About Me</a></li>
        <li><a href="#Coding">Coding</a></li>
        <li><a href="#Contacts">Contacts</a></li>
    </ul>
</body>
</html>

possible duplicate of [Make ul elements appear in a horizontal row](http://stackoverflow.com/questions/885691/make-ul-elements-appear-in-a-horizontal-row) — alex, Jun 09 '15 at 16:44
However, you got an answer below, but if you are really interested in developing a Menu that is even more attractive you may [follow this](http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp). — Greenhorn, Jun 09 '15 at 16:50
why is there a div before your body-tag? and why is your head inside a style-tag? you should really read some words about basic html structure. — cari, Jun 09 '15 at 16:51

score 0 · Answer 1 · edited Jun 09 '15 at 18:40

Try This:

Set the <li> to display: inline-block;

CSS

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li { 
    float:center;
}
a:link, a visited {
    font-family:arial;
    display:block;
    width:120px;
    color:white;
    background color:#BBDB88;
    text-align:center;
}

ul li {
    background: #000;
    display:inline-block;
}

a {
    text-decoration: none;
}

a:hover, a:active {
    background-color:#69C08A;
    color: #fff;
}

HTML

<div id="header"><h1> Portfolio </h1></div>
  <ul>
    <li><a href="#HomePage">Home</a></li>
    <li><a href="#AboutMe">About Me</a></li>
    <li><a href="#Coding">Coding</a></li>
    <li><a href="#Contacts">Contacts</a></li>
  </ul>

DEMO HERE

Trying to create a menu in HTML/CSS which is not showing up horizontally

1 Answers1