CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
Ryan Cady
Ryan Cady

Reputation: 333

Using li:hover is not showing div when the list item is an anchor

I'm having an issue with my drop down menu. I am trying to have the end result look similar to BestBuy.com's navigation. The code is below along with more explanation at the end.

<div class="navbar">
<ul>
    <li>Products
        <div class="secondlevel">
            <ul>
                <li>Testing 1
                    <div class="thirdlevel two-columns">
                        <div class="column">
                            <ul>
                                <li>Testing 1</li>
                                <li>Testing 2</li>
                                <li>Testing 3</li>
                                <li>Testing 4</li>
                            </ul>
                        </div>
                        <div class="column">
                            <ul>
                                <li>Testing 1</li>
                                <li>Testing 2</li>
                                <li>Testing 3</li>
                                <li>Testing 4</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>Testing 2
                    <div class="thirdlevel">
                        <ul>
                            <li>Testing 1</li>
                            <li>Testing 2</li>
                            <li>Testing 3</li>
                            <li>Testing 4</li>
                        </ul>
                    </div>
                </li>
                <li>Testing 3</li>
                <li>Testing 4</li>
            </ul>
        </div>
    </li>
    <li>Test Link</li>
</div>

and my CSS:

body {
    font-family:sans-serif;
    background: #eee;
}

.navbar {
    background:lightblue;
    width: 100%;
    padding:0;
}

.navbar ul {
    list-style:none;
    padding:0;
    margin:0;
}

.navbar ul>li {
    display:inline-block;
}

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

.secondlevel {
    position:absolute;
    width:350px;
    height:477px;
    background:#fff;
    padding:0;
    border: 1px solid #c3c4c4;
}

.thirdlevel {
    position:absolute;
    width:350px;
    height:477px;
    background:lightgreen;
    left:350px;
    border: 1px solid #c3c4c4;
    top:-1px;
}

.thirdlevel.two-columns {
    width:700px;
}

.thirdlevel div:first-child {
    position:absolute;
    left:0;
}

.thirdlevel div {
    position:absolute;
    right:0;
}

.column {
    width:350px;
}

.thirdlevel {
    display:none;
}

.secondlevel {
    display:none;
}


.navbar li:hover > div:first-child {
    display:block;
}

.active {
    display:block;
}

The problem I'm having is that when I try to turn the list items into links with: <li><a>Products</a><li>

When I do that, hovering over the element no longer works.

Also, the hover effect doesn't work in IE either. I'm guessing that's because I'm using li:hover.

I was attempting to use jQuery for the hover effect, and I would really like to since I've read that it's better for what I need to do, but my knowledge is limited in that department.

From what I researched I could use something like this:

$(document).ready(function () {
    $(".main-nav-item").hover(function () {
        $(".secondary-menu").toggleClass("active");
        $(".tertiary-menu").toggleClass("hide");
    });
});

Of course those classes don't line up with what I have, but that's the gist of what it is. The problem I had with that was I couldn't get it to work on only one child. Hopefully that's the right word. For example: When I hovered over my first <li> it would open all of the submenus. The way it is right now is perfect, except for the fact that nothing can be a link, which is kind of important.

Let me know if you need anymore information.

Upvotes: 1

Views: 85

Answers (2)

Fuzail l&#39;Corder
Fuzail l&#39;Corder

Reputation: 90

Try Making the links in the <li><a>Link</a></li> in to block Elements 

a { display:block; }

did the trick for me

EDIT (Went Through you Problem)

Does this what you are asking for .. 

$(document).ready(function() {

  $(".main-nav-item a").hover(function() {
    $(".secondlevel").addClass("active");
    $(".thirdlevel").addClass("hide");
  });

  $(".secondlevel").hover(function() {
    $(".thirdlevel").addClass("active");
  });


});
body {

  font-family: sans-serif;

  background: #eee;

}

.navbar {

  background: #FFE;

  width: 100%;

  padding: 0;

}

.navbar ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

.navbar ul>li {

  display: inline-block;

}

.navbar ul li ul>li {

  display: block;

}

.secondlevel {

  position: absolute;

  width: 350px;

  height: 477px;

  background: #fff;

  padding: 0;

  border: 1px solid #c3c4c4;

}

.thirdlevel {

  position: absolute;

  width: 350px;

  height: 477px;

  background: #AABC34;

  left: 350px;

  border: 1px solid #c3c4c4;

  top: -1px;

}

.thirdlevel.two-columns {

  width: 700px;

}

.thirdlevel div:first-child {

  position: absolute;

  left: 0;

}

.thirdlevel div {

  position: absolute;

  right: 0;

}

.column {

  width: 350px;

}

.thirdlevel {

  display: none;

}

.secondlevel {

  display: none;

}

.navbar li:hover > div:first-child {

  display: block;

}

.active {

  display: block;

}

a {

  display: block;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <ul>
    <li class="main-nav-item">
      <a href="#">Products</a>
      <div class="secondlevel">
        <ul>
          <li>
            <a href="#">Testing 1</a>
            <div class="thirdlevel two-columns">
              <div class="column">
                <ul>
                  <li>Testing 1
                  </li>
                  <li>Testing 2
                  </li>
                  <li>Testing 3
                  </li>
                  <li>Testing 4
                  </li>
                </ul>
              </div>
              <div class="column">
                <ul>
                  <li>Testing 1
                  </li>
                  <li>Testing 2
                  </li>
                  <li>Testing 3
                  </li>
                  <li>Testing 4
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>Testing 2
            <div class="thirdlevel">
              <ul>
                <li>Testing 1
                </li>
                <li>Testing 2
                </li>
                <li>Testing 3
                </li>
                <li>Testing 4
                </li>
              </ul>
            </div>
          </li>
          <li>Testing 3
          </li>
          <li>Testing 4
          </li>
        </ul>
      </div>
    </li>
    <li>Test Link
    </li>
  </ul>
</div>

Upvotes: 1

user3047736
user3047736

Reputation:

Have your tried <a href=""><li>EXAMPLE</li></a>? As for the IE side of things, I would recommend using IE specific styling or if you haven't already, used CSS Reset, for a start. Do you have a working example?

Upvotes: 0

Related Questions