Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Navlist. Cursor activates submenu when it's not supposed to.

    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

    Code:
    <!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>
    Code:
    <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>
    Attached Thumbnails Attached Thumbnails Navlist. Cursor activates submenu when it's not supposed to.-submenu.jpg  
    Last edited by AlexanderC; 07-14-2011 at 11:37 PM. Reason: took out span tags

  • #2
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    oops. i accidentally left the span tags in when I pasted the code. ignore them. i took them out and it makes no difference.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •