CODEWITHSUNDEEP
htmlcssdisplaymousehover
I.Nikolaew
I.Nikolaew

Reputation: 48

How to change CSS with ':hover'

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 ?

Upvotes: 0

Views: 74

Answers (4)

Tristan de Jager
Tristan de Jager

Reputation: 115

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

I guess you mean this

EDIT: @David Hedlund You were faster

Upvotes: 2

Mike Trinh
Mike Trinh

Reputation: 1303

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.)

Upvotes: 0

Novice
Novice

Reputation: 558

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.

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129792

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.

Upvotes: 2

Related Questions