How to change CSS with ':hover'

Question

HTML code

.navbar li {
  color: #B7B7B7;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  min-width: 70px;
  padding: 22px 16px 18px;
}
.navbar #menumain ul {
  width: 120%;
}
.navbar ul ul {
  display: none;
}

<div class="navbar">
  <li id="menumain">
    Menu1main
    <ul>
      <a href="/">
        <li>Menu2</li>
      </a>
    </ul>
  </li>
</div>

How to change display:none in navbar ul ul to display:block with :hover How to change display:none in navbar ul ul to display:block with :hover ?

can you add your code to jsfiddle?

Elyor
– Elyor

2016-10-04 06:44:32 +00:00
Commented Oct 4, 2016 at 6:44 — Elyor
– Elyor, Commented Oct 4, 2016 at 6:44
Li elements must be child of ul/ol, not div

Marcos Pérez Gude
– Marcos Pérez Gude

2016-10-04 06:47:17 +00:00
Commented Oct 4, 2016 at 6:47 — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Oct 4, 2016 at 6:47

David Hedlund · Accepted Answer · 2016-10-04 06:37:58Z

2

I'm guessing what you're asking for is something like this:

.navbar li:hover ul {
    display: block;
}

But your code is not clear. You currently have .navbar ul ul in your selector, but you don't have two nested uls anywhere in your markup.

answered Oct 4, 2016 at 6:37

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tristan de Jager · Accepted Answer · 2016-10-04 07:07:33Z

2

.navbar li:hover ul {
    display: block;
}

I guess you mean this

EDIT: @David Hedlund You were faster

edited Oct 4, 2016 at 7:07

answered Oct 4, 2016 at 6:45

Tristan de Jager

1151 silver badge13 bronze badges

Comments

Novice · Accepted Answer · 2016-10-04 06:50:15Z

0

You may try writing the :hover with your div class.

.navbar li:hover ul {
    display: block;
}

According to your HTML code, you do not have 2 ul instead 1 li and 1 ul. Ideally it should be ul first and then li in HTML code.

answered Oct 4, 2016 at 6:50

Novice

5582 gold badges9 silver badges21 bronze badges

Comments

Mike Trinh · Accepted Answer · 2016-10-04 07:05:36Z

0

You are doing wrong man. a>li is a bad practice. you need to do li>a

.navbar > li > ul { display: none; }
.navbar > li:hover > ul { display: block; }

<div class="navbar">
  <li id="menumain">
    Menu1main
    <ul>
      <li><a href="/">item1</a></li>
      <li><a href="/">item2</a></li>
    </ul>
  </li>
</div>

Remember HTML W3C Validator Error: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

answered Oct 4, 2016 at 7:05

Mike Trinh

1,3032 gold badges10 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to change CSS with ':hover'

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related