Why my CSS hover selector is not working?

Question

I have this ul

<li><a href="../FrontEnd/Home.aspx"><img alt="" class="-logo" src="../assets/images/Logo@2x.png" /></a></li>
<li class="nav-item" id="mainPage"><a class="btn nav-link active" href="../FrontEnd/home.aspx">
الرئيسية
</a></li>
<li class="nav-item history" id="history">
عن الأتحاد
<ul class="dropdown" id="hidden">
    <li><a href="../FrontEnd/chairman.aspx"> كلمة رئيس الأتحاد</a></li>
    <li><a href="../FrontEnd/Organaizors.aspx">الأعضاء</a></li>
    <li><a href="../FrontEnd/History.aspx">تاريخ التأسيس</a></li>
</ul>
</li>
<li class="nav-item mission" id="mission"><a href="../FrontEnd/Mission.aspx">الهدف والرؤية</a></li>
<li class="nav-item " id="news"><a href="../FrontEnd/news.aspx">الأخبار</a></li>
<li class="nav-item gallery" id="album"><a href="../FrontEnd/gallery.aspx">معرض الصور</a></li>
<li class="nav-item videos" id="video"><a href="../FrontEnd/videos">الفيديو</a></li>

now I want on history over to show the hidden menue ?

so I did

  #history:hover #hidden {
              display:block;
              background:#ffffff;
        }

it is working ok.

However if I move

<ul class="dropdown" id="hidden">
    <li><a href="../FrontEnd/chairman.aspx"> كلمة رئيس الأتحاد</a></li>
    <li><a href="../FrontEnd/Organaizors.aspx">الأعضاء</a></li>
    <li><a href="../FrontEnd/History.aspx">تاريخ التأسيس</a></li>
</ul>

outside the li ?

it stopped working ?

So I tried the js soultion

  $('#history').mouseenter(function () {
                $("#hidden").fadeIn();
                $("#hidden").fadeIn("fast");
                $("#hidden").show();
            })
        $('#history').mouseout(function () {
                $("#hidden").hide();
            });

Here is jsfiddle

https://jsfiddle.net/mohammadjouharighsom/8v6na0fx/2/

Any reason ?

A space in a selector is the descendant combinator. Read the [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). `#history:hover #hidden` should always be equivalent to `#hidden`, as IDs must be unique. — Sebastian Simon, Jan 12 '21 at 05:42

score 1 · Answer 1 · answered Jan 12 '21 at 05:58

1

However if I move [inner ul] outside the li ... it stopped working

The reason this stopped working is because your CSS rule's selector no longer applied.

#history:hover #hidden

The space between #history:hover and #hidden translates to "select the element with ID 'hidden' that is anywhere WITHIN #history."

Your hidden menu is within an element with the ID history. Hence when you move your menu out of it, the rule no longer applies.

The reason your JavaScript solution would work is because you only select one element at a time.

If you intend to place the inner list, you will need to change your selector to a sibling selector. However, you didn't provide any reason why you would want to move the inner menu out. In fact, your HTML reflects the most commonly used structure of a hierarchical menu.

answered Jan 12 '21 at 05:58

Hubert Grzeskowiak

15,137
5
57
74

so what is the solution boss ? – user123456 Jan 12 '21 at 06:00
@user123456 This really depends on how your final HTML looks like. Also, you didn't quite specify why you want to move the inner list out of the main menu list. – Hubert Grzeskowiak Jan 13 '21 at 23:56
i am trying to make submenue if I put the inner ul inside the li the li width will get begger like the inner one. – user123456 Jan 14 '21 at 00:11
1

@user123456 What you describe sounds like a styling issue, which is a different question from the one you asked here. I suggest you create a new question with the final HTML, your CSS, relevant JS and ask how to make the menus aligned in width. – Hubert Grzeskowiak Jan 14 '21 at 03:39

Nishant S Vispute · Answer 2 · 2021-01-12T06:27:22.527

0

if you try to read the css class rule, that will give you the answer as to why it does not work when you move it outside the li

It reads something like this

#history:hover #hidden{} --> "#hidden child inside #histroy when you :hover"

If you want to keep it outside the li then i think the js is the right way to go

The Css way to achive this is :

Option 1. If the hidden tag is next to the history tag use this

#history:hover + #hidden {...}

Option 2. if the hidden tag is directly inside the history tag use this

 #history:hover > #hidden {...}

Option 3. if the hidden tag is somewhere inside the history tag use this

 #history:hover  #hidden {...}

Option 4. if the hidden tag is a sibling of the history tag use this

#history:hover ~ #hidden {...}

There are other more complex selectors also however i think apart from these 4 use case rest we should use js to manipulate the DOM elements.

edited Jan 12 '21 at 06:27

answered Jan 12 '21 at 05:49

Nishant S Vispute

713
1
7
21

no way to achive this in css outside li – user123456 Jan 12 '21 at 05:52
Edited my above answer on how can it be achived using css – Nishant S Vispute Jan 12 '21 at 05:54
The Solution for Your question is written inside my answer.. Please Upvote if you found it worked – Nishant S Vispute Jan 12 '21 at 06:06
#history:hover + #hidden {...} this one not working – user123456 Jan 12 '21 at 06:10
Option 5. if the hidden tag is somewhere outside the history tag use this @nishant – user123456 Jan 14 '21 at 09:00

Why my CSS hover selector is not working?

2 Answers2

Linked