CODEWITHSUNDEEP
htmlcss
raaj5671
raaj5671

Reputation: 15

Cant display menu in horizontal using html and 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: #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.

Upvotes: 0

Views: 38

Answers (1)

jmore009
jmore009

Reputation: 12923

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

Upvotes: 1

Related Questions