Cant display menu in horizontal using html and css

Question

.navigation {
padding: 0;
margin: 0;
background: #333;
position: fixed;
top: 0;
z-index: 999;
width: 100%;

li {
    display: inline-block;
    padding: 5px 10px;

    a { 
        color: #e1e1e1;
        text-decoration: none;

        &:hover{
            color: lighten(#e1e1e1, 20%);

        }
    }
}

i am trying to create a menu bar which is in horizontal format. i have already tried using display: inline-block but still i am having problem with it. I even tried using display: inline but it seems its not solving. can anyone help me to solve this.

Provide your code with html or jsfiddle or telepathic gift, please — souslov
– souslov, Commented Apr 15, 2014 at 15:32

jmore009 · Accepted Answer · 2014-04-15 15:43:56Z

1

are you writing this in scss? I'm guessing your nesting is off because it works fine in regular css:

.navigation {
  padding: 0;
  margin: 0;
  background: #333;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}

li {
  display: inline-block;
  padding: 5px 10px;
}

a { 
  color: #FFF;
  text-decoration: none;
}

a:hover{
   color: lighten(#e1e1e1, 20%);
}

FIDDLE

looks like you're missing the last } that would close .navigation. Try that UPDATE: thats the answer: NEW FIDDLE

edited Apr 15, 2014 at 15:43

answered Apr 15, 2014 at 15:34

jmore009

12.9k1 gold badge21 silver badges34 bronze badges

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

3 Comments

King King Over a year ago

It's true that the OP missed the } closing the declaration for .navigation. His fiddle does also not have the language (which can be chosen on the left sidebar) set to SCSS (the default is CSS).

jmore009 Over a year ago

didnt even realize you could switch to scss in jsfiddle, thanks for the tip

jmore009 Over a year ago

@user3536613 no problem. Just mark this as correct for future use

Collectives™ on Stack Overflow

Cant display menu in horizontal using html and css

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related