CSS drop down menu not visible on hover

**lukkas** · Dec 24, 2011 03:06

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

**Andres Vaquero** · Dec 24, 2011 03:28

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;
}

**Paul O'B** · Dec 24, 2011 05:14

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>

**lukkas** · Dec 25, 2011 14:39

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

User Tag List

Thread: CSS drop down menu not visible on hover

Thread Tools

Display

CSS drop down menu not visible on hover

Bookmarks

Bookmarks

Posting Permissions