CSS - Navigation Links Side Menu - css

Question

I have a links navigation that drops down on hover (which works fine) then slides right on hover of the li ul li element.
HTML:
<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>
<ul class="dropdown">
<li>Who are we?
<ul>
<li>Meet the team</li>
</ul>
</li>
<li>Why use us?
<ul>
<li>Health & Safety Policy</li>
</ul>
</li>
<li>Our commitment to the environment
<ul>
<li>Environmental Policy</li>
</ul>
</li>
</ul>
</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>Online Booking
<ul class="dropdown">
<li>Cash Booking</li>
<li>Account Booking</li>
<li>Credit Card Booking
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li><a class="link" href="#!">Contact Details</a></li>
</ul>
</div>
</div>
The JSFiddle link: http://jsfiddle.net/mrnaysilva/3Ucd4/
I believe the problem is here (but I may be wrong):-
#main-links-content ul ul ul {
left: 100%;
position: absolute;
top: 80px;
width: 180px;
max-width: 200px;
}
Basically I have set a width and top position. What I want to happen is that the width is set to auto, but when I set this to auto it doesn't set a width according to the paragraph text that's inside it. Also, because I have set a top position, it is always displaying the side menu on the bottom li, where as I want this to display to the right of the li element that is hovered.
i.e. If I hover over About Us and then hover over Who are we?.. Meet the team should display to the right of Who are we?.
I'm just unsure how I can achieve this.

Answer 1

The problem
The main problem that isn't working is the position: relative; of the sub <li> elements.
This is because you use display: table-row;
As stated in the specs:
The effect of 'position:relative' on table-row-group,
table-header-group, table-footer-group, table-row, table-column-group,
table-column, table-cell, and table-caption elements is undefined.
source: http://www.w3.org/TR/CSS2/visuren.html#propdef-position
How to solve this?
Well you can just use an element inside the table-row that will have the position: relative; property:
<li>
<div class="dropdownWrap">
Our commitment to the environment
<ul>
<li>
Environmental Policy
</li>
</ul>
</div>
</li>
Where the css of the .dopdownWrap is:
.dropdownWrap
{
width: 100%;
height: 100%;
position: relative;
}
jsFiddle
Note that i only did this with the "About us" tab.
Some notes about the javascript
You can just find the direct child element with the > selector. This way you don't have to exclude elements with the .not() function. More info here
Instead of defining .slideUp() and .slideDown() seperately, you can define them in one line ( this is because your speed of the animation is the same) with slideToggle.
Some notes about the css + html
If you're assigning classes and IDs to your elements you might as well use them in your css. For example: you never call the class .dropdown in your css. There are more of these IDs and classes that are never used.
Hope this helped you!
Edit
The jQuery UI function slide will function as this, because it will only play the mouseout function when the mousein function has completed. Normally you could cancel the previous animation with .stop(). But seems that jQuery UI slide doesn't support this. So i suggest you to just use plain jQuery for this:
$("#main-links-content li ul li").hover(function () {
$(this).find(' > div > ul').stop(true).animate({left: "100%"}, 300)
}, function () {
$(this).find(' > div > ul').stop(true).animate({left: ""}, 300);
});
Here a great article for this: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
I also added the .stop() function to the dropdown menu to fix any delay bugs.
jsFiddle
You may want to look at css transition, as it basically acts the same as you did now.
Here an css transition example: jsFiddle
The first slideToggle is not done in css as it easier and 'better' in jQuery(With css there wouldn't be a dynamic height, which would result in delay in animation).