jQuery/CSS - Navigation Links Side Menu

Question

I have a horizontal navigation menu, when you hover over 'Online Booking' it drops down a menu with further options. When I hover over the dropdown option 'Credit Card' I want the menu to appear to the side (left: 100%).

The HTML is as follows:-

<div id="main-links">

    <div id="main-links-content">

        <ul class="topnav">

            <li><a class="link active" href="index.php">Aberdeen Taxis</a></li>
            <li><a class="link" href="#!">About Us</a></li>
            <li><a class="link" href="#!">Our Services</a></li>
            <li><a class="link" href="#!">Our Tours</a></li>
            <li><a class="link" href="#!">Our Fares</a></li>
            <li><a href="#">Online Booking</a>
                <ul class="dropdown">
                    <li><a href="onlinebooking-ab/login-cash.php">Cash Booking</a></li>
                    <li><a href="onlinebooking-ab/login.php">Account Booking</a></li>
                    <li><a href="onlinebooking-ab/login-guest.php">Credit Card Booking</a>
                        <ul class"sidedrop">
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                        </ul>

                    </li>
                </ul>
            </li>
            <li><a class="link" href="#!">Contact Details</a></li>
        </ul>

    </div>

</div>

View full JS fiddle here: http://jsfiddle.net/mrnaysilva/7A5qe/

What I believe is happening at the moment is that when I hover over the 'Credit Card' option, it's taking effect of the initial drop down when I hover over 'Online Booking' - which I don't want to happen.

Any ideas on how I can fix this? stuck

Legionar · Accepted Answer · 2013-11-15 12:41:38Z

2

So.. you have to change this css:

#main-links-content .topnav li {
  margin-left:0px !important;
  /*padding-left: 10px;*/
  padding-right: 5px !important;
  border-left: 1px solid #474747;
  display: table-row;
}

#main-links-content ul ul ul {
  left: 100%;
  position: absolute;
  top: 80px;
  /*display: inline;*/
}

Here it is working...

edited Nov 15, 2013 at 12:41

answered Nov 15, 2013 at 12:11

Legionar

7,5993 gold badges45 silver badges71 bronze badges

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

4 Comments

nsilva Over a year ago

This is still appearing to the left? I would like the dropdown when you hover over 'Online Booking' to drop down as it does, but then when you hover over 'Credit Card', it 'slides Right'. It seems the dropdown is taking effect of all children ul elements, when I only want this to take effect of the first ul child. I'm just not sure how to resolve this. @Legionar

nsilva Over a year ago

@Legionar - what do you mean by that?

nsilva Over a year ago

Amazing, thank you. I've also added $(this).children("ul").not("ul ul ul").slideDown(300); to the second drop down, so now I can change 'slideDown' and make a 'Slide Right' animation @Legionar

nsilva Over a year ago

Just to add, the slide left or right was achieved by doing: $(this).children("ul").toggle("slide", { direction: "left" }, 300);

Leonardo Barbosa · Accepted Answer · 2013-11-15 12:17:25Z

1

You have to change your dropdown style:

#main-links-content ul ul ul {
  left: 100%;
  position: absolute;
  top: 0;
  /*display: inline;*/
}

Here is a working JSFiddle that I show this behavior applied.

answered Nov 15, 2013 at 12:17

Leonardo Barbosa

1,4049 silver badges15 bronze badges

1 Comment

nsilva Over a year ago

Hovering over 'Online Booking' I would like to have 'dropdown', but hovering over 'Credit Card' I would like to animate right. It seems the dropdown effect is taking effect for both animations which is not what I am wanting to do (and have no idea how to fix) @Leonardo R

Collectives™ on Stack Overflow

jQuery/CSS - Navigation Links Side Menu

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related