Question

How to convert the vertical menu into horizontal? Which lines in the below-given code are responsible for this?

ul#vertmenu {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 200px;
}
ul#vertmenu li {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    float: left;
    font: bold 11px/16px arial,helvetica,sans-serif;
    position: relative;
    width: 100%;
}
ul#vertmenu li ul li {
    background: none repeat scroll 0 0 #FFCF8B;
}
ul#vertmenu li a {
    display: block;
    padding: 2px 3px;
}
ul#vertmenu li a:hover {
    background: none repeat scroll 0 0 #FFCF8B;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    color: #AA0000;
}
ul#vertmenu li ul li a:hover {
    background: none repeat scroll 0 0 #FFEDD3;
    border-left: 1px solid #FFFFFF;
}
ul#vertmenu ul {
    display: none;
    position: absolute;
    top: 0;
}
ul#vertmenu li:hover ul {
    display: block;
    left: 200px;
}

I found the answer here. Exactly what I wanted to know:

“First, take out all the mentions of a “width”. You’re going to want your menu to span your page not be restricted to the 180px in the current version.

Next, we need to tell the

elements to lay in-line with each other, instead of stack top to bottom. So, add display:inline to #vertmenu li.

After that, we’ll need to tell the elements to follow suit. So, remove display:block from the #vertmenu li a decleration. “

Answer 1

change display:block; to

  display:inline;