|
CSS - Only One Level Of Drop Down Menu Appearing In Horizontal Menu In Ie 6 And 7
Hi 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! Similar TutorialsHello: 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. 1. top and bottom images are collapsing, i cant get them to display correctly without filling the html with either breaks or text 2. I cant get the images submenuedivider and submenuemarker to display simultaneously when i hover the links in the list. 3. Right now my soltuion to not display the divider image below the last element in the list is through the code: <li><a style="background-image: none;" href="x.html">SOmething</a></li> </ul> However, this also causes the mrker to not be seen above the list element as well, which isn't exactly what I wanted to happen, so what do I do? I'm stuck The CSS: Code: .leftCol
{
width: 190px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 10px;
float: left;
}
.leftCol body {font-size:100%; color: #FFF;}
.leftCol h1 {font-size:1.1em; font-weight:bold; color: #FFF;}
.leftCol h2 {font-size:1.0em; color: #FFF;}
.leftCol h3 {font-size:1.0em; color: #FFF;}
.leftCol p {font-size:0.875em color: #FFF;}
.submenue
{
width: 188px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
float: left;
background-image: url(images/submenue/submenuefiller.jpg);
background-repeat: repeat-y;
text-indent:25px;
}
.submenue ul {list-style-type: none; margin: auto;}
.submenue ul a {padding-bottom: 10px; background: url(images/Submenue/submenuedivider.png); background-repeat: no-repeat; background-position: bottom; display: block; line-height: 25px; text-decoration: none; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #FFF;}
.submenue ul a:hover {background-image: url(images/Submenue/submenuemarker.jpg);}
.submenuetop
{
width: 188px;
hight: 54px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url(images/Submenue/top.jpg);
background-size: 100%;
background-repeat: no-repeat;
margin: 0;
float: left;
}
.submenuebottom
{
width: 188px;
hight: 60px;
background-image: url(images/Submenue/bottom.jpg);
background-position: left top;
background-repeat: no-repeat;
margin-top: 54;
float: left;
}
The HTML: Code: <div class="leftCol"> <div class="submenuetop"></br><h1>something</h1></div> <div class="submenue"> <ul> <h3>Listing</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3.html">5</a></li> </br> <h3>Produkt</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3">something</a></li> </ul> </div> <div class="submenuebottom"></br></br></br></br></div> </div> I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image. I would really like your help on this been trying to do it for weeks now!! Cheers 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. 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 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. I'm using the suggestions of those on here and using the http://www.dynamicsitesolutions.com...2/#relatedLinks menu (I'm a little confused over what the differences are but that's the least of my problems) What I want is a 2nd level drop down menu, but I'm clueless on how to go about it..??? 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;
}
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 */
Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: 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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page I'm trying to add an extra level to a pop-out menu but can't get the third level to hide and display. The jscript function is suckerfish the css is a little here a little there... CSS: Code:
<style type="text/css">
/* ==== STYLES FOR MAIN PART OF THE MENU ==== */
#menu {
font-family: Verdana, Arial, sans-serif;
font-size: 100%;
width: 100px;
padding: 0px;
margin: 0px;
display:block;
}
#menu, #menu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#menu li ul ul {
margin: 0 0 0 0em;
}
#menu li {
float:left;
width:50px;
position:relative;
margin: 0px;
padding: 0px;
}
#menu a {
width:100px;
font-size: 80%;
color:#666666;
text-decoration: none;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
display: block;
}
#menu a:hover, #menu a:focus {
color: #000000;
background-color: #AAA;
}
/* === STYLES FOR THE MAIN MENU (LI's) === */
.mainitems{
display:block;
}
/* === STYLES FOR THE POP OUT MENUS === */
.popouts{
display: none;
width: 6em;
position: absolute;
top:0px;
left: 100%;
background-color: #EEFFCC;
}
.popouts li{
position:relative;
width: 100%;
}
.popouts li a{
display: block;
width: 100%;
text-indent: 3px;
}
.popouts li a:hover{
background-color: yellow;
color: black;
}
#menu li:hover ul, #menu li.over ul, #menu li li:hover ul, #menu li li.over ul{
display:block;
}
I've tried a couple of different things as such: Code:
/* === STYLES FOR THE POP OUT MENUS === */
.popouts{
display: none;
width: 6em;
position: absolute;
top:0px;
left: 100%;
background-color: #EEFFCC;
}
.popouts li li{
position:relative;
width: 100%;
}
.popouts li li a{
display: block;
width: 100%;
text-indent: 3px;
}
.popouts li li a:hover{
background-color: yellow;
color: black;
}
I've tried .popouts li li ul ul{ and even tried adding a seperate class for the third level. Can some one please help me. If you need a link to the page I'm working on, here you go. It's the last link "Links" in the menu where I'm trying to add the third level. Thanks for any help you can offer. John Hi I thought this would be a lot easier than it has turned out! I want to add a 4th side menu level [#subnav-col]. I don't know if i'm getting the css or the html wrong but I can't get it to work - I find it difficult to know how to do the CSS+html to a 4th level. The original HTML and CSS is here - would be grateful for some help. Many thanks HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-"><!-- InstanceBegin template="/Templates/template-content.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- InstanceBeginEditable name="meta" --> <title>General information</title> <!-- InstanceEndEditable --> <link type="text/css" href="/css/style.css" media="screen" rel="stylesheet"> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="/css/ie8.css" media="screen"> <![endif]--> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="/css/ie7.css" media="screen"> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="/css/ie6.css" media="screen"> <![endif]--> <link type="text/css" href="/css/print.css" media="print" rel="stylesheet"> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/actions.js"></script> <!-- InstanceBeginEditable name="extras" --><!-- InstanceEndEditable --> </head> <body> <div id="top"></div> <div id="container"> <div id="header"> <a class="accessLinks" href="#content" accesskey="[" tabindex="1">Skip to main content</a><span class="hidden"> | </span><a class="accessLinks" href="/accessibility.html" accesskey="0">Accessibility information</a> <a href="/" title="Go to home page" accesskey="1"><span class="site-title">Change change information </span><img src="/site-tools/img/header/logo.jpg" alt="" width="461" height="120" class="logo"></a><img src="/site-tools/img/header/header.jpg" alt="" width="509" height="120" class="header-bg"><a href="http://science.com" accesskey="/" title="services"><img src="img/header/header-icon-ng.jpg" width="223" height="30" alt="" class="vt-icon"></a> </div> <!-- end header --> <div id="main-nav"> <!-- begin menu include --> <ul> <li><a href="/" tabindex="2">Home</a></li><li><a href="/top/" tabindex="3">Science</a></li><li><a href="/adaptation/" tabindex="4">Physical impacts</a></li><li><a href="/carbon/" tabindex="5">reports</a></li><li><a href="/reducing/" tabindex="6">Doing our fair share</a></li><li class="current"><a href="/trading-scheme/" tabindex="7">trading</a></li></ul><div id="site-search"> <form action="http://search./search" method="get" name="siteSearch"> <fieldset> <legend>Site search</legend> <label for="searchBox">Search</label> <input name="q" type="text" id="searchBox"> <input name="btnG" type="submit" value="Search" class="button"> <input type="hidden" name="site" value="Change"> <input type="hidden" name="client" value="Change"> <input type="hidden" name="proxystylesheet" value="Change"> <input type="hidden" name="output" value="xml_no_dtd"> </fieldset> </form> </div><!-- end site-search --> </div> <!-- end main-nav --> <div id="content-wrapper-2col"> <div id="subnav-col"><!-- InstanceBeginEditable name="navigation" --> <h2><a href="/delay/participating/">Participating in the ETS</a></h2> <ul> <li><a href="/delay/participating/apples/">Apples</a></li> <li><a href="/delay/participating/oranges/">Oranges</a></li> <li><a href="/delay/participating/bananas/">Bananas</a></li> <li><a href="/delay/participating/Cherries/">Cherries</a></li> <li><a href="/delay/participating/grapes/">Grapes</a> <ul> <li><a href="/delay/participating/industry/obligation/">Obligations</a></li> <li><a href="/delay/participating/industry/allocation/">Allocation</a> <ul> <li><a href="/delay/participating/industry/allocation/eligible-activities/">Eligible activities</a></li> <li><a href="/delay/participating/industry/allocation/before-applying/">Before applying</a></li> <li><a href="/delay/participating/industry/allocation/calculators/">Calculators</a></li> <li><a href="/delay/participating/industry/allocation/how-it-works/">How it works</a></li> <li><a href="/delay/participating/industry/allocation/faq.html">Application FAQs</a></li> </ul> </li> <li><a href="/delay/participating/industry/call-for-data/">Call for data</a></li> <li><a href="/delay/participating/industry/faq.html">FAQs</a></li> </ul> </li> <li><a href="/delay/participating/fuels/">fuels</a></li> <li><a href="/delay/participating/synthetic/">Synthetic</a></li> <li><a href="/delay/participating/waste/">Waste</a></li> </ul> <!-- InstanceEndEditable --></div> <!-- end subnav-col --> <div id="content-col"> <div id="breadcrumbs"> <p><span class="youarehere">You are he </span><!-- InstanceBeginEditable name="crumbs" --><a href="/trading/"> trading</a><a href="#"></a> ><!-- InstanceEndEditable --></p> </div> <!-- end breadcrumbs --> <a name="content"></a><!-- InstanceBeginEditable name="content" --> <h1>About allocations </h1> <p>Financial assistance to reduce the impact of the <a href="/scheme/about/basics.html"> Some sectors by providing them with <a href="/scheme/about/emission-units.html"> Units (Us)</a>. This compensates eligible businesses for increased energy and fuel costs under the ETS and will help businesses make the necessary changes to reduce their pricing.</p> <p> There are three main groups who are eligible for allocation: </p> <ul> <li>firms whose activities are intensive and who are exposed </li> <li>fishing, and</li> <li> forestry. </li> </ul> <!-- InstanceEndEditable --></div> <!-- end content-col --> </div> <!-- end content-wrapper-2col --> <div class="clear"></div> <div id="footer"> <div id="-info"><a href="http://www.../" title="Visit the website"><img src="/site-tools/img/-logo.gif" width="211" height="57" alt=" logo"></a> </div> <!-- end -info --> <div id="call-tools"> <div id="call"> </div> <!-- end call --> <div class="clear"></div> <div id="tools"> <ul> <li><a href="/sitemap.html" accesskey="2">Site map</a></li> <li><a href="/copyright.html">Copyright</a></li> <li><a href="/disclaimer.html">Disclaimer</a></li> <li><a href="/accessibility.html#accesskeys" accesskey="0">Accessibility</a></li> <li><a href="/privacy-policy.html">Privacy policy</a></li> <li><a href="/glossary.html">Glossary</a></li> <li class="last"><a href="/contact-us.html" accesskey="9">Contact us</a></li> </ul> </div> <!-- end tools --> </div> <!-- end call-tools --> </div> <!-- end footer --> <div class="clear"></div> </div> <!-- end container --> </body> <!-- InstanceEnd --></html> CSS #subnav-col Code: /* ----- subnav (left-hand) column ----- */ #subnav-col { float: left; width: 233px; border-top: 1px solid #cacec2; } #subnav-col h2 { font-weight: normal; font-size: 1.4em; color: #234d1b; margin: 0; padding: 4px 13px 4px 13px; line-height: 1.2; background-color: #eeefeb; border-bottom: 1px solid #cacec2; } #subnav-col h2 a:link, #subnav-col h2 a:visited { color: #234d1b; text-decoration: none; } #subnav-col h2 a:hover { color: #234d1b; text-decoration: underline; } #subnav-col ul { margin: 0; padding: 0; } #subnav-col ul li { margin: 0; padding: 0; list-style-type: none; font-weight: normal; font-size: 1.2em; color: #234d1b; } #subnav-col ul li ul li, #subnav-col ul li ul li ul li { font-size: 100%; font-weight: normal; } #subnav-col ul li a:link, #subnav-col ul li a:visited { margin: 0; padding: 5px 13px 4px 13px; color: #234d1b; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet.gif) no-repeat 0 6px; } #subnav-col ul li a:hover { margin: 0; padding: 5px 13px 4px 13px; color: #000; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet-current.gif) no-repeat 0 6px; } #subnav-col ul li.current a:link, #subnav-col ul li.current a:visited, #subnav-col ul li.current a:hover { margin: 0; padding: 5px 13px 4px 13px; color: #000; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet-current.gif) no-repeat 0 6px; } #subnav-col ul li.parent a:link, #subnav-col ul li.parent a:visited, #subnav-col ul li.parent a:hover { margin: 0; padding: 5px 13px 4px 13px; color: #000; display: block; text-decoration: none; border-bottom: 1px solid #dcdfd7; background: #fff url(../img/bullet-parent.gif) no-repeat 0 6px; } #subnav-col ul li ul li a:link, #subnav-col ul li ul li a:visited, #subnav-col ul li.parent ul li a:link, #subnav-col ul li.parent ul li a:visited { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet.gif) no-repeat 13px 6px; color: #234d1b; } #subnav-col ul li ul li a:hover, #subnav-col ul li.parent ul li a:hover { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px; color: #000; } #subnav-col ul li ul li.current a:link, #subnav-col ul li ul li.current a:visited, #subnav-col ul li ul li.current a:hover, #subnav-col ul li.parent ul li.current a:link, #subnav-col ul li.parent ul li.current a:visited, #subnav-col ul li.parent ul li.current a:hover { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px; color: #000; } #subnav-col ul li ul li a:link, #subnav-col ul li ul li a:visited, #subnav-col ul li ul li a:hover { padding: 5px 13px 4px 27px; } #subnav-col ul li ul li.parent a:link, #subnav-col ul li ul li.parent a:visited, #subnav-col ul li ul li.parent a:hover, #subnav-col ul li.parent ul li.parent a:link, #subnav-col ul li.parent ul li.parent a:visited, #subnav-col ul li.parent ul li.parent a:hover { padding: 5px 13px 4px 27px; background: #fff url(../img/bullet-parent.gif) no-repeat 13px 6px; color: #000; } #subnav-col ul li ul li ul li a:link, #subnav-col ul li ul li ul li a:visited, #subnav-col ul li.parent ul li ul li a:link, #subnav-col ul li.parent ul li ul li a:visited, #subnav-col ul li ul li.parent ul li a:link, #subnav-col ul li ul li.parent ul li a:visited, #subnav-col ul li.parent ul li.parent ul li a:link, #subnav-col ul li.parent ul li.parent ul li a:visited, #subnav-col ul li ul li.current ul li a:link, #subnav-col ul li ul li.current ul li a:visited { padding: 5px 13px 4px 40px; background: #fff url(../img/bullet.gif) no-repeat 27px 6px; color: #234d1b; } #subnav-col ul li ul li ul li a:hover, #subnav-col ul li.parent ul li ul li a:hover, #subnav-col ul li ul li.parent ul li a:hover, #subnav-col ul li.parent ul li.parent ul li a:hover { padding: 5px 13px 4px 40px; background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px; color: #000; } #current a:link, #subnav-col ul li ul li ul li.current a:visited, #subnav-col ul li ul li ul li.current a:hover, #subnav-col ul li.parent ul li ul li.current a:link, #subnav-col ul li.parent ul li ul li.current a:visited, #subnav-col ul li.parent ul li ul li.current a:hover, #subnav-col ul li ul li.parent ul li.current a:link, #subnav-col ul li ul li.parent ul li.current a:visited, #subnav-col ul li ul li.parent ul li.current a:hover, #subnav-col ul li.parent ul li.parent ul li.current a:link, #subnav-col ul li.parent ul li.parent ul li.current a:visited, #subnav-col ul li.parent ul li.parent ul li.current a:hover { padding: 5px 13px 4px 40px; background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px; color: #000; } /* --- blocks of content in subnav column --- */ /* subnav column links */ #subnav-col .related-links-box ul a:link, #subnav-col .highlight-box p a:link, #subnav-col .highlight-box ul a:link { color: #004161; font-weight: bold; text-decoration:none; } #subnav-col .related-links-box ul a:visited, #subnav-col .highlight-box p a:visited, #subnav-col .highlight-box ul a:visited { color:#336781; font-weight: bold; text-decoration:none; } #subnav-col .related-links-box ul a:hover, #subnav-col .highlight-box p a:hover, #subnav-col .highlight-box ul a:hover { color: #004161; font-weight: bold; text-decoration:underline; } /* related links box - subnav column */ #subnav-col .related-links-box { width: 233px; background-color: #f6f7f5; margin: 20px 0 20px 0; padding: 0; border-top: 1px solid #cacec2; } #subnav-col .related-links-box h2, #subnav-col .related-links-box h3, #subnav-col .related-links-box h4, #subnav-col .related-links-box h5, #subnav-col .related-links-box h6 { font-weight: normal; font-size: 1.4em; color: #004161; margin: 0; padding: 3px 13px 4px 13px; line-height: 1.2; background-color: #eeefeb; border-bottom: 1px solid #cacec2; } #subnav-col .related-links-box h2 a:link, #subnav-col .related-links-box h2 a:visited, #subnav-col .related-links-box h3 a:link, #subnav-col .related-links-box h3 a:visited, #subnav-col .related-links-box h4 a:link, #subnav-col .related-links-box h4 a:visited, #subnav-col .related-links-box h5 a:link, #subnav-col .related-links-box h5 a:visited, #subnav-col .related-links-box h6 a:link, #subnav-col .related-links-box h6 a:visited { color: #004161; text-decoration: none; } #subnav-col .related-links-box h2 a:hover, #subnav-col .related-links-box h3 a:hover, #subnav-col .related-links-box h4 a:hover, #subnav-col .related-links-box h5 a:hover, #subnav-col .related-links-box h6 a:hover { color: #004161; text-decoration: underline; } #subnav-col .related-links-box ul { margin: 11px 0 0 0; padding: 0 13px; } #subnav-col .related-links-box ul li { font-size: 1.1em; margin: 0; padding: 0 0 12px 14px; line-height: 1.2; list-style-type: none; background: url(../img/bullet.gif) no-repeat 0 2px; font-weight: normal; } #subnav-col .related-links-box ul li a:link { padding: 0; border-bottom: none; background: none; } #subnav-col .related-links-box ul li a:visited { padding: 0; border-bottom: none; background: none; } #subnav-col .related-links-box ul li a:hover { padding: 0; border-bottom: none; background: none; }
I'm having trouble writing CSS for a nav menu that drops down to four levels. I'm able to drop down to three but I'm having a tough time with the fourth level. Please help. My CSS: /* style the top level hover */ .menu a:hover, .menu ul ul a:hover { color:#3d4058; background:#ffffff; } .menu :hover > a, .menu ul ul :hover > a { color:#3d4058; background:#ffffff; } /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul { visibility:visible; } /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul { visibility:hidden; } /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul { visibility:visible; } /* make the 4th level hidden */ .menu ul :hover ul :hover ul ul { visibility:hidden; } /* make the 4th level visible */ .menu ul ul li:hover ul ul ul, .menu ul a:hover ul ul ul { visibility:visible; } My javascript pop-up menu is appearing behind my divs. Any idea how to fix this? http://absolute-design.net/websites/GISD/test2.html Thanks! Hey there again! I have been at it ALLLLLLLLLLLL day, trying to figure out this blasted css menu to work in IE6!!! It works fine in FF but dosnt seem to like IE6 and was wondering if someone could please help me figure out the problem The first dropdown block ( <ul class="nav"> ) works fine but the second block ( <ul class="sub"> ) inside the first block ( <ul class="nav"> ) doesn't show properly in IE6!! Here is a screen shot of my problem: Here is my css: PHP Code: .navbar :hover ul.nav { padding:0; margin:0; left:0; top:40px; width:136px; z-index:604; background-color:#333333; } .navbar :hover ul.nav li a { display:block; height:24px; width:136px;} .navbar :hover ul.nav li a:hover {background:#ad8d12;} .navbar :hover ul.nav :hover ul.sub{ padding:0; margin:0; left:104px; top:-4px; width:200px; z-index:606; background-color:#333333;} /* keep the 'next' level invisible by placing it off screen. */ .navbar ul.nav, .navbar :hover ul.nav ul.sub {position:absolute; left:-9999px;} Here is my HTML code: PHP Code: <ul class="navbar"> <li><a href="#">Link<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="nav"> <li><a href="#">Link2</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link2<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="#">Link3</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link3</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> Thanks a million for even reading up to here I have one issue left in this context menu: www.webfletch.com/sharing (( Make Sure You Right Click On The Page )) The issue is in Internet Explorer, when you click on the sub-menu or one of the links in the sub-menu. Everything works fine at that point, but when you right-click to bring up the context menu again, the sub-menu comes up showing. Because technically, the css didn't grab the mouseout (Or whatever the opposite of "hover" is.) I attempted to fix this with javascript by placing different variations of different scripts all over the code that made the sub-menu style.display = 'none' However, the javascript made the code permenant. Once it was executed, the sub-menu never showed back up again. I guess javascript out-trumps the "hover" attribute of CSS. Any thoughts? I working on a CSS to display a round-shouldered-tab menu. My result is acceptable: http://rickduley.webs.com/roundShoulderTabMenu.jpg except for the fact that the tabs are set below the menuBar on which the are supposed to display. I have run out of ideas. Would someone please set me on the right path? Thanks. P.S.: the code is at http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb - you have to delete the 'dot key gee bee' suffix. |
|||||||