How to change a vertical css menu to a horizontal one

Question

I would like to change this CSS to make this menu horizontal. I searched the internet for solutions and found that I had to change "display" value to "inline-block" but this didn't do it.

Thanks in advance,

PS: I hope I created this post the right way, if not please apologize me as this is my first post.

CSS code:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family:verdana;
    font-weight:normal;
    font-size:12px;
}

ul {
    list-style:none;
    margin:0; 
    padding:0;
    width:250px;
    margin:0 auto;
    -moz-box-shadow: 0 0 5px #111;
    -webkit-box-shadow: 0 0 5px #111;
    box-shadow: 0 0 5px #111;

}

ul li label {
    background:#3e3e3e;
    border-top:1px solid:#ffffff;
    border-bottom:1px solid #ffffff;
    color: #ffffff;
    text-shadow: 0 1px 1px #000;
    letter-spacing: 0.09em;
}

ul li input[type='checkbox'] {
    display: none;
}

ul li label {
    display:block;
    padding:12px;
    width:250px;
}

ul li i {
    font-size:18px;
    vertical-align: middle;
    width:20px;
    display:inline-block;
}

ul li span {
    display:inline;
    float:right;
    background:#48515c;
    border:1px solid #3c434c;
    border-bottom:1px solid #707781;
    padding:4px 6px;
    font-size:10px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: inset 0 0 10px #111;
    -webkit-box-shadow: inset 0 0 10px #111;
    box-shadow: inner 0 0 10px #111;
    position:relative;
}

ul li label:hover {
    background: #3e3e3e;
}

ul li label:hover span {
    background:#3e3e3e;
}

ul li input[type='checkbox']:checked ~ label {
    background: #3e3e3e;
    border-top:1px solid #878e98;
    border-bottom:1px solid #878e98;
}

ul li input[type='checkbox']:checked ~ label span {
    background: #3e3e3e;
    border-top:1px solid #1b5f85;
    border-bottom:1px solid #4cb1e4;
    -moz-box-shadow: inset 0 0 5px #111;
    -webkit-box-shadow: inset 0 0 5px #111;
    box-shadow: inner 0 0 5px #111;
}

ul li input[type='checkbox']:checked ~ .options {
    height: auto;
    display:block;
    min-height:40px;
    max-height:400px;
}

ul ul {
    background:#ffffff; margin:0; padding:0;
    -moz-box-shadow: inset 0 2px 2px #b3b3b3;
    -webkit-box-shadow: inset 0 2px 2px #b3b3b3;
    box-shadow: inner 0 2px 2px #b3b3b3;
}

ul ul li a {
    padding:6px 12px;
    color:#3e3e3e;
    text-decoration:none;
}

ul ul li a:hover {
    color: #05409A;
}

ul ul li a span {
    color:#3e3e3e;
    background:none;
    border:1px solid #ccc; 
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul ul li {
    border-bottom:1px solid #ccc;
}

ul ul li:first-child {
    padding-top:6px;
}

ul ul li:last-child {
    padding-bottom:6px; border:0;
}

.options {
    height: 0;
    display: block;
    overflow: hidden;
}

HTML code:

  <ul>
<li class="block">
    <input type="checkbox" name="item" id="item1" />   
    <label for="item1"><i aria-hidden="true"></i> Home </label>
    <ul class="options">
        <li><a href="Text/Home.html" target="TextIFrame"><i aria-hidden="true"></i> Home </a></li>
    </ul>
</li>
<li class="block">
    <input type="checkbox" name="item" id="item2" />   
    <label for="item2"><i aria-hidden="true"></i> French Tutoring </label>
    <ul class="options">
        <li><a href="Text/ChildrenKto12.html" target="TextIFrame"><i aria-hidden="true"></i> Children K to 12 </a></li>
        <li><a href="Text/Homeschool.html" target="TextIFrame"><i aria-hidden="true"></i> Homeschool </a></li>
        <li><a href="Text/APFrenchSATtraining.html" target="TextIFrame"><i aria-hidden="true"></i> AP French & SAT training </a></li>
    </ul>
</li>
<li class="block">
    <input type="checkbox" name="item" id="item3" />   
    <label for="item3"><i aria-hidden="true"></i> French Conversation </label>
    <ul class="options">
        <li><a href="Text/HighSchoolUniversity.html" target="TextIFrame"><i aria-hidden="true"></i> High School & University </a></li>
        <li><a href="Text/BasicFrenchForTravellers.html" target="TextIFrame"><i aria-hidden="true"></i> Basic French for Travelers </a></li>
        <li><a href="Text/RefreshYourFrench.html" target="TextIFrame"><i aria-hidden="true"></i> Refresh your French </a></li>
    </ul>
</li>
<li class="block">
    <input type="checkbox" name="item" id="item4" />   
    <label for="item4"><i aria-hidden="true"></i> French Immersion </label>
    <ul class="options">
      <li><a href="Text/Workschops.html" target="TextIFrame"><i aria-hidden="true"></i> Workschops </a></li>
      <li><a href="Text/SummerCamp.html" target="TextIFrame"><i aria-hidden="true"></i> Summer Camp </a></li>
    </ul>
</li>
<li class="block">
    <input type="checkbox" name="item" id="item5" />   
    <label for="item5"><i aria-hidden="true"></i> About Us </label>
    <ul class="options">
        <li><a href="Text/ContactUs.html" target="TextIFrame"><i aria-hidden="true"></i> Contact Us </a></li>
        <li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Testimonies </a></li>
        <li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Curriculum Vitae </a></li>
        <li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Reference letter</a></li>
        <li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Photos </a></li>
        <li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Links</a></li> 
    </ul>
</li>

Answer 1

First you have to set a new width to your list, the actual width is to small to contain more than one item horizontaly

ul { 
   ...
   width: 100%; /* for example */
   ...
}

Then, your items must be displayed inline (but keep some block properties)

ul li { 
    display: inline-block; 
}

It's a good start, now you'll adjust as you want

Answer 2

Try this CSS:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family:verdana;
    font-weight:normal;
    font-size:12px;
}

ul {
    list-style:none;
    margin:0; 
    padding:0;
    /*width:250px;*/
    margin:0 auto;
    -moz-box-shadow: 0 0 5px #111;
    -webkit-box-shadow: 0 0 5px #111;
    box-shadow: 0 0 5px #111;

}
ul li.block { float:left; }
ul li label {
    background:#3e3e3e;
    border-top:1px solid:#ffffff;
    border-bottom:1px solid #ffffff;
    color: #ffffff;
    text-shadow: 0 1px 1px #000;
    letter-spacing: 0.09em;
}

ul li input[type='checkbox'] {
    display: none;
}

ul li label {
    display:block;
    padding:12px;
    /*width:250px;*/
}

ul li i {
    font-size:18px;
    vertical-align: middle;
    width:20px;
    display:inline-block;
}

ul li span {
    display:inline;
    float:right;
    background:#48515c;
    border:1px solid #3c434c;
    border-bottom:1px solid #707781;
    padding:4px 6px;
    font-size:10px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: inset 0 0 10px #111;
    -webkit-box-shadow: inset 0 0 10px #111;
    box-shadow: inner 0 0 10px #111;
    position:relative;
}

ul li label:hover {
    background: #3e3e3e;
}

ul li label:hover span {
    background:#3e3e3e;
}

ul li input[type='checkbox']:checked ~ label {
    background: #3e3e3e;
    border-top:1px solid #878e98;
    border-bottom:1px solid #878e98;
}

ul li input[type='checkbox']:checked ~ label span {
    background: #3e3e3e;
    border-top:1px solid #1b5f85;
    border-bottom:1px solid #4cb1e4;
    -moz-box-shadow: inset 0 0 5px #111;
    -webkit-box-shadow: inset 0 0 5px #111;
    box-shadow: inner 0 0 5px #111;
}

ul li input[type='checkbox']:checked ~ .options {
    height: auto;
    display:block;
    min-height:40px;
    max-height:400px;
}

ul ul {
    background:#ffffff; margin:0; padding:0;
    -moz-box-shadow: inset 0 2px 2px #b3b3b3;
    -webkit-box-shadow: inset 0 2px 2px #b3b3b3;
    box-shadow: inner 0 2px 2px #b3b3b3;
}

ul ul li a {
    padding:6px 12px;
    color:#3e3e3e;
    text-decoration:none;
}

ul ul li a:hover {
    color: #05409A;
}

ul ul li a span {
    color:#3e3e3e;
    background:none;
    border:1px solid #ccc; 
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul ul li {
    border-bottom:1px solid #ccc;
}

ul ul li:first-child {
    padding-top:6px;
}

ul ul li:last-child {
    padding-bottom:6px; border:0;
}

.options {
    height: 0;
    display: block;
    overflow: hidden;
}

I have removed the width on the parent UL, added a 'float:left' to the parent LI's, and removed the width from the label. Hope this helps.