toolmania1
New Member
First issue:
I am using jquery and css for my drop downs. They work nicely except for one thing. I have a "Home" link. Under this "Home" link are some test links that do nothing for now ( I will make them real later after I get this last thing working ). Anyways, when I hover over the "Home" link, the drop down is displayed under it. If I move away from the "Home" link without moving my mouse over top of the drop down, the drop down never disappears since I never entered it. I have a 'hover' tag in my css for when the user does hover over the drop down. I will post the bulk of the code for this and see what you think:
html file:
( jquery part )
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function(){
$('.dropdown').mouseenter(function(){
$('.sublinks').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({ position:'absolute',top: 20+'px',zIndex:1000,background:'white',left:0+'px', width:100+'px' });
submenu.stop().slideDown(300);
submenu.mouseleave(function(){ $(this).slideUp(300); }); }); });
</script>
( my "Home" link with drop down )
<ul>
<li><a href="./leetoniaIndex.html" class="dropdown" id="liBorder">Home</a></li>
<li class="sublinks">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</li>
</ul><!--First Menu End -->
</div>
Now, in the css file:
ul
{
list-style:none;
padding:0px;
margin:0px;
}
ul li
{
display:inline;
float:left;
}
ul li a
{
text-decoration:none;
display:block;
}
ul li a:hover
{
text-decoration:none;
display:block;
}
ul li.sublinks a
{
text-decoration:none;
display:block;
border-style:solid;
border-width:1px;
}
ul li.sublinks a:hover
{
color:white;
background-color:blue;
}
ul li.sublinks
{
display:none;
}
Second issue:
I also would like the "Home" link to stay in its hover state while I have the mouse over any of the links in the drop down. The "Home" link will act as if the mouse has left the link. So, the "Home" link starts underlined, the underline is removed when I hover over the "Home" link, and then the underline returns when I hover over any of the links in the drop down. The "Home" link is not part of the class "sublinks" and I know this. I know this is why it is not behaving the same. But, for the jquery to work, I need the "Home" to be its own entity. So, maybe there is not way to have it stay in the non-underlined state while I am hovering over any of the links in the drop down.
I am using jquery and css for my drop downs. They work nicely except for one thing. I have a "Home" link. Under this "Home" link are some test links that do nothing for now ( I will make them real later after I get this last thing working ). Anyways, when I hover over the "Home" link, the drop down is displayed under it. If I move away from the "Home" link without moving my mouse over top of the drop down, the drop down never disappears since I never entered it. I have a 'hover' tag in my css for when the user does hover over the drop down. I will post the bulk of the code for this and see what you think:
html file:
( jquery part )
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function(){
$('.dropdown').mouseenter(function(){
$('.sublinks').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({ position:'absolute',top: 20+'px',zIndex:1000,background:'white',left:0+'px', width:100+'px' });
submenu.stop().slideDown(300);
submenu.mouseleave(function(){ $(this).slideUp(300); }); }); });
</script>
( my "Home" link with drop down )
<ul>
<li><a href="./leetoniaIndex.html" class="dropdown" id="liBorder">Home</a></li>
<li class="sublinks">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</li>
</ul><!--First Menu End -->
</div>
Now, in the css file:
ul
{
list-style:none;
padding:0px;
margin:0px;
}
ul li
{
display:inline;
float:left;
}
ul li a
{
text-decoration:none;
display:block;
}
ul li a:hover
{
text-decoration:none;
display:block;
}
ul li.sublinks a
{
text-decoration:none;
display:block;
border-style:solid;
border-width:1px;
}
ul li.sublinks a:hover
{
color:white;
background-color:blue;
}
ul li.sublinks
{
display:none;
}
Second issue:
I also would like the "Home" link to stay in its hover state while I have the mouse over any of the links in the drop down. The "Home" link will act as if the mouse has left the link. So, the "Home" link starts underlined, the underline is removed when I hover over the "Home" link, and then the underline returns when I hover over any of the links in the drop down. The "Home" link is not part of the class "sublinks" and I know this. I know this is why it is not behaving the same. But, for the jquery to work, I need the "Home" to be its own entity. So, maybe there is not way to have it stay in the non-underlined state while I am hovering over any of the links in the drop down.
