|
CSS - Ie6 Horizontal Drop-down Menu Problems
Similar TutorialsHi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Hi, I have a horizontal css menu that looks great in FF but doesn't align correctly in IE. Is anyone able to help me with a fix for IE browsers? HTML is Code:
<!-- Begin Navigation -->
<div id="navigation">
<ul class="nav">
<li><a href="default.html">HOME</a></li>
<li><a href="rangemaster/about.html">ABOUT RANGEMASTER</a>
<ul>
<li><a href="http://www.rangemaster.co.uk/index_535.htm" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.rangemaster.co.uk/index_65.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.rangemaster.co.uk/ProdLocator.aspx" target="_blank">HOW TO BUY</a></li>
<li><a href="rangemaster/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="falcon/about.html">ABOUT FALCON</a>
<ul>
<li><a href="falcon/history.html" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.falconappliances.com/290.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.falconappliances.com/ProdLocator.aspx" target="_blank">HOW TO BUY</a></li>
<li><a href="falcon/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="aga/about.html">ABOUT AGA</a>
<ul>
<li><a href="http://www.aga-web.co.uk/92_243.htm" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.aga-web.co.uk/89.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.aga-web.co.uk/90_253.htm" target="_blank">HOW TO BUY</a></li>
<li><a href="aga/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="rayburn/about.html">ABOUT RAYBURN</a>
<ul>
<li><a href="http://www.rayburn-web.co.uk/50.htm" target="_blank">COMPANY HISTORY</a></li>
<li><a href="http://www.rayburn-web.co.uk/44.htm" target="_blank">PRODUCTS</a></li>
<li><a href="brochure.html">REQUEST BROCHURE</a></li>
<li><a href="http://www.rayburn-web.co.uk/48.htm" target="_blank">HOW TO BUY</a></li>
<li><a href="rayburn/recipes.html">GREAT RECIPE IDEAS</a></li>
</ul>
</li>
<li><a href="survey.html">FIND YOUR PERFECT COOKER</a>
<li><a href="gallery.html">PHOTO GALLERY</a>
<li><a href="brochure.html">BROCHURE REQUEST</a>
</ul>
</div>
<!-- End Navigation -->
and CSS is Code:
ul.nav,
.nav ul{
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
height: 25px;
width: 835px;
}
ul.nav{
display: table;
background: url(../_images/menu.gif);
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 6px 6px;
color: #FFFFFF;
text-align:left;
}
ul.nav li>ul{
display: none;
position: absolute;
width: 150px;
margin-left: -10px;
margin-top: 6px;
}
ul.nav li:hover>ul{
display : block;
}
.nav ul li a {
display: block;
padding: 2px 10px;
color: #FFFFFF;
}
.nav a{
text-decoration: none;
color: #FFFFFF;
}
.nav ul li a{
background-color: #000000;
filter:alpha(opacity=80);
opacity: 0.8;
-moz-opacity:0.8;
}
.nav ul li a:hover {
background-color: #B3191E;
}
.nav ul li a:active {
background-color: #B3191E;
}
Many thanks... I'm trying to get my horizontal navigation to work for a PTA page I'm creating. New to CSS and I think I've got a bit of the gist of it... but I'm really struggling with this. I've mostly "found" the coding I needed and then modified it to suit my needs. As a designer, though, I still want it to look the way I want it to and I'm not quite able to accomplish that. Basically, I would like a drop down menu added to the navigation I've created here - lwptsa . org/newsite/ This is the solution I found - lwptsa . org/newsite/dropdown . html But I am unable to get the dark blue to continue to the end of the container. ** ACK, not allowed to post images. You can find the image I'm referring to he lwptsa . org/newsite/images/navigation . jpg I'd like to fix the left margin spacing and it's coloring (A), making the lines between the buttons/blocks white (B) and having the blue flush with the white containers above and below (A). I'd also like to keep the top lines between the drop-down menu (C) but remove it from the main menu/navigation (B). Hopefully this makes sense. My style sheets a No drop-down menu, but working spacing and white separating lines (id - navigation): lwptsa . org/newsite/ Code: body
{
margin: 20px;
padding: 0;
font: 100%/1.3 arial;
font-size: medium;
color: #000;
background: #ccc;
}
h1, h2, h3, h4, h5, h6
{
margin: 0 0 1em;
line-height: 1.1;
}
h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
font: 80%/1.3 helvetica, arial, sans-serif;
}
img { border: none; }
a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }
a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }
a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }
#container
{
margin: 0 auto;
width: 1024px;
background: #fff;
}
#container table
{
font: 80%/1.3 helvetica, arial, sans-serif;
}
#header
{
font-style:italic;
font-size:small;
color: #00693e;
background: #fff;
text-align: center;
height: 115px;
padding: 20px 20px 20px 30px;
}
#navigation
{
font-size:small;
float: left;
width: 1024px;
background: #002664;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation ul ul
{
position: absolute;
background: #d1d5da;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}
#navigation li a
{
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { color: #a3d869; }
#content-container
{
float: left;
width: 1024px;
background: #fff;
}
#content
{
height: inherit;
clear: left;
float: left;
width: 590px;
padding: 0 20px 0 0;
margin: 20px 0 20px 30px;
display: inline;
border-right: 1px solid #00693e;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 340px;
padding: 20px 0;
margin: 0 20px 0 20px;
display: inline;
}
#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }
#footer
{
font-size: x-small;
clear: both;
color: #fff;
background: #002664;
text-align: center;
padding: 5px;
height: 1%;
}
#translator
{
text-align: center;
margin: auto;
position: absolute;
}
Drop-down menu, but issue with the blue not continuing to the end and weird issues with separating lines and margins (id - menu): lwptsa . org/newsite/dropdown . html Code: body
{
margin: 20px;
padding: 0;
font: 100%/1.3 arial;
font-size: medium;
color: #000;
background: #ccc;
}
h1, h2, h3, h4, h5, h6
{
margin: 0 0 1em;
line-height: 1.1;
}
h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
font: 80%/1.3 helvetica, arial, sans-serif;
}
img { border: none; }
a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }
a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }
a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }
#container
{
margin: 0 auto;
width: 1024px;
background: #fff;
}
#container table
{
font: 80%/1.3 helvetica, arial, sans-serif;
}
#header
{
font-style:italic;
font-size:small;
color: #00693e;
background: #fff;
text-align: center;
height: 115px;
padding: 20px 20px 20px 30px;
}
#menu ul
{
font-family: Arial, Verdana;
font-size:small;
margin: 0;
padding: 0;
list-style: none;}
#menu ul li
{
display: block;
position: relative;
float: left;}
#menu li ul { display: none; }
#menu li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #002664;
margin-left: 1px;
white-space: nowrap;}
#menu ul li a:hover { background: #00693e; }
#menu li:hover ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
font-size: 11px;
}
#menu li:hover a { background: #00693e; }
#menu li:hover li a:hover { color: #fff;background: #008d53; }
#content-container
{
float: left;
width: 1024px;
background: #fff;
}
#content
{
height: inherit;
clear: left;
float: left;
width: 590px;
padding: 0 20px 0 0;
margin: 20px 0 20px 30px;
display: inline;
border-right: 1px solid #00693e;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 340px;
padding: 20px 0;
margin: 0 20px 0 20px;
display: inline;
}
#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }
#footer
{
font-size: x-small;
clear: both;
color: #fff;
background: #002664;
text-align: center;
padding: 5px;
height: 1%;
}
#translator
{
text-align: center;
margin: auto;
position: absolute;
}
Any and all help welcome. I'm trying to redesign the look and information of the PTA's website. a. Hello: I inherited a site which was designed by an SEO firm. They have a 2 level horizontal drop down menu which isn't working in Internet Explorer 6. The website URL is http://www.chrisspencerhomes.com. When you hover over the links Communities, Home Plans, Available Homes and Gallery; the drop down menus do not appear in IE6. The website works great in Firefox and IE7. I attached the CSS file to this post. Can someone help me fix the CSS code so it will work on IE6? Thank you for all your time and help. Hi all! I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to. The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up You can check out the site at: cleopatra.gebodesign.no The files are at: gebodesign.no/cleopatra/menu.php gebodesign.no/cleopatra/stylesheet.css Thanks for any input I'm trying two "new to me" things at once here. First, I'm creating a horizontal drop down menu for the first time. Along with that, I'm using the whatever:hover method with the IE behavior fix instead of the conditional comment tables method (which is semantically incorrect). I've got two problems in IE that can be viewed he http://www.windrivers-gsp.com/test/index.php CSS: Code:
@charset "utf-8";
/* CSS Document */
/* Document Formatting */
html { width:100%;}
body, tr, th, td, p { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
color:#000000;
margin:0px;
padding:0px;
}
#navigation { position:relative;
background:url(design/menubar.gif) #009933;
background-repeat:repeat-x;
width:100%;
height:30px;
text-align:center;
display:block;
}
#nav2 { position:absolute;
left:50%;
width:628px;
margin-left:-314px;
}
#container { position:relative;
max-width:1400px;
min-height:400px;
overflow:visible;
margin-left:auto;
margin-right:auto;
border-bottom:1px solid #666666;
padding:15px 10px 10px 10px;
z-index:2;
}
#content { font-size: 1em;
margin-right:36%;
overflow: visible;
background: #FFF;
text-align: left;
height: auto;
padding-right:10px;
}
#rightpane { font-size: 1em;
float:right;
margin-top:0;
width:35%;
overflow: visible;
text-align: left;
height: auto;
}
#fixcont {width:100%;float:left}
/* PIE/Aslett Clear Fix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* New Navigation Menu Styling */
#menu {
width: 100%;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 157px;
float: left;
}
#menu a, #menu h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
display: block;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
margin: 0;
padding: 0;
height:30px;
line-height:30px;
}
#menu h2 {color: #000; background:url(design/menutab.gif); font-weight:normal;}
#menu h2:hover {background-position: 0 30px;}
#menu a {color: #000; text-decoration: none;}
#menu ul ul a {font-size:.8em; background-color:#a4906d;}
#menu ul ul a:hover {background-color:#CCCCCC;}
#menu ul li {position: relative;}
#menu ul ul {position: absolute; z-index: 10;}
div#menu ul ul {display: none;}
div#menu ul li:hover ul {display: block;}
HTML: 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" />
<title>Test Menu</title>
<link href="menutest.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<style type="text/css" media="all">
body { behavior: url(csshover.htc); font-size: 100%;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 30px;}
#menu a, #menu h2 { font: 1em; font-family: Verdana, Arial, Helvetica, sans-serif;}
</style>
<![endif]-->
<meta http-equiv="Content-Language" content="en-us" />
<meta name="title" content="Test Menu" />
<meta name="Publication_Date" content="09/07" />
<meta name="robots" content="ALL" />
<meta name="revisit-after" content="2 weeks" />
</head>
<body>
<div id="navigation">
<div id="nav2">
<div id="menu">
<ul>
<li><h2><a href="index.php">Home</a></h2></li>
</ul>
<ul>
<li><h2><a href="index.php">Page Two</a></h2>
<ul>
<li><a href="index.php">Page 2.1</a></li>
<li><a href="index.php">Page 2.2</a></li>
<li><a href="index.php">Page 2.3</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2><a href="index.php">Page Three</a></h2></li>
</ul>
<ul>
<li><h2><a href="index.php">Page Four</a></h2>
<ul>
<li><a href="index.php">Link 1</a></li>
<li><a href="index.php">Link 2</a></li>
<li><a href="index.php">Link 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="container" class="clearfix">
<div id="content"><div id="fixcont">
<p style="text-align:center;">Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here;
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here;
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; </p>
</div></div>
<div id="rightpane"><p>Right Side Content</p></div>
</div>
</body>
</html>
Basically, it looks like my #container div has a higher z-index than my menu drop downs, despite stating otherwise in the CSS. Also, the drop down <ul>'s are not directly under the header <ul>, but rather are about 50% off right. In FF everything looks good, of course. Any ideas? Please help me how to center Ultimate Horizontal Drop-Down Menu Demo on DIV ultimate.horizontal.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Ultimate Horizontal Drop-Down Menu Demo</title> <link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/dropdown/themes/default/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lt IE 7]> <script type="text/javascript" src="js/jquery/jquery.js"></script> <script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script> <![endif]--> </head> <body> <h1>Ultimate Horizontal Drop-Down Menu Demo</h1> <div id="catmenu"> <ul id="nav" class="dropdown dropdown-horizontal"> <li><a href="./">Home</a></li> <li><span class="dir">About Us</span> <ul> <li><a href="./">History</a></li> <li><a href="./">Our Vision</a></li> <li><span class="dir">The Team</span> <ul> <li><a href="./">Brigita</a></li> <li><a href="./">John</a></li> <li><a href="./">Michael</a></li> <li><a href="./">Peter</a></li> <li><a href="./">Sarah</a></li> </ul> </li> <li><a href="./">Clients</a></li> <li><a href="./">Testimonials</a></li> <li><a href="./">Press</a></li> <li><a href="./">FAQs</a></li> </ul> </li> <li><span class="dir">Services</span> <ul> <li><a href="./">Product Development</a></li> <li><a href="./">Delivery</a></li> <li><a href="./">Shop Online</a></li> <li><a href="./">Support</a></li> <li><a href="./">Training & Consulting</a></li> </ul> </li> <li><span class="dir">Products</span> <ul> <li><a href="./" class="dir">New</a> <ul> <li><a href="./">Corporate Use</a></li> <li><a href="./">Private Use</a></li> </ul> </li> <li><a href="./" class="dir">Used</a> <ul> <li><a href="./">Corporate Use</a></li> <li><a href="./">Private Use</a></li> </ul> </li> <li><a href="./">Featured</a></li> <li><a href="./">Top Rated</a></li> <li><a href="./">Prices</a></li> </ul> </li> <li><a href="./">Gallery</a></li> <li><a href="./">Events</a></li> <li><a href="./">Careers</a></li> <li><a href="./" class="dir">Contact Us</a> <ul> <li><a href="./">Enquiry Form</a></li> <li><a href="./">Map & Driving Directions</a></li> <li><a href="./">Your Feedback</a></li> </ul> </li> </ul> </div> </body> </html> css/dropdown/dropdown.css Code:
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
display: block;
/*margin: 0;
padding: 0;*/
}
ul.dropdown {
position: inherit;
z-index: 597;
/* float: left;*/
}
ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
text-align:left;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
/* left: 0;*/
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
css/dropdown/themes/default/default.ultimate.css Code:
#catmenu{
text-align:center;
width:100%;
background:#f6f6f6;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
height: 34px;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
ul.dropdown {
font-weight: bold;
}
ul.dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #eee;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
width: 150px;
margin-top: 1px;
}
ul.dropdown ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
* @level sep ul, .class
*/
ul.dropdown *.dir {
padding-right: 20px;
background-image: url(images/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
background-image: url(images/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 10px;
padding-left: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
css/dropdown/themes/default/default.css Code:
#catmenu{
text-align:center;
width:100%;
background:#f6f6f6;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
height: 34px;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
ul.dropdown {
font-weight: bold;
}
ul.dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #eee;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
width: 150px;
margin-top: 1px;
}
ul.dropdown ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
* @level sep ul, .class
*/
ul.dropdown *.dir {
padding-right: 20px;
background-image: url(images/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
background-image: url(images/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 10px;
padding-left: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
Thank you. hi, Am nearly finished my first website but this issue won't go away and it's driving me crazy. www.leehughes.co.uk As you can see I have a drop down menu at the top. The problem is a couple of my friends have reported trouble trying to access the sub menus. They can hover over the main choice but when they move the mouse down to select a link the links disappear. it's not like they can not be selected though if you press ctrl and go down then they can be selected. Am so puzzled and so close to the end it's driving me crazy.. I've got a drop down menu that has a hover feature. Problem is that as soon as you try to mouse over the options in the menu after they pop up on the hover on the title of the menu, the menu disappears. it does this in FF and Safari but in IE it works. weird, eh? any ideas? I'm having trouble with the drop down menu for my website and I know it just has to be an easy fix, but I can't figure it out! I've spent grueling hours on it and now I've probably just messed up the original code! The menu will not center, and if I get it to, either the entire background turns white, the background for the menu turns white, or something else goes wrong (mostly more IE problems). Any help would be great....it looks like I can't post a link to the site, nor can I post the enormous amount of code in here??? Can someone tell me how I can do either or simply direct you to my site? I'm not self-promoting it, I just need help! I'm having a problem with my drop menu
Code: #nav ul a:focus being too wide. It's set at 100%, and will shrink if I set it to 50%, but can't match the different sizes of my menus. Here is the link to the page so you can see when the menu drops, then you hover mouse over one of the links in the list, the image is wider than the box. http://www.alliancemonterey.org/temp/ Here is the drop menu css. Any help would be appreciated Code: #nav,
#nav ul { background-image:url(images/button.gif); list-style: none; margin: 0; padding: 0; z-index: 20000; }
#nav { font-family: Arial, Helvetica, sans-serif; font-size: 0.855em; /* 14px / 16px */ font-weight: bold; height: 2.286em; /* 32px / 14px */ line-height: 1.5em; /* 21px / 14px */ width: 760px; margin: 0; }
#nav li { background-image:url(images/button.gif); float: left; height: 2.286em; /* 32px / 14px */ margin: 0; padding: 0; position: relative; z-index: 10000; }
#nav a { color: #c7d0d9; display: block; padding: 0.286em 5px 0.5em; /* 4px 30px 7px */ text-decoration: none; }
#nav a:hover,
#nav a:focus { color: #fff; background-image:url(images/button_over1.gif); }
#nav ul { background-image:url(images/button_over2.gif); left: 0; font-size: 0.857em; /* 12px / 14px */ line-height: 1.5em; /* 18px / 12px */ position: absolute; top: 2.667em; /* 32px / 12px */ width: 100%; }
#nav ul li { background: none; float: none; height: auto; width: 100%; }
#nav ul a { background: none; padding: 0.083em 30px 0.25em; /* 1px 30px 3px */ width: 70%; }
#nav ul ul { font-size: 1em; }
#nav ul a:hover,
#nav ul a:focus { background-image:url(images/button_over1.gif); width: 100%; }
#nav ul.hover { background-image:url(images/button_over1.gif); width: 100%; }
#nav ul ul { left: 0px; top: 0.5em; /* 6px / 12px */ }
#nav ul,
#nav :hover ul ul,
#nav .hover ul ul { margin-left: -9999px; }
#nav li:hover>ul,
#nav li.hover>ul,
#nav a:focus>ul,
#nav ul ul,
#nav .hover a:focus { margin-left: 0; }
#nav ul a:focus { margin-left: 0; }
NEVER MIND Hi, I'm trying to make a drop-down menu using CSS and javascript. I'm posting this here because the javascript (and most of the css!) is working fine, I just need some help with the positioning. You can see the menu so far on the website I'm beginning to develop, 10pinleague.com. As you can see the initial drop downs work as intended but when you attempt to open a submenu, that should appear to the right of the drop down menu, it appears in completely the wrong place. And for some odd reason the distance from the drop-down menus to the submenus increases more and more as you progress from Menu 1 to Menu 2 and 3. I'm no expert at either javascript or CSS, so the drop down menu was something that I downloaded from a website, here, and then adapted to suit my site. Perhaps this wasn't intended to work as a cascading drop down menu. I just thought if I apply the same principle of wrapping the link in a div and getting that to show another new div containing the submenu it should work. And it kind of does, just in the wrong place - which I do not understand why this happens. Here is the HTML code for the menu. (note this is not the actual code on my website, this is code that is generated from a php loop I've made. But the HTML remains the same). Code:
<!-- START OF MENU !-->
<table width='730' height='30'>
<tr>
<td width='20%' align='center'>
<div id='menu1a'>
<a href='#'>Menu 1</a>
</div>
<div id='menu1b' class='menu_dropdown'>
<table width='150' height='50'>
<tr>
<td class='padded'>
<table width='100%' height='100%'>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu1_1a'>
<a href='#'>Item 1</a>
</div>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu1_2a'>
<a href='#'>Item 2</a>
</div>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu1_3a'>
<a href='#'>Item 3</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>at_attach('menu1a', 'menu1b', 'hover', 'y', 'pointer');</script>
</td>
<td width='20%' align='center'><div id='menu2a'>
<a href='#'>Menu 2</a>
</div>
<div id='menu2b' class='menu_dropdown'>
<table width='150' height='50'>
<tr>
<td class='padded'>
<table width='100%' height='100%'>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu2_1a'>
<a href='#'>Item 2</a>
</div>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu2_2a'>
<a href='#'>Item 2</a>
</div>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu2_3a'>
<a href='#'>Item 3</a>
</div>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu2_4a'>
<a href='#'>Item 4 ></a>
</div>
<div id='submenu2_4b' class='menu_dropdown'>
<table width='150' height='50'>
<tr>
<td class='padded'>
<table width='100%' height='100%'>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<a href='#'>Item 4a</a>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<a href='#'>Item 4b</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>at_attach('submenu2_4a', 'submenu2_4b', 'hover', 'y', 'pointer');</script>
</td>
</tr>
<tr>
<td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
<div id='submenu2_5a'>
<a href='#'>Item 5</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>at_attach('menu2a', 'menu2b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu3a'><a href='#'>Menu 3</a></div><div id='menu3b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_1a'><a href='#'>Item 3</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_2a'><a href='#'>Item 2</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu3a', 'menu3b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu4a'><a href='#'>Menu 4</a></div><div id='menu4b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_1a'><a href='#'>Item 4</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_2a'><a href='#'>Item 2</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu4a', 'menu4b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu5a'><a href='#'>Menu 5</a></div><div id='menu5b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_1a'><a href='#'>Item 1</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_2a'><a href='#'>Item 2</a></div></td></tr><tr><td class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu5a', 'menu5b', 'hover', 'y', 'pointer');</script></td>
</tr>
</table>
Here is the related CSS.....but I doubt this is important. Code:
.menu_dropdown { background-color: #a5caad; border: 1px solid #057c1f; position: absolute; visibility: hidden; font-size: small; }
.menu_dropdown A:link {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:visited {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:active {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:hover {text-decoration: underline; color: #000; font-weight: normal; }
td.menuNormal
{padding: 0px;
font-weight: bold;
vertical-align: top;
background-color:#a5caad;}
td.menuHover
{padding: 0px;
font-weight: bold;
vertical-align: top;
background-color: #87bc93;}
And here is the javascript file, that I have not modified in any way from the site I linked to above. Code:
// <script>
// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Distribute this code, any part or any modified version of it.
// Instead, you can link to the homepage of this code:
// http://www.php-development.ru/javascripts/dropdown.php.
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as a part of another product provided that
// its main use is not creating javascript menus.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind, either
// expressed or implied, including, but not limited to, the implied warranties
// of merchantability and fitness for a particular purpose. You expressly
// acknowledge and agree that use of this code is at your own risk.
function expand(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuHover";
}
function collapse(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);
td.className = "menuNormal";
}
// ----- Popup Control ---------------------------------------------------------
function at_display(x)
{
var win = window.open();
for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}
// ----- Show Aux -----
function at_show_aux(parent, child)
{
var p = document.getElementById(parent);
var c = document.getElementById(child );
var top = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;
for (; p; p = p.offsetParent)
{
top += p.offsetTop;
left += p.offsetLeft;
}
c.style.position = "absolute";
c.style.top = top +'px';
c.style.left = left+'px';
c.style.visibility = "visible";
}
// ----- Show -----
function at_show()
{
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child" ]);
at_show_aux(p.id, c.id);
clearTimeout(c["at_timeout"]);
}
// ----- Hide -----
function at_hide()
{
var c = document.getElementById(this["at_child"]);
c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}
// ----- Click -----
function at_click()
{
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child" ]);
if (c.style.visibility != "visible")
at_show_aux(p.id, c.id);
else c.style.visibility = "hidden";
return false;
}
// ----- Attach -----
// PARAMETERS:
// parent - id of visible html element
// child - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
// "hover" = you should place the mouse over the parent to show
// the child
// position - "x" = the child is displayed to the right of the parent
// "y" = the child is displayed below the parent
// cursor - Omit to use default cursor or check any CSS manual for possible
// values of this field
function at_attach(parent, child, showtype, position, cursor)
{
var p = document.getElementById(parent);
var c = document.getElementById(child);
p["at_parent"] = p.id;
c["at_parent"] = p.id;
p["at_child"] = c.id;
c["at_child"] = c.id;
p["at_position"] = position;
c["at_position"] = position;
c.style.position = "absolute";
c.style.visibility = "hidden";
if (cursor != undefined) p.style.cursor = cursor;
switch (showtype)
{
case "click":
p.onclick = at_click;
p.onmouseout = at_hide;
c.onmouseover = at_show;
c.onmouseout = at_hide;
break;
case "hover":
p.onmouseover = at_show;
p.onmouseout = at_hide;
c.onmouseover = at_show;
c.onmouseout = at_hide;
break;
}
}
Can somebody please help me get the submenus appearing next to the divs in the drop-down menus that they relate to, rather than half way across the page? Thank you very much! PS. If you think I've asked this in the wrong place and it should be in the Javascript forum, could you move it for me? Thanks. Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
hello. I am currently using a simple horizontal top menu with a vertical drop down. I would like to change the vertical drop down to be horizontal, multi column, and should accomodate more than one line, if possible. The example I'm going for is used as top navigation he nfl - baltimore ravens home page and he ge home page Here is the code I'm using currently (would like it to be all CSS). #### ul#mainNavigation { padding-left:185px; } ul#mainNavigation li { padding:0 16px; float: left; display:inline; position: relative; list-style: none; color:White; _width:1px; } ul#mainNavigation li.Seperator { padding:0px; _width:1px; } ul#mainNavigation li.over { background-color:white; } ul#mainNavigation li.over a { color:Red; } ul#mainNavigation li a { color:White; text-transform:uppercase; text-decoration:none; font-weight:bold; display:block; } ul#mainNavigation a:hover { color: Red; } ul#mainNavigation li a { display: block; } ul#mainNavigation li p { height:19px; } ul#mainNavigation li ul { display: none; position: absolute; background-color:Black; opacity:.8; filter: alpha(opacity=80); -moz-opacity: 0.8; margin-left:-16px; } ul#mainNavigation li.over ul { display: block; z-index:999; } ul#mainNavigation li.over ul li { float: none; background:none; border:none; white-space:nowrap; padding:0px; } ul#mainNavigation li.over ul li a { color: white; padding:5px; border-bottom:solid 1px black; } ul#mainNavigation li.over ul li a:hover { background: #3d1f6e; color: white; } ~~~~~~~ HTML ~~~~~~~~~~~~~~ <ul id="mainNavigation"> <li> <p><a href="Mainlink1.html">Mainlink1</a></p> <ul> <li><a href="link2.html">LINK 2</a></li> <li><a href="link3.html">LINK 3</a></li> <li><a href="link4.html">LINK 4</a></li> <li><a href="link5.html">LINK 5</a></li> <li><a href="link6.html">LINK 6</a></li> <li><a href="link7.html">LINK 7</a></li> </ul> </li> <li> <p><a href="Mainlink2.html">Mainlink2</a></p> <ul> <li><a href="link2.html">LINK 2</a></li> <li><a href="link3.html">LINK 3</a></li> <li><a href="link4.html">LINK 4</a></li> <li><a href="link5.html">LINK 5</a></li> <li><a href="link6.html">LINK 6</a></li> <li><a href="link7.html">LINK 7</a></li> </ul> </li> </ul> #### Thank you, in advance! ~ lahddah Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
HTML: 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>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
For my horizontal drop-down menu, the menu items that overlap the content disappear for some reason in IE7. Here is the link... sweetless.zxq.net I am an absolute newbie to CSS, so I'm not sure if I am missing something really simple? -S Hi I am following a list aparts suckerfish dropdown tutorial. So far I have managed to get everything working for Mozilla. The javascript bit at the end, enabling it to work for explorer is troubling me. can anyone help? Do I put the javascript in the CSS file or the Html? I've tried both but neither seem to work! Is there a better way to do this? Thanks Hi there, I have not done any html/CSS in a LONG time and have just got back into it. I am having some problems with a drop down, where, when the sub menu is hovered over, it will not go away again until the mouse is moved either up above the menu bar or off the browser page. I would like the sub menu to be hidden when the mouse is off the sub menu item. An example is here (oops, I can't post a URL) 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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(images/carpet.gif);
width:100%;
margin: 0px;
}
#wrapper {
position: relative;
margin: auto;
width:840px;
top: 20px;
height: 920px;
}
#index3-03_ {
position:absolute;
left:5px;
top:45px;
width:840px;
height:263px;
background-image: url(images/thinslice.png);
background-repeat: no-repeat;
z-index: 2;
background-position: -66px -142px;
}
#navbar {
position: absolute;
top: 31px;
right: 0px;
margin: 0;
padding: 0;
width: 780px;
left: 38px;
height: 37px;
}
#navbar li {
list-style: none;
float: left;
padding-left: 20px;
font-size: 14px;
}
#navbar li a {
display: block;
text-decoration: none;
list-style-type: none;
list-style: unordered;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 5px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
text-decoration: none;
color: #363795;
text-align: center;
}
#navbar li a:hover {
color: #B00D46;
}
#navbar li ul {
display: none; }
#navbar li:hover ul, #navbar li.hover ul {
position:absolute;
display: block;
left:-42px;
top:-1px;
width:840px;
margin: 0;
background-repeat: no-repeat;
float: left;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0px;
z-index: 5;
clear: none;
background-image: url(images/fatslice.png);
background-position: -62px -281px;
height: 500px;
}
#navbar li:hover li, #navbar li.hover li {
float: left;
padding-left: 25px;
padding-bottom: 25px;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #363795;
position: relative;
left: 125px;
top: 25px;
}
#navbar li li a:hover {
color: #B00D46;
text-align: left;
position: relative;
left: 125px;
top: 25px;
}
#foobar1 {
position: absolute;
left: 62px;
top: 1px;
clear: both;
}
#foobar2 {
position: absolute;
left: 149px;
top: 1px;
clear: both;
}
#foobar3 {
position: absolute;
left: 32px;
top: 1px;
clear: both;
}
-->
</style>
<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="index3-03_">
<ul id="navbar"><li><a href="index.html" target="_self">HOME</a></li>
<li><a href="usage.html" target="_self">THIS IS BROKEN</a>
<ul>
<span id="foobar1"><a href="index.html" target="_self">HOME</a></span>
<span id="foobar2"><a href="usage.html" target="_self">THIS IS BROKEN</a></span>
<span id="foobar3"><a href="faq.html" target="_self">FAQ's</a></span>
<li><a href="parents.html" target="_self">PARENTS</a></li>
</ul>
</li>
<li> <a href="faq.html" target="_self">FAQ's</a></li>
</ul>
</div>
</body>
</html>
any help would be much appreciated I'm not sure if the title describes exactly what I mean, but here it goes. I'm working on this website: http://denartcc.org/d/ The menu along the top has images that change position when you hover over them. The thing that I'm trying to do is create something that looks like this site's menu: http://www.aopa.org/ Notice how hovering over one of the menu items reveals another blue bar that contains more links. This is what I'm trying to create. Unfortunately I'm stuck when it comes to comparing these side-by-side, and I just don't know how to create that secondary set of links. The code I'm using is below. CSS: Code: #amenu {
list-style: none;
padding: 0;
margin:auto 0 0 0;
width: 930px;
height: 30px;
background-color: black;
position: relative;
border-bottom:medium solid white;
float:left;
}
#amenu ul {
display: none;
position: absolute;
}
#amenu ul li {
}
#amenu li a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
.home {
width: 120px;
height: 30px;
background: url(../images/menu/home.png) no-repeat;
left: 20px;
top: 0px;
}
.airspace {
width: 163px;
height: 30px;
background: url(../images/menu/airspace.png) no-repeat;
left:160px;
top:0;
}
.community {
width: 174px;
height: 30px;
background: url(../images/menu/community.png) no-repeat;
left:343px;
top:0;
}
.controllers {
width: 195px;
height: 30px;
background: url(../images/menu/controllers.png) no-repeat;
left:537px;
top:0;
}
.pilots {
width: 174px;
height: 30px;
background: url(../images/menu/pilots.png) no-repeat;
left:752px;
top:0;
}
#amenu a:hover {
background-position: left bottom;
}
#amenu a:hover span{
display: block;
}
HTML Code: <div> <ul id="amenu"> <li><a href="#" class="home">Home<span></span></a></li> <li> <a href="#" class="airspace">Airspace<span></span></a> <ul> <li>ZDV Airports</li> <li>Preferred Routing</li> <li>Try Something New</li> </ul> </li> <li><a href="#" class="community">Community<span></span></a></li> <li><a href="#" class="controllers">Controllers<span></span></a></li> <li><a href="#" class="pilots">Pilots<span></span></a></li> </ul> </div> |
|||||||