CODEWITHSUNDEEP
htmlcss
Nilzone-
Nilzone-

Reputation: 2786

CSS display:inline have no effect

HTML:

<!-- MENU -->
        <nav id="menu">
            <li><a href="#">Categories 1</a>
                <ul>
                    <li><a href="#">temp1</a></li>
                    <li><a href="#">temp2</a></li>
                    <li><a href="#">temp3</a></li>
                </ul>
            </li>
            <li><a href="#"<Categories 2</a>
                <ul>
                    <li><a href="#">temp1</a></li>
                    <li><a href="#">temp2</a></li>
                    <li><a href="#">temp3</a></li>
                </ul>
            </li>
        </nav>

CSS:

#menu {
  background-color: #0000FF;
  height: 20px;
  padding: 15px 0 10px;
  margin-bottom: 20px;
  font: 12px 'DroidSansBold', Tahoma,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 3px 2px 3px #000;
  border-radius: 5px;
  text-align: center;
} 

#menu li{
  display: inline;
}

#menu li a {
  color: #fff;
  text-decoration: none;
  margin: 0 120px;
}

#menu li ul li{
  display: none;
}

#menu li a:hover{
  color: #dc692e;
}

The result looks like this:enter image description here

I can't seem to figure out why my two categories won't accept css display: inline. I have an menu under each of the categories that currently is not displayed. When I remove the 'under-menu', display:inline works.

Not working JsFiddle: http://jsfiddle.net/LynwV/

Thank for all help!

Upvotes: 0

Views: 487

Answers (4)

Chinthaka Dharmasiri
Chinthaka Dharmasiri

Reputation: 780

The issue I see is, you have wrapped the list defined by <ul> tags by an another <li> tag which seems to hide the list of items.

Try the inspect element for support as well.

Upvotes: 0

Adam Simpson
Adam Simpson

Reputation: 3681

@claustrofob is right, inline-block is the solution. However, @Zenith is also correct. You need to fix your markup. I would also change how your writing your styles, instead of long element selector chains, put a class on the element you want to target and style it that way.

Upvotes: 3

painotpi
painotpi

Reputation: 6996

Try,

#menu li{
    display: inline-block;
}

You have invalid markup, as pointed out by @Zenith, and some broken syntax as pointed out by @Josefffs

Test Link

Upvotes: 1

JOSEFtw
JOSEFtw

Reputation: 10071

Your a tag is wrong. <li><a href="#"<Categories 2</a> should be <li><a href="#">Categories 2</a>. And, as @Zenith said, you can't have a nav followed directly by a LI element.

Upvotes: 1

Related Questions