SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS drop down menu not visible on hover

    I know it has probably been discussed but I believe I have exhausted everything I know concerning viewing a drop down menu.

    such as:

    overflow:visible;
    z-index:100 !important; (200, 300, etc)
    visibility:visible;

    It only displays if I put it in the ".content class" and not the header area.

    The code is below if you can help me out.

    Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <HTML xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
    <TITLE>Example</TITLE>
    <style type="text/css">
    
    #page {
    	margin: 0px auto; width: 960px;
    }
    .move {
    	position: relative; padding-bottom: 0px; padding-left: 0px; width: 100%; padding-right: 0px; height: 40px; overflow: hidden; padding-top: 10px
    }
    .move .ads {
    	position: absolute; bottom: 0px; left: 246px;
    }
    .move ul.nav {
    	padding-bottom: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: right; padding-top: 10px;
    }
    .move ul.nav li {
    	padding-bottom: 0px; list-style-type: none; margin: 0px 20px 0px 0px; padding-left: 0px; padding-right: 0px; display: inline; float: left; list-style-image: none; padding-top: 0px
    }
    .move ul.nav li a {
    	text-transform: uppercase; COLOR: #fff; text-decoration: none
    }
    .move ul.nav li a:hover {
    	text-decoration: underline
    }
    
    
    /*///////////////   stat drop  ///////////*/
    
    .move ul.nav li ul.stat {
    	list-style:none;
    	font-family: Verdana;
    	font-size:13px;
    	color:#FFFFFF;
    	font-weight:normal;
    	width:150px;
    	
    }
    .move ul.nav li ul.stat li {
    	float:left;
    	position:relative;
    	display: block;
    	width:150px;
    	}
    
    .move ul.nav li ul.stat li a {
    	display:block;
    	padding:5px;
    	color:#fff;
    	text-decoration:none;
    	text-shadow:3px 3px 3px rgba(0,0,0,0.100); /* Text shadow to lift it a little */
    	border-radius:0px;
    }
    .move ul.nav li ul.stat li a:hover {
    	color:#fff;
    	text-decoration:none;
    }
    
    
    /*--- DROPDOWN ---*/
    
    /*///////////////    status drop  ///////////*/
    
    .move ul.nav li ul.stat {
    	list-style:none;
    	font-family: "Candara";
    	font-size:13px;
    	color:#FFFFFF;
    	font-weight:normal;
    	width:150px;
    	
    }
    .move ul.nav li ul.stat li {
    	float:left;
    	position:relative;
    	display: block;
    	width:150px;
    	}
    
    .move ul.nav li ul.stat li a {
    	display:block;
    	padding:5px;
    	color:#fff;
    	text-decoration:none;
    	text-shadow:3px 3px 3px rgba(0,0,0,0.100); /* Text shadow to lift it a little */
    	border-radius:0px;
    }
    .move ul.nav li ul.stat li a:hover {
    	color:#fff;
    	text-decoration:none;
    }
    
    /*--- DROPDOWN ---*/
    .move ul.nav li ul.stat ul {
    	list-style:none;
    	position:absolute;
    	display:none;
    	/*left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    	opacity:0; /* Set initial state to transparent */
    	-webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */
    }
    .move ul.nav li ul.stat ul li {
    	padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
    }
    .move ul.nav li ul.stat ul a {
    	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    	display:block;
    }
    .move ul.nav li ul.stat li:hover ul { /* Display the dropdown on hover */
    	left:0; /* Bring back on-screen when needed */
    	opacity:1; /* Fade to opaque */
    	
    }
    .move ul.nav li ul.stat li:hover a { /* Set styles for top level when dropdown is hovered */
    
    	background:#092043; /* Solid colour fall-back */
    	background:rgba(9,32,67,0.90); /* It'll look nice semi-transparent */
    	text-decoration:none;
    }
    .move ul.nav li ul.stat li:hover ul a { /* Override some top level styles when dropdown is hovered */
    	text-decoration:none;
    	-webkit-transition:-webkit-transform 0.075s linear;
    }
    
    .move ul.nav li ul.stat li:hover ul li a:hover { /* Set styles for dropdown when items are hovered */
    	background:#133e7e; /* Solid colour fall-back */
    	background:rgba(19,62,126,0.90); /* It'll look nice semi-transparent */
    	text-decoration:none;
    	-moz-transform:scale(1.05);
    	-webkit-transform:scale(1.05);
    }
    
    .move ul.nav li ul.stat ul {
    	list-style:none;
    	position:absolute;
    	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    	opacity:0; /* Set initial state to transparent */
    	-webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */
    }
    
    .move ul.nav li ul.stat ul li {
    	/* padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
    	float:none;
    }
    .move ul.nav li ul.stat ul a {
    	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    	display:block;
    }
    .move ul.nav li ul.stat li:hover ul { /* Display the dropdown on hover */
    	left:0; /* Bring back on-screen when needed */
    	opacity:1; /* Fade to opaque */
    	text-decoration:none;
    }
    
    
    /*   /////////////   ENd  ////////////////*/
    
    
    .move div.search {
    	padding-bottom: 0px; padding-left: 0px; width: 170px; padding-right: 0px; display: inline; float: right; height: 22px; overflow: hidden; padding-top: 4px
    }
    .move div.search input {
    	display: inline; float: left
    }
    .move div.search input.searchBox {
    	border-bottom: medium none; border-left: medium none; padding-bottom: 2px; margin: 0px; padding-left: 10px; width: 137px; padding-right: 0px; background: url(../images/global/bg-search.gif) no-repeat left top; height: 18px; COLOR: #737373; border-top: medium none; border-right: medium none; padding-top: 2px
    }
    .move div.search input.Search {
    	width: 23px; height: 22px
    }
    .content {
    	padding-bottom: 0px; padding-left: 0px; padding-right: 0px; background: #fff; clear: both; padding-top: 1px;
    }
    .content .header {
    	background-image: url(/global/header.gif); text-align: left; margin: 0px 1px; width: 958px; background-repeat: repeat-x; background-position: left top; height: 80px;
    }
    .content [class].header {
    	min-height: 80px; height: auto;
    }
    
    
    </style>
    </HEAD>
    <BODY>
    <div id="page">
    <div class="move">
    <div class="ads"><a title="Visit the Site" 
    href="http://blog.example.com/"><img 
    alt="Visit the Site" 
    src="images/guests.gif" 
    width="275" height="36"></a>
    </div>
    <div class="search">
    <FORM method="get" action="search_results.html"><LABEL class="searchForm" for="search">Search</LABEL> <INPUT id="search" class="searchBox" type="text" 
    name="search"> <INPUT class="Search" alt="Go" 
    src="images/btn-search.jpg" type="image"> 
    </FORM>
    </div>
    <ul class="nav">
    <li>
      <ul class="stat">
    	<li>
    		<a href="#">Select your <b>Status</b></a>
    		<ul>
          <li><a href="http://www.example.com" class="underline" target="_self">Log In</a></li>
          <li><a href="http://www.example.com" class="underline" target="_self">Tools</a></li>
          <li><a href="http://www.example.com" class="underline" target="_self">Sign Up</a></li>
    
    		</ul>
    	</li>
    </ul> 
        </li>
        </ul>
        </div>
    <div class="content">
    <div class="header">
    <h1>
    <OBJECT 
    codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
    classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width="205" height="70"><PARAM NAME="movie" VALUE="/images/forest/logo-flash.swf"><PARAM NAME="quality" VALUE="high"><PARAM NAME="bgcolor" VALUE="#FFFFFF"><PARAM NAME="wmode" VALUE="transparent" />       
    <!--[if gte IE 7]><!-->                                <object 
    data="/images/forest/logo-flash.swf" width="205" height="70" 
    type="application/x-shockwave-flash">                                    <param 
    name="quality" value="high">                                    <param 
    name="bgcolor" value="#FFFFFF">                                    <param 
    name="wmode" value="transparent">                                    <param 
    name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">            
                            <a href="/default.html"><img 
    src="images/forest/logo.jpg" alt="" /></a>              
                      </object>                                <!--><![endif]-->     
                           <!--[if gte IE 7]><![endif]--></OBJECT>
                           </h1>
    <div class="tr">
    
    <div class="zr">
    
    <div class="hdr">
    
    </div>
    <div class="begone">
    <p> Finder to find the perfect getaway. <strong>Get 
    started.</strong></a></p></div>
    
    </div><!-- closes hdr -->
    
    </div><!-- closes zr -->
    
    </div><!-- closes tr -->
    <div id="BodyDiv" class="body">
    <div id="content" class="mainContent">
    Just some stuff here to show you typed content does get in.   Move your mouse just below & to the left of the search box and you'll see there is missing ul menu display. Probably a simple fix for experts. I thought I was doing well in CSS but this has me stumped.
    </div>
    </div>
    </div><!-- content closing -->
    </div><!-- header closing -->
    </BODY>
    </HTML>
    and Happy Holidays

  2. #2
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello I hope I am able to help even though I do not have the time to carefully review the code. Upon a quick view I have the slight feeling that you are over-complicating things just a bit. I built many cross-browser drop-downs with CSS always using display property instead of opacity as I think you use.

    So the main bit would work as follows:

    Code:
    .menu ul ul{
    display:none;
    }
    
    .menu li:hover ul{
    display:block;
    }

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

    Your menu is inside an element called .move which you have set to height:40px and overflow:hidden which means nothing can show outside that 40px height. remove the overflow:hidden from .move.

    You have also set the nested ul to display:none but have not reset it to block on hover.

    Code:
    .move ul.nav li ul.stat li:hover ul { /* Display the dropdown on hover */
    	left:0; /* Bring back on-screen when needed */
    	opacity:1; /* Fade to opaque */
    	text-decoration:none;
    display:block;
    }
    What was the point of the double nested ul to start with? that just makes it more complicated than it needs to be.
    Code:
    <ul class="nav">
    	<li>
    		<ul class="stat">
    			<li> <a href="#">Select your <b>Status</b></a>
                                <ul>
    It could have been:
    Code:
    <ul class="nav">
      <li> <a href="#">Select your <b>Status</b></a>
        <ul>

  4. #4
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, Excellent solution.. it work snow. The extra nav div was ( and still may be used ) for displaying 2 li's in the UL to display inline.

    I had a link right below the solution you gave me and it was conflicting so I took out the hyper-link below

    What a nice Christmas gift solution. It had me baffled for a while.

    Thanks


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
  •