...

View Full Version : Navlist. Cursor activates submenu when it's not supposed to.



AlexanderC
07-14-2011, 10:36 PM
Hi,

I have a dropdown submenu under "gallery" (look at the image), which is malfunctioning. The submenu drops when gallery is hovered over, but the problem is that it also drops when the space to the right of gallery is hovered over. When that happens the cursor stays as a pointer, (doesn't change to pointy finger), and drops the submenu.

I want it so the submenu drops down only when the text "gallery" is hovered over.

I'm no pro but it seems that the problem might be in the code:

li:hover ul {
display: block;
z-index: 1000;
}

I believe this says to drop the menu down when the li is hovered over, and as part of the li element there is 80 px of padding to the right (#mainlist). I've tried replacing the li in the above code with just a . I've also tried span (wrapping the link in span tags). Nothing so far. Help?

Thanks



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

#navcontainer {
background-color: #000000;
height: 55px;
padding-top: 20px;
padding-left: 60px;
}
#navlist {
margin: 0;
position: relative;
}
#navlist li
{
display: inline;
list-style-type: none;
color: #FFFFFF;
text-decoration: none;
font-family: Times, "Times New Roman", Palatino;
font-size: 24px;
width: 175px;
}
#li {
display: inline;
}
li ul {
position: absolute;
top: 170;
display:;
bottom: ;
left: 208px;
display: none;
}

li:hover ul {
display: block;
z-index: 1000;
}

#mainlist {
padding-right: 80px;
}
#submenu {
position: absolute;
top: 170;
display:;
bottom: ;
left: 208px;
width: 0px;
}
#sublist {
width: 200px;
float: left;
text-align: left;
}
#sublist1 {
float: left;
width: 170px;
height: 25px;
background-image: url(images/sublist_bkgrnd.gif);
padding-left: 7px;
background-position: top;
background-color: #262626;
background-repeat: repeat-x;
padding-top: 8px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}
#sublist2 {
background-color: #282828;
float: left;
width: 170px;
height: 25px;
padding-left: 7px;
padding-bottom: 3px;
padding-top: 2px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
border-bottom-style: solid;
border-bottom-color: #000000;
border-bottom-width: 1px;
}
a:link {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
{
</style>
</head>




<div id="navcontainer">
<div align="center">

<ul id="navlist">
<li id="mainlist"><a href="#">home</a></li>

<li id="mainlist"><a href="#">gallery</a>
<ul id="submenu">
<li id="sublist"><div id=sublist1><a href="#">black and whites</a></div></li>
<li id="sublist"><div id=sublist2><a href="#">color</a>
</div></li>
</ul>
</li>
<li id="mainlist"><a href="#">purchases</a></li>
<li id="mainlist"><a href="#">about</a></li>
<li id="mainlist"><a href="#">contact</a></li>
</ul>
</div>
</div>

AlexanderC
07-14-2011, 11:33 PM
oops. i accidentally left the span tags in when I pasted the code. ignore them. i took them out and it makes no difference.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum