SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Touchy Drop Down Menu

    I have drop down (left actually) menu, but it's difficult to stay on the sub menu. It disappears quickly....is there some way to correct this?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes there is a way to get it staying .

    We can do nothing without a link to your page though (or at the very minimal, HTML and CSS to replicate the issue). If you also wanted (or only want) a script which slows down the time until the menu disappears, there is hope. Take a look at some Jquery scripts. I know Superfish has that feature in it, in particular .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You have to make sure that the dropdown part of the menu stays in contact with the trigger element. If you have moved the dropdown too far away from the trigger element then the focus is lost and the menu disappears before you can get to it.

    Also in older versions of IE if you have vertical margins between the list items in the menu then the drop down will also disappear as you pass over these gaps unless you have set a background colour to the ul dropdown.

    Set a background colour to your trigger area (usually the parent list) and then you can see if the dropdown is in contact and not placed too far away.

    If the dropdown falls over flash, or a js slideshow, or elements with higher z-index then the dropdown will also disappear so you need to control the z-index of the parent of the list to be higher than the content undernearh (only positioned elements can have a z-index so if non positioned then add position:relative and then the z-index can be applied). If the dropdown is over flash then you need to set the flash to wmode="opaque" (google wmode="opaque") before z-index will apply.

  4. #4
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is what I have..

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    
    
    <head>
    <meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting, coins, coinhunting, relics, prospecting, search, treasure, White's, Garrett, Minelab, 
    searchcoil, Western and Eastern, Recovery, Research">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Stout Standards</title>
    
    <link rel="shortcut icon" href="favicon.ico">
    
    
    
    
    <link rel="stylesheet" href="styles.css" type="text/css"/>
    
    <style type="text/css">
    
    img {
    border: solid white;
    }
    
    body {
        background: black; 
        font-size:100%;
        margin:0;
        padding:0;
       
    }
    #container {
        width: 95%;
        min-width:990px;/*keep BG color from stopping short*/
        background: black;/*header BG color moved to here*/
    }
    
    #header {
        width: 990px;
        text-align: center;
        margin:0 auto;/*center it up in the container div*/
        padding: 100px 0;
        color:#000;
    }
    #header:after { /*contain header floats and allow dropdowns to overflow past header bottom*/
        clear:both;
        content:"";
        display:block;
        height: 0;
        font-size:0;
    }
    #header img {
        float:right;
        border:4px solid 000;
    }
    #sidebar {
        width: 12em;
    
        font-size:40px;
    }
    #MainContent {
        background: #FFA07A;
        margin-left:5em;
        margin-right:5em;
       padding:10px 20px 0 1em;
    }
    
    /*=== Begin Nav Styles ===*/
    #nav, #nav ul {
        float:left;
        width:176px;/*180px total with 2px borders*/
        margin:0;
        padding:0;
        list-style:none;
        background: #D2B48C;/*for testing only, remove when done*/
        border:2px solid #000;
    }
    #nav li {
        position:relative;/* set containing block for AP sub ul */
        float:left;/*kill IE whitespace bug*/
        width:166px;
        height: 47.5px;
        text-align:center;/*center the text*/
    }
    #nav li a {
        display:block;/*use block instead of float for IE6 */
        width:100%;/*IE needs a width*/
        /*height:3em; remove height to allow text to wrap*/
        padding:.65em 0;/*set padding on top and bottom to create more height*/
        text-decoration:underline;
        color: #000;
        font-weight:bold;
        font-size:1em;
    }
    /* --- Text and Bg colors on hover ---*/
    #nav li:hover,
    #nav li.sfhover { 
        background:#333;
        visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
    }
    #nav li:hover a,
    #nav li.sfhover a {color:#FFF}
    
    #nav li:hover li a,
    #nav li.sfhover li a {color:#000}
    
    #nav li li:hover a,
    #nav li li.sfhover a {background:#333; color:#FFF}
    
    /* ------ Sub UL Drop Down ------ */
    #nav ul {
        position:absolute;
        width:176px;
        left:176px;
        top:-2px;/*recover top border (use "0" without borders)*/
        margin-left:-999em;/* hide the sub ul */
        background: #F5DEB3;/* IE needs some sort of BG on the nested ul */
    }
    #nav li:hover ul,
    #nav li.sfhover ul {
        margin-left:0;/* reveal the sub ul on li:hover */
    }
    
    /*=== Begin Footer ===*/
    #footer {
        width:100%;
        clear:both;
    }
    #footer p {
        margin:0;
        padding:10px 0;
        background:#DDD;
        text-align:center;
        font-size:1em;
    }
    .clearfloat {
        clear:both;
        height:0;
        font-size:0;
    }
    
    
    
    
    
    
    </style>
    
    <!--[if IE 6]>
    <script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    
    
    
    
    
    
    
    
    </head>
    <body>
    <center<font color="red">Galleries</center>
    
    
    <div id="container">
        <div id="header">
            <ul id="nav">
                <li><a href="Bio2.html">Artist Bio</a></li>
    	    
    	
               
    	    <li><a href="Equip.html">Equipment</a>
                   
                <li><a href="Nature.html">Travel &raquo;</a>
                    <ul>
                        <li><a href="Travel.html">Texas</a></li>
                      <li><a href="Travel.html">Louisiana</a></li>
    		    <li><a href="Bill.html">Mexico</a></li>
                        <li><a href="Oldfolks.html">Arkansas</a></li>		
                        <li><a href="Bill.html">France</a></li> 
                        <li><a href="Bill.html">Other</a></li> 
                        
                       
                </li>
                
                  <li><a href="Travel.html">Nature &raquo;</a>
                  <ul>
    		    <li><a href="Bill.html">Flowers</a></li>
                        <li><a href="Oldfolks.html">Butterflies</a></li>		
                        <li><a href="Bill.html">Birds</a></li> 
                        <li><a href="Bill.html">Wildlife</a></li> 
                        <li><a href="Bill.html">Insects</a></li> 
                       
                </li>
                
                     
                
                
                
                
                
                
                
                
                
                
                <li><a href="Food.html">Food</a></li>
                
                <li><a href="Portraits.html">Portraits</a></li>
                <li><a href="Coinhunting.html">Black & White</a></li>                
                <li><a href="clubs.html">Abstract</a></li>
    	    <li><a href="clubs.html">World Today</a></li>
    	    <li><a href="inthefield.html">In The Field</a></li>
    	    
    	     <li><a href="ending.html">My Message</a></li>
                       
    	 <li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
    	 
    	 
    	 
    	
    	 
    	    <br>
            </ul>
            <img src="images/IndexPhoto2.jpg" width="800" height="570"/>
         <!--end #header-->
        
        
     
       
        
        
        
        
        
        <div id="footer">
       
            <p>Copyright &copy; 2011 Fay Stout. All Rights Reserved</p>    
    	
    	
       
    	
    			
    			
    				
    			
    			
      
      
       
        </div> <!--end #footer-->
    </div> <!--end #container-->
    
    </body>
    </html>
    Last edited by Paul O'B; Apr 6, 2012 at 08:49. Reason: code tags added

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It was as I suspected and your flyout was too far away from the element that triggered it. You also had a corrupt list structure.

    Here is the code in working order.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting, coins, coinhunting, relics, prospecting, search, treasure, White's, Garrett, Minelab, 
    searchcoil, Western and Eastern, Recovery, Research">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Stout Standards</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.css" type="text/css"/>
    <style type="text/css">
    img { border: solid white; }
    body {
    	background: black;
    	font-size:100%;
    	margin:0;
    	padding:0;
    }
    #container {
    	width: 95%;
    	min-width:990px;/*keep BG color from stopping short*/
    	background: black;/*header BG color moved to here*/
    }
    #header {
    	width: 990px;
    	text-align: center;
    	margin:0 auto;/*center it up in the container div*/
    	padding: 100px 0;
    	color:#000;
    }
    #header:after { /*contain header floats and allow dropdowns to overflow past header bottom*/
    	clear:both;
    	content:"";
    	display:block;
    	height: 0;
    	font-size:0;
    }
    #header img {
    	float:right;
    	border:4px solid 000;
    }
    #sidebar {
    	width: 12em;
    	font-size:40px;
    }
    #MainContent {
    	background: #FFA07A;
    	margin-left:5em;
    	margin-right:5em;
    	padding:10px 20px 0 1em;
    }
    /*=== Begin Nav Styles ===*/
    #nav, #nav ul {
    	float:left;
    	width:176px;/*180px total with 2px borders*/
    	margin:0;
    	padding:0;
    	list-style:none;
    	background: #D2B48C;/*for testing only, remove when done*/
    	border:2px solid #000;
    }
    #nav li {
    	position:relative;/* set containing block for AP sub ul */
    	float:left;/*kill IE whitespace bug*/
    	width:100%;
    	text-align:center;/*center the text*/
    }
    #nav li a {
    	display:block;/*use block instead of float for IE6 */
    	width:100%;/*IE needs a width*/
    	/*height:3em; remove height to allow text to wrap*/
       padding:.65em 0;/*set padding on top and bottom to create more height*/
    	text-decoration:underline;
    	color: #000;
    	font-weight:bold;
    	font-size:1em;
    }
    /* --- Text and Bg colors on hover ---*/
    #nav li:hover, #nav li.sfhover {
    	background:#333;
    	visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
    }
    #nav li:hover a, #nav li.sfhover a { color:#FFF }
    #nav li:hover li a, #nav li.sfhover li a { color:#000 }
    #nav li li:hover a, #nav li li.sfhover a {
    	background:#333;
    	color:#FFF
    }
    /* ------ Sub UL Drop Down ------ */
    #nav ul {
    	position:absolute;
    	width:176px;
    	left:100%;
    	top:-2px;/*recover top border (use "0" without borders)*/
    	margin-left:-999em;/* hide the sub ul */
    	background: #F5DEB3;/* IE needs some sort of BG on the nested ul */
    }
    #nav li:hover ul, #nav li.sfhover ul { margin-left:0;/* reveal the sub ul on li:hover */ }
    /*=== Begin Footer ===*/
    #footer {
    	width:100%;
    	clear:both;
    }
    #footer p {
    	margin:0;
    	padding:10px 0;
    	background:#DDD;
    	text-align:center;
    	font-size:1em;
    }
    .clearfloat {/* you never need this rule as there are better methiods to clear floats */
    	clear:both;
    	height:0;
    	font-size:0;
    }
    </style>
    
    <!--[if IE 6]>
    <script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    
    </head>
    <body>
    <div id="container">
    		<div id="header">
    				<ul id="nav">
    						<li><a href="Bio2.html">Artist Bio</a></li>
    						<li><a href="Equip.html">Equipment</a></li>
    						<li><a href="Nature.html">Travel &raquo;</a>
    								<ul>
    										<li><a href="Travel.html">Texas</a></li>
    										<li><a href="Travel.html">Louisiana</a></li>
    										<li><a href="Bill.html">Mexico</a></li>
    										<li><a href="Oldfolks.html">Arkansas</a></li>
    										<li><a href="Bill.html">France</a></li>
    										<li><a href="Bill.html">Other</a></li>
    								</ul>
    						</li>
    						<li> <a href="Travel.html">Nature &raquo;</a>
    								<ul>
    										<li><a href="Bill.html">Flowers</a></li>
    										<li><a href="Oldfolks.html">Butterflies</a></li>
    										<li><a href="Bill.html">Birds</a></li>
    										<li><a href="Bill.html">Wildlife</a></li>
    										<li><a href="Bill.html">Insects</a></li>
    								</ul>
    						<li><a href="Food.html">Food</a></li>
    						<li><a href="Portraits.html">Portraits</a></li>
    						<li><a href="Coinhunting.html">Black & White</a></li>
    						<li><a href="clubs.html">Abstract</a></li>
    						<li><a href="clubs.html">World Today</a></li>
    						<li><a href="inthefield.html">In The Field</a></li>
    						<li><a href="ending.html">My Message</a></li>
    						<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
    						<br>
    				</ul>
    				<img src="images/IndexPhoto2.jpg" width="800" height="570"/> 
    				<!--end #header-->
    				
    				<div id="footer">
    						<p>Copyright &copy; 2011 Fay Stout. All Rights Reserved</p>
    				</div>
    				<!--end #footer--> 
    		</div>
    </div>
    <!--end #container-->
    
    </body>
    </html>

  6. #6
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Set both LU an LI same width will solve your problem.

    #nav, #nav ul {
    float:left;
    width:176px;/*180px total with 2px borders*/
    margin:0;
    padding:0;
    list-style:none;
    background: #D2B48C;/*for testing only, remove when done*/
    border:2px solid #000;
    }
    #nav li {
    position:relative;/* set containing block for AP sub ul */
    float:left;/*kill IE whitespace bug*/
    width:176px;
    height: 47.5px;
    text-align:center;/*center the text*/
    }


    Other members may have different solutions.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tom8 View Post
    Other members may have different solutions.
    No, that's the same solution I gave above

    (Except that the html also needs to be fixed or it won't work properly anyway )

  8. #8
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It seems work fine with the changes as I suggested. Take a look this test page:

    http://w-cms.info/test/dropdown.html

    I see yours work as well. I should have taken a look at that first. Sorry.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    dropdown1.pngdropdown2.png
    Quote Originally Posted by tom8 View Post
    It seems work fine with the changes as I suggested. Take a look this test page:

    http://w-cms.info/test/dropdown.html
    Yes that is broken because of the malformed html I mentioned and when you roll over the list two menus appear at once instead of one (see dropdown1.png attachment). It should look like my example in dropdown2.png However your css was correct.

    I see yours work as well. I should have taken a look at that first. Sorry.
    No worries I didn't actually specify what I had changed so it wasn't immediately obvious.

  10. #10
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I can see why you have the title of CSS GURU. Iím new here. Just anxious to help out where I think I can. Perhaps Iíve jumped the gun a bit.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tom8 View Post
    I can see why you have the title of CSS GURU. I’m new here. Just anxious to help out where I think I can. Perhaps I’ve jumped the gun a bit.
    No worries, glad you tried to help and you had the right solution for the css so it was a good try.

  12. #12
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone for the lesson.....made the change and it's working fine. You folks are the best, and I appreciate your help.


Bookmarks

Posting Permissions

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