CODEWITHSUNDEEP
htmlcss
Thomas
Thomas

Reputation: 829

Is a ul allowed inslide an inline li in html or xhtml?

Note the li with child ul is display:inline - code example as follows

<style type="text/css">
ul.nav_main li { display: inline }
ul.nav_submenu li { display: block }
</style>

<ul class="nav_main">
    <li>Item 1
        <ul class="nav_submenu">
            <li>Option 1</li>
            <li>Option 2</li>
        </ul>
    </li>
</ul>

Upvotes: 0

Views: 69

Answers (3)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174967

CSS does not affect validity of HTML source. It may however cause unpredictable results, as the browser try their best to place a UL inside of an inline element (even though it's valid!)

Any way, you're always welcome to check it yourself

Upvotes: 2

Elvis D&#39;Souza
Elvis D&#39;Souza

Reputation: 2313

Nesting of <ul> is allowed in CSS

If you are trying to get horizontal nav-main with vertical nav_submenu, you should have display: inline-block for ul.nav-main > li

<style>
    ul.nav_main li { display: inline-block }
    ul.nav_submenu li { display: block }
</style>

<ul class="nav_main">
    <li>Item 1
        <ul class="nav_submenu">
            <li>Option 1.1</li>
            <li>Option 1.2</li>
        </ul>
    </li>
    <li>Item 2
        <ul class="nav_submenu">
            <li>Option 2.1</li>
            <li>Option 2.2</li>
        </ul>
    </li>
</ul>

Tested in Firefox 11 and Chrome 17 on Linux

Upvotes: 0

Didatus
Didatus

Reputation: 900

I see no problems with XHTML 1.0. If you want to check, you can use the W3C Validator: http://validator.w3.org/check

Therefor you need a dummy page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css" media="all">
ul.nav_main li { display: inline }
</style>
</head>
<body>
<ul class="nav_main">
    <li>Item 1
        <ul class="nav_submenu">
            <li>Option 1</li>
            <li>Option 2</li>
        </ul>
    </li>
</ul>
</body>
</html>

No errors on W3C Validator

Upvotes: 1

Related Questions