CODEWITHSUNDEEP
css
Johnsy
Johnsy

Reputation: 1463

Why does omitting this "li" CSS selector affect the applied style?

The code goes like this,

<style type="text/css">
#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; 
position:relative;}


li, li a {color:#000; text-decoration:none;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; 
border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
#nav li ul.first {left:-1px; top:100%;}
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; }
li:hover { position:relative; z-index:2000; }
</style>
</head>

<body>
<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li><a href="#">Menu 1</a></li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        </ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>


</body>

On the third element at the "li, li a" part, If I remove the "li" selector leaving only the "li a", what happens is, when I hover at my first level list items, the second list items appear, but the text doesn't, I don't know if it's a background influence, or a text influence, because I can't find what influences my 2nd level lists!

Oh and by the way, the first menu called "Menu 1" under the first level list item, is visible, I think its because of the "li a" selector, but as for the part where that I deleted, I don't know how it works, can someone tell me what's causing this trouble when I delete it?

Upvotes: 0

Views: 128

Answers (2)

Mr_Green
Mr_Green

Reputation: 41832

You are applying a tag only to the first sub item of "Menu 1". and you are giving text color as white(#FFF) by the following code:

#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }

Thats why the text is not being visible because the background is also white. but when you hovering on the li's, the text is being visible because you are changing the background color to black by doing the following.

li,li a {color:#000; text-decoration:none;} //assigning text color of li as black

If you remove li from the above code then the text color inside the li elements will remain white color as you mentioned in the very above code.

Upvotes: 1

Michael
Michael

Reputation: 7092

The line li, li a means that the styles are being applied to all LI's and all A's contained inside LI's.

All your styling is being applied relatively. Meaning anything applied to li, li a is going to affect every LI and ever A nested inside an LI that is present. Regardless of whether it is a parent, or a child menu.

Since .nav is a class applied to the sub-menu, you can target the li's there by including .nav in your selector. For example: #nav .nav li a

To hide your submenu you need simply:

#nav li ul.nav { display: none; }

Then to make it appear on hover (presuming this is what you want)

#nav li:hover ul.nav { display: block; }

Have I answered all questions?

Upvotes: 0

Related Questions