Make CSS Menu horizontal

Question

I have this CSS Menu but i need to make it horizontal rather than vertical

I have a fiddle here so you can see an example: http://jsfiddle.net/WLwxx/1/

Here is the CSS Code i am using:

    .vertical-nav{
    height:auto;
    list-style:none;
width: 30%;
margin: 20px 0 0 0;
}
.vertical-nav li{
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
width: 100%;
}
.vertical-nav li:hover{
    background-color:#f36f25;
    color:#FFFFFF;
}
.vertical-nav li a{
    font-family:Calibri, Arial;
    font-size:18px;
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
}
.vertical-nav li.current {
    background-color:#F36F25;
}
.vertical-nav li.current a {
    color:#FFFFFF;
}

vertical-nav ul li ul{
    display:none;
    list-style-type:none;
    width:125px;
    padding:0px;
    margin-top:3px;
    margin-left:-5px;
}
vertical-nav ul li:hover ul{
    display:block;
}
vertical-nav ul li:hover ul li{
    background-color:#555555;
    width:125px;
    height:30px;
    display:inline-block;
}
vertical-nav ul li ul li:hover{
    background-color:#333333;
}
vertical-nav ul li ul li a{
    color:#FFF;
    text-decoration:underline;
}
vertical-nav ul li ul li a:hover{
    text-decoration:none;
}

.vertical-nav li ul {
    display: none;
    margin-top: 6px;
    padding: 0;
}

.vertical-nav li:hover ul {display: block;}

any ideas what i can do to achieve this?

I also have managed this: jsfiddle.net/WLwxx/1 but when you hover the rest of the menu moves down a little bit — user2431709
– user2431709, Commented Jul 23, 2013 at 13:33
There are so many examples out there of a functional horizontal CSS menus - even here in SO... I just find it hard to believe that none of them helps you address your problem. — Joum
– Joum, Commented Jul 23, 2013 at 13:35

isherwood · Accepted Answer · 2013-07-23 14:26:17Z

1

http://jsfiddle.net/isherwood/WLwxx/7

.vertical-nav {
    width: 400px;
}
.vertical-nav li {
    width: 200px;
}

You'll probably have to fine-tune styles for your situation, but this resolves the primary issue, which was that you had your list items full-width.

edited Jul 23, 2013 at 14:26

answered Jul 23, 2013 at 13:46

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rafael Over a year ago

If you resize the screen, the same problem occurs.

isherwood Over a year ago

True. So you'd set a fixed width on the UL. Is this CSS 101? :-)

isherwood Over a year ago

Because the width is fixed at 400px. Add 200px for every LI.

Rafael · Accepted Answer · 2013-07-23 13:44:58Z

0

Does this put you into the right direction?

http://jsfiddle.net/nSLwm/

Source: http://www.overpie.com/css/articles/css-horizontal-fly-out-menu

<div id="menuwrapper">
    <ul>
        <li><a href="#">My awesome button</a></li>
        <li><a href="#">My awesome button</a>
            <ul>
                <li><a href="#">awesome link nº 1</a></li>
                <li><a href="#">awesome link nº 2</a></li>
                <li><a href="#">awesome link nº 3</a></li>
            </ul>
        </li>
    </ul>
</div>

You should only edit the css.

answered Jul 23, 2013 at 13:44

Rafael

8022 gold badges18 silver badges39 bronze badges

Collectives™ on Stack Overflow

Make CSS Menu horizontal

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related