|
CSS - Fix For Horizontal Drop Down Menu In Ie?
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... 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! 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 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. 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> Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item? I am trying to create a navigation menu for a page using images i have sliced in photoshop and I now need to put the images all on a 900px wide line and link them to the appropiate pages. When i put the images next to each other i end up with a gap. The only way I have found to solve the problem is to leave the img src all on the same line. I'm sure this isn't the best way to do it and it is throwing out the div below. Ideas anyone? Code: Code: Original - Code <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> Jake Hi, I have the following menu that is currently laid out with a table: http://www.ianarmstrong.com/menutest/ I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image. I need a way to handle the 5 different images, and have a mouseover effect as well. Could someone offer some direction on this problem? I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item? |
|||||||