Full width menu JavaScript selector - javascript

Okay so here is a cut down of what I have so far JSFiddle. Hovering over 'Aviation' brings down the menu. I would like it so that when you open the menu the first menu item is already set to active but also need the current hovered selection to stay selected when they move over the the "Related Links" side of the drop down.
I know very little JS but this is what I have come up with so far to make the menu appear.
$(document).ready(function() {
$(".aviation").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$(".aviation-menu").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$("#top li").hover(function() {
$(this).addClass("active");
}, function() {
$(this).removeClass("active");
});
});
Any help would massively be appriciated thank you.

I think you can use it like below, I gave the Jsfiddle link at the bottom as well:
$(document).ready(function() {
$(".aviation").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$("li").hover(function() {
$("li").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
});
JSFIDDLE
Basically you will be removing all the "active" classes on the other list items when any of them gets hovered, so it will have one active all the time.
Edit: You can also add this $("li").first().addClass("active"); at the beginning so it will have "Home" as active by default.

You should consider the following: There is no "hovering" on mobile devices and what you're doing with JS (adding a class on hover, but actually what you want is a visual change) can be done with CSS, which is nicer in my opinion.
Here is a great example of a pure CSS dropdown menu by Phil Hoyt: http://codepen.io/philhoyt/pen/ujHzd
HTML:
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}

Related

Fixed menu item

I have a scrollable dropdown menu and I want to keep the last item fixed and always visible on top while all the other items would scroll. However, with my solution it's really jumpy. Here's what I have so far:
HTML:
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li class="fixed">Item 10</li> <!-- this item will be fixed and always on top -->
</ul>
Javascript:
this.$('.menu').on('scroll', function() {
if (stickyItem = $('.fixed')) {
//get the y position of the parent
topHeight = stickyItem.parent().offset().top;
//how far apart the sticky item should always be from the top of the bar
heightDiff = stickyItem.parent().height() - stickyItem.height();
if ((stickyItem.offset().top - topHeight) < heightDiff) {
heightApply = heightDiff + ( heightDiff - (stickyItem.offset().top - stickyItem.parent().offset().top));
stickyItem.css('top', (heightApply)+'px');
}
}
});
CSS:
ul li.fixed {
position: absolute;
bottom: 0;
}
Is there an easier way to accomplish what I'm trying to do? Thanks!
I have not tested anywhere besides chrome, but here's a pure CSS solution for your problem:
html,body{height:100%; margin:0; padding:0}
ul {margin: 0; padding:0; height:auto;
/*this padding bottom allows the penultimate element to be displayed*/
padding-bottom:39px}
ul li {padding:10px; background:#eee; color:#333;
font-family:sans-serif; border-bottom:1px solid #CCC; }
ul li.fixed { /*you could also use the :last pseudo selector*/
width:100%;
position: fixed;
bottom: 0;
background:lightblue;
}
https://jsfiddle.net/patareco/kb99u78p/1/
Hope it does what you intended.

CSS not displaying in old versions of IE

We are still using an old version of SharePoint (2007) and I have begun to try and learn how you use CSS and Content Editor WebParts (CEWPs) to adjust the way some of our lists work. I am trying to create a small row of drop downs within a web part that will have hyperlinks to sections. This is the HTML code I am using which displays correctly via Chrome:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
For some reason when I put this into a CEWP and use IE it doesn't use the CSS code at all and displays as HTML, but if I open the same page in Chrome is displays fine.
Can anyone offer any suggestions on how I can get old versions of IE to display this bit of CSS within MOSS 2007 please?

bind another element in a mouseleave function

I created a dropdown menu and below is my snippet. The problem is whenever I tried to go to the dropdown part (the one that has a class of dropdown_menu) menu after I click the link that triggered it, it will slideUp which supposedly it will not as it is also inside with the .has_dp element, any ideas? Im wondering if the best solution is to bind the .dropdown_menu element with the mouseleave event of the .has_dp so that the .dropdown_menu will only slideUp if the cursor is not over on the .has_dp and .dropdown_menu, is that possible?
$(document).ready(function(){
//main declarations
$(".thehide").hide();
//dropdown menu
$(".has_dp").click(function(){
$(".dropdown_menu", this).slideDown();
}).mouseout(function(){
$(".dropdown_menu", this).slideUp();
});
});
/* navigation */
#topnav{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topnav li{
float: left;
list-style: none;
}
#topnav li a{
display: block;
padding: 5px 8px;
color: red;
text-transform: uppercase;
}
#topnav li a span{
float: left;
display: block;
}
#topnav li a span:first-child{
margin-right: 3px;
}
#topnav li a span:last-child{
padding-top: 2px;
}
#topnav li a.active_menu, #topnav li a:active, #topnav li a:hover{
color: blue;
}
/* dropdown */
.dropdown_menu{
z-index: 999;
position: absolute;
background: #263238;
padding: 10px;
margin-top: 15px;
}
.dropdown_menu li{
clear: both;
float: none;
}
.dropdown_menu a{
clear: both;
float: none;
display: block;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav extend clear" id="topnav">
<li>Home</li>
<li class="has_dp">
<span>Company</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>Company dropdown menu 1</li>
<li>Company dropdown menu 2</li>
<li>Company dropdown menu 3</li>
<li>Company dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>HR</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>HR dropdown menu 1</li>
<li>HR dropdown menu 2</li>
<li>HR dropdown menu 3</li>
<li>HR dropdown menu 4</li>
</ul>
</li>
<li>Assets</li>
<li>Employees</li>
<li class="has_dp">
<span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>expenses dropdown menu 1</li>
<li>expenses dropdown menu 2</li>
<li>expenses dropdown menu 3</li>
<li>expenses dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>PERFORMANCE dropdown menu 1</li>
<li>PERFOMANCE dropdown menu 2</li>
<li>PERFORMANCE dropdown menu 3</li>
<li>PERFORMANCE dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>RECRUITMENT dropdown menu 1</li>
<li>RECRUITMENT dropdown menu 2</li>
<li>RECRUITMENT dropdown menu 3</li>
<li>RECRUITMENT dropdown menu 4</li>
</ul>
</li>
<li>reporting</li>
<li class="has_dp">
<span>self service</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>SELF SERVICE dropdown menu 1</li>
<li>SELF SERVICE dropdown menu 2</li>
<li>SELF SERVICE dropdown menu 3</li>
<li>SELF SERVICE dropdown menu 4</li>
</ul>
</li>
<li>timesheets</li>
<li>Timeoff</li>
<li class="has_dp">
<span>training</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>training dropdown menu 1</li>
<li>training dropdown menu 2</li>
<li>training dropdown menu 3</li>
<li>training dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>more</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>more dropdown menu 1</li>
<li>more dropdown menu 2</li>
<li>more dropdown menu 3</li>
<li>more dropdown menu 4</li>
</ul>
</li>
</ul>
The problem is the nature of mouseout event which is bubbled.
You need to use mouseleave instead of mouseout
$(document).ready(function() {
//main declarations
$(".thehide").hide();
//dropdown menu
$(".has_dp").click(function() {
$(".dropdown_menu", this).slideDown();
}).mouseleave(function() {
$(".dropdown_menu", this).slideUp();
});
});
/* navigation */
#topnav {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topnav li {
float: left;
list-style: none;
}
#topnav li a {
display: block;
padding: 5px 8px;
color: red;
text-transform: uppercase;
}
#topnav li a span {
float: left;
display: block;
}
#topnav li a span:first-child {
margin-right: 3px;
}
#topnav li a span:last-child {
padding-top: 2px;
}
#topnav li a.active_menu,
#topnav li a:active,
#topnav li a:hover {
color: blue;
}
/* dropdown */
.dropdown_menu {
z-index: 999;
position: absolute;
background: #263238;
padding: 10px;
margin-top: 15px;
}
.dropdown_menu li {
clear: both;
float: none;
}
.dropdown_menu a {
clear: both;
float: none;
display: block;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav extend clear" id="topnav">
<li>Home</li>
<li class="has_dp">
<span>Company</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>Company dropdown menu 1</li>
<li>Company dropdown menu 2</li>
<li>Company dropdown menu 3</li>
<li>Company dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>HR</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>HR dropdown menu 1</li>
<li>HR dropdown menu 2</li>
<li>HR dropdown menu 3</li>
<li>HR dropdown menu 4</li>
</ul>
</li>
<li>Assets</li>
<li>Employees</li>
<li class="has_dp">
<span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>expenses dropdown menu 1</li>
<li>expenses dropdown menu 2</li>
<li>expenses dropdown menu 3</li>
<li>expenses dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>PERFORMANCE dropdown menu 1</li>
<li>PERFOMANCE dropdown menu 2</li>
<li>PERFORMANCE dropdown menu 3</li>
<li>PERFORMANCE dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>RECRUITMENT dropdown menu 1</li>
<li>RECRUITMENT dropdown menu 2</li>
<li>RECRUITMENT dropdown menu 3</li>
<li>RECRUITMENT dropdown menu 4</li>
</ul>
</li>
<li>reporting</li>
<li class="has_dp">
<span>self service</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>SELF SERVICE dropdown menu 1</li>
<li>SELF SERVICE dropdown menu 2</li>
<li>SELF SERVICE dropdown menu 3</li>
<li>SELF SERVICE dropdown menu 4</li>
</ul>
</li>
<li>timesheets</li>
<li>Timeoff</li>
<li class="has_dp">
<span>training</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>training dropdown menu 1</li>
<li>training dropdown menu 2</li>
<li>training dropdown menu 3</li>
<li>training dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>more</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>more dropdown menu 1</li>
<li>more dropdown menu 2</li>
<li>more dropdown menu 3</li>
<li>more dropdown menu 4</li>
</ul>
</li>
</ul>

How to detect mouse is over a child element in jQuery?

I have a menu-submenu-subsubmenu construction in HTML like this:
<menu>
<li>Item 1</li>
<li><ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li><ul>
<li>Sub-subitem 1</li>
<li>Sub-subitem 2</li>
<li>Sub-subitem 3</li>
</ul>
Subitem 3</li>
<li>Subitem 4</li>
</ul>
Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
...using whit this css formating:
menu {
display: block;
width: 200px;
}
/* hide subitems */
menu li ul,
menu li ul li ul {
display: none;
position: absolute;
}
/* set up positions */
menu li ul {
left: 200px;
width: 200px;
}
menu li ul li ul {
left: 400px;
width: 200px;
}
I use this jQuery code:
$(function() {
/* hide all submenu */
$('menu').find('ul').hide();
/* show submenu on mouseenter */
$('menu li a').mouseenter(function() {
$(this).parent().children('ul').show();
}).mouseleave(function() {
$(this).parent().children('ul').hide();
});
});
How can I detect mouse is leaving the element to their child? Or how can I get the child element to stay if it's necessary?
Change your code to be like this:
$(function() {
/* hide all submenu */
$('menu').find('ul').hide();
/* show submenu on mouseenter */
// here, just select the direct child
$('menu').find('li > a, li > ul').mouseenter(function() {
var time = new Date().getTime();
$(this).parent().find('ul').show().data('showing-time', time);
}).mouseleave(function() {
var leaveTime = new Date().getTime();
var $this = $(this);
window.setTimeout(function () {
var $ul = $this.parent().find('ul');
var beginTime = $ul.data('showing-time') || 0;
if (leaveTime > beginTime) {
$this.parent().find('ul').hide().data('showing-time', 0);
}
}, 100);
});
});
Hope this helps.
update
Code updated.
I suggest just put the sub menus next to the parent menu item(here, means li > a element) to get a better result.
Here's how I would go about it. You don't need javascript at all, at least not for simple hiding/showing. But, if you want to add delays, I would strongly suggest using jquery only to add/remove appropriate css classes with a settimeout.
css:
.menu {
position: relative;
display: inline-block;
}
.submenu {
display: none;
position: absolute;
left: 100%;
}
.menu li:hover > .submenu, .submenu.show {
display: inline-block;
}
html:
<ul class="menu">
<li>Item 1</li>
<li><ul class="submenu">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li><ul class="submenu">
<li>Sub-subitem 1</li>
<li>Sub-subitem 2</li>
<li>Sub-subitem 3</li>
</ul>
Subitem 3</li>
<li>Subitem 4</li>
</ul>
Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
js:
$('body').on('mouseleave','.submenu', function(e) {
var jTarget = $(e.currentTarget).addClass('show');
setTimeout(function() {
jTarget.removeClass('show');
}, 500);
})
Check out this jsfiddle with the js delay:
http://jsfiddle.net/LxL4N/1/

Submenu disappears as soon as I reach it with a mouse

I have a menu and a submenu. I got it toggled in Jquery by combining some answers from stackoverflow and from api.jQuery. But now I am really stuck and I cant find a way out to solve it.
Whenever I reach the menu, submenu toggles(Good thing), but whenever I reach for the submenu links it disappears.
And it doesnot work in fiddle because of the styling, thats why I didnt put it there.
HTML
<ul id="menüü">
<li class="menu">
<p>Meist
</p>
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
<p>Seadmed
</p>
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
<div id="submenu"></div>
CSS
.menu {
display: inline;
float:left;
width:180px;
height:50px;
color:#191919;
text-align:center;
background:#990000;
-moz-border-radius-top-left: 50px;
border-top-left-radius: 50px;
position:relative;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:62px;
right:25%;
z-index:300
}
.submenu {
background-color:#cecece;
}
.submenu > li {
list-style-type:none;
background-color:#fff;
color:blue;
cursor:pointer;
}
#submenu {
color:white;
height:40px;
width:900px;
background:#630000;
margin-top:50px;
position:relative;
}
JS
$(document).ready(function () {
$("li.menu").mouseenter(function () {
$(this).find(".submenu").toggle();
});
});
Change mouseenter to mouseover then when you hover a child element it will not close. And use mouseover to show and mouseout to hide.
Example on jsFiddle
$(document).ready(function ()
{
$(".menu").mouseover(function ()
{
$(this).find(".submenu").show();
});
$(".menu").mouseout(function ()
{
$(this).find(".submenu").hide();
});
});
Toggling toggles between show and hide, so the first time the mouseenter event is triggered it will show and the second time it hides. You need to add a conditional statement to make sure it doesn't hide it if the mouse is over it. Better way to do it is to use mouseenter to show and mouseout to hide.
Not a perfect example by any means, but this pure css version should provide a good base to get you started?
http://jsfiddle.net/bNpnZ/2/
<ul class="menu">
<li> Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li> Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
ul {
margin:0;
list-style:none;
}
.menu {
width:100%;
float:left;
background:#eee;
}
.menu > li {
float:left;
margin:0 0 0 10px;
position:relative;
}
.menu > li:first-child {
margin:0;
}
.menu > li > a {
padding:10px 20px;
float:left;
color:#666;
}
.submenu {
position:absolute;
top:-9999em;
left:0;
font-size:14px;
background-color:#ccc;
}
.menu > li:hover .submenu {
top:30px;
}
I have update the jquery and added style for .menu a, also <p> in not required in side the li.
jQuery
$('.menu').hover(
function () {
$(this).children('.submenu').fadeIn('fast');
},
function () {
$(this).children('.submenu').fadeOut();
});
css
.menu a{
display:block;
line-height:50px;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:50px;
right:25%;
z-index:300
}
html
<ul id="menüü">
<li class="menu">
Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
jsFiddle File

Categories