Creating a JQuery Drop Down Menu with divs

Question

I have been trying to fix this problem for a while. Basically I am creating a drop down menu that has divs that contain the ul's so that I can have a box with a fixed width which will allow me to have images within the box.

An example of this would be BestBuy.com's navigation menu. I really like the design, but I'm having a difficult time replicating it.

My CSS works without trouble ONLY when the li's are not links. Example: It works when it is <li>Link</li> and not <li><a href="#">Link</a></li>.

Of course inside that <li> is another list.

Anyway, I decided to use JQuery to fix the issue and I am about halfway there.

Here is my JQuery:

$(document).ready(function () {

    $(".navbar ul li").hover(function() {
        $(".navlink > div:first").addClass("active");
    }, function() {
        $(".navlink > div:first").removeClass("active");
    });

    $(".secondarylink").hover(function() {
        $(".secondarylink > div").addClass("active");
    }, function() {
        $(".secondarylink > div").removeClass("active");
    });

});

Here is my markup:

<div class="navbar">
  <ul>
    <li class="navlink"> <a href="#">Products</a>
      <div class="secondlevel">
        <ul>
          <li class="secondarylink"><a href="#">Testing 1</a>
            <div class="thirdlevel two-columns">
              <div class="column">
                <ul>
                  <li><a href="#">Testing 1</a> </li>
                  <li><a href="#">Testing 2</a> </li>
                  <li><a href="#">Testing 3</a> </li>
                  <li><a href="#">Testing 4</a> </li>
                </ul>
              </div>
              <div class="column">
                <ul>
                  <li><a href="#">Testing 1</a> </li>
                  <li><a href="#">Testing 2</a> </li>
                  <li><a href="#">Testing 3</a> </li>
                  <li><a href="#">Testing 4</a> </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="secondarylink"><a href="#">Testing 2</a>
            <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 class="navlink">Test Link</li>
  </ul>
</div>

And my styling:

body {
    font-family:sans-serif;
    background: #eee;
}
.navlink {
    display:block;
}
.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 ul li:hover > div:first-child {
    display:block;
}
*/
 .active {
    display:block;
}
.hidden {
    display:none;
}
.navbar ul li a {
    display:block;
}

Demo

As you can see, in my CSS I had .navbar ul li:hover > div:first-child { display:block;}. This works, but without the links... Someone told me to try making the <a> display:block; but that didn't work either.

All I need to do(I think) is be able to select div:first-child for this to work, but so far I haven't found anything that works. What am I doing wrong?

Any help is greatly appreciated. Thank you people!

at the moment when I hover over the first <li> it shows both <li>'s. I should make that more clear. — Ryan Cady
– Ryan Cady, Commented Mar 13, 2015 at 2:11
In the future, please use the available tools to mark your HTML so it doesn't render in the question, and take the time to properly format it. I've added a fiddle demo. Note that you were missing closing ul and div tags at the end. — isherwood
– isherwood, Commented Mar 13, 2015 at 2:13
Thank you isherwood. I'm new to stackoverflow. Sorry about that. — Ryan Cady
– Ryan Cady, Commented Mar 13, 2015 at 2:15

isherwood · Accepted Answer · 2015-03-13 02:26:37Z

1

I'm not entirely sure what you're after, but maybe this helps.

With CSS:

.navbar > ul > li:hover > .secondlevel {
    display: block;
}
.navbar .secondarylink:hover > .thirdlevel {
    display: block;
}

Demo

With jQuery:

$(".navbar ul li").hover(function () {
    $(this).find('.secondlevel').show();
}, function () {
    $(this).find('.secondlevel').hide();
});

$(".secondarylink").hover(function () {
    $(this).find('.thirdlevel').show();
}, function () {
    $(this).find('.thirdlevel').hide();
});

Demo

answered Mar 13, 2015 at 2:26

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

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

1 Comment

Ryan Cady Over a year ago

Thank you! I appreciate you showing both ways to accomplish this.

Math3w · Accepted Answer · 2015-03-13 02:25:09Z

0

It's doesn't matter with the <li>item</li> or <li><a href=#">item</a></li> as long as you have the correct script.

As I looked into your script, the action you trigger is to add 'active' class to all the second/third level.

I've updated the script and now it only add class to the second level / third level accordingly.

$(this).find().addClass();

DEMO

answered Mar 13, 2015 at 2:25

Math3w

5054 silver badges13 bronze badges

Collectives™ on Stack Overflow

Creating a JQuery Drop Down Menu with divs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related