-1

I want to make menu using links which come horizontally rather than vertically

HTML code

<div>
        <ul>
            <li> <a id="ccs" href="#"> Home </a> </li>
            <li> <a id="ccs" href="#"> Marketing Service </a> </li>
            <li > <a id="ccs" href="#"> IT Management Service </a> </li>
            <li > <a id="ccs" href="#"> Molex Portfolio </a> </li>
            <li > <a id="ccs" href="#"> Contact US </a> </li>
            <li > <a id="ccs" href="#"> Employment Opportunities </a> </li>
        </ul>
        </div>

CSS Code

#ccs{
    background-color:#4CAF50;
    padding:20px;

    border:3px;
    color:yellow;
    text-align:center;
    display: inline-block;
    text-decoration:none;

Please Help!!!!

Ayush Bhagoliwal
  • 25
  • 2
  • 8

2 Answers2

1

Please research... http://www.w3schools.com/css/css_navbar.asp or CSS Horizontal list items

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
Community
  • 1
  • 1
Mike June Bug Captain
  • 1,013
  • 1
  • 7
  • 15
1

remove display:inline-block; from #ccs

Then use

li { display: inline-block; }

Omeiza
  • 111
  • 1
  • 5
  • Thanks For your help . Your answer perfectly worked as per my requirements. I am studying css from w3schools.com and I am half way through it. I haven't studied inline-block thats why I was facing problem Thanks for your help again!!!! – Ayush Bhagoliwal Jul 08 '16 at 19:54