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.
<!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