|
CSS - More Dropdown / Flyout Menu Fun
Hi there, I'm working my way through html, css and web design at the moment, and looking at drop down menus.
Currently I'm looking at css only menus, I haven't delved into javascript yet. So I I've got a few questions regarding what I've currently got: html4strict Code: Original - html4strict 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello</title> <link type="text/css" rel="stylesheet" media="screen" href="default.css" /> </head> <body> <div id="navbar"> <ul> <li><a href="#">Main Page</a></li> <li><a href="#">About</a></li> <li><a class="dropmenu"><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Dreamweaver</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </a></li> <li><a class="dropmenu"><a href="#">Articles</a> <ul> <li><a href="#">3 column magic</a></li> <li><a href="#">Site layouts</a></li> <li><a href="#">Creating Navbars</a></li> </ul> </a></li> <li><a href="#">Links</a></li> </ul> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> css Code: Original - css Code @charset "utf-8"; /* CSS Document */ #navbar ul { padding: 0; margin: 0; list-style: none; background-color: #3F9; width: 120px; } #navbar li { position: relative; } #navbar li li { position: static; } #navbar ul ul { background-color: #7B5; top: 0; left: 120px; display: none; position: absolute; } #navbar a { text-decoration: none; text-align: center; display: block; padding: 5px 10px; } #navbar a.dropmenu { padding: 0; margin: 0; border: none; display: block; } #navbar li:hover ul, #navbar a.dropmenu:hover ul { display: block; } #navbar a:hover, #navbar li:hover { color: #000; background-color: #3CF; } #navbar li:hover li:hover { background-color: #F04; } @charset "utf-8"; So its currently a vertical flyout menu, I'll be looking at horizontal drop down ones soon. Regarding the last css rule, I was just experimenting with presentation and was wondering if I could make the second level of menus have a different hover background colour than that of the initial menu. Is it just something I've got wrong with the selector (#navbar li:hover li:hover)? The 2nd, more puzzling thing, is that you can see in the first menu, only the text comes up as a hyperlink (or clickable). In the second level menus, the whole area of the li (being an a element displayed in block mode) is clickable. I am pretty sure this is a result of setting the position property of the the li elements to relative. I have set the li elements to static (default) in the second menu, and as noted, they work fine (or more desirably). Why does changing the position property of the li to relative suddenly stop it from being clickable? The relative positioning is needed to correctly position the second level uls (menus), unless there is another way to do that. BTW Currently looking at it with ie7 at the moment. What's going on here? Lastly, I was hoping my a.dropmenu elements would let ie6 display the menu; sadly this doesn't seem to be happening. Again, any ideas what's gone wrong? Similar TutorialsHi, I am hoping someone can help me please. I am looking for some code (CSS, PHP or otherwise) to be able to create a drop down menu (with flyout) on mouseover of some pre-existing pictures. I have tried to take some codes which "sort of" do what I need but I'm unable to modify them to do what I need them to. It seems like the varying widths of the PNGs is a sticking point. At the minute I have a navigation bar consisting of 5 PNGs of same height but different widths. I had intended it to work so that when you click on these top links you are given a page for that section, and along the top of that page are "sub links". However, I have changed my mind and would like to keep the current images, but on rollover have a drop down menu appear with the different "sub links" instead of having them on the top of each page. For example I have a PNG which says "About Clan Wars". I would like a mouseover to show a Dropdown with flyout like: >What Is Clan Wars? >What are the rules ----> D Class Rules ----> C Class Rules >Clan Wars 1 ----> Fight Card ----> Pictures ----> Videos >Clan Wars 2 ----> Fight Card ----> Pictures ----> Videos I hope that makes sense to whoever is reading. Thank you Sean Hi there. I'm developing a website using Wordpress as the major CMS, it uses a navigation plugin called NAVT which makes dynamic navigation menus and allows you to nest some links under other links. Click here to see how it outputs the HTML. Basically it's a series of unordered lists inside other unordered lists, cluttered with various classes (none of them used by the plugin itself). So basically I want to turn that into a pure CSS only flyout/dropdown menus, I've seen code flying around but with all those classes that NAVT applies I'm struggling to adapt it. Has anyone done something similar to this? Cheers, the following code works in opera and i think mozilla, but in ie only the top menu flies-out. the other two (a div in a table, and a table in a div) don't work. Any idea how to amend the css so they do work. I have tried setting the z-index to various things, so i dont think that's it. ...waiting to fly Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
--><HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout2.css" />
<!--[if lte IE 6]>
<style>
.nav-head ul li a.hide, .nav-head ul li a:visited.hide {display:none;}
.nav-head ul li a:hover ul li a.hide {display:none;}
.nav-head ul li a:hover {color:#fcf; background:#36f;}
.nav-head ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;z-index:99;overflow:visible;}
.nav-head ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.nav-head ul li a:hover ul li a {display:fixed; background:#22e; color:#000;}
.nav-head ul li a:hover ul li a ul {visibility:hidden;}
.nav-head ul li a:hover ul li a:hover {background:#cc0; color:#0a0;}
.nav-head ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#955;}
</style>
<![endif]-->
</HEAD>
<BODY>
From code at <A HREF="http://www.cssplay.co.uk/menus/flyoutt.html">this site</A><BR>
<div class="nav-head">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
<!-- end 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->
<TABLE width='30%' bgcolor='red'>
<TR>
<TD>
<div class="nav-head">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
</TD>
</TR>
</TABLE>
<!-- end 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->
<div class="nav-head">
<TABLE bgcolor='yellow' width='250%' height='250%'>
<TR>
<TD>
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>
Hello, everyone. I'm a relative newcomer to CSS, and I decided I'd try and add a neat flyout menu to the new site I'm developing: www.mindwallpictures.com. As you'll notice, it works great in Firefox, but doesn't work at all in IE. Here is the CSS code from my site: Code:
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at (URL address blocked: See forum rules)
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
height:150px;
font-size:90%;
/* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background:#6b6b6b url(images/button.gif);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background:#6b6b6b url no-repeat right center;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#FFF;
text-indent:5px;
border:1px solid #6b6b6b;
border-width:1px 1px 1px 1px;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px;}
/* style the link hover */
* html .menu a:hover {color:#adbaad; background:#888d88; position:relative;}
.menu li:hover {position:relative;}
/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color:#adbaad; background:#888d88;}
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#adbaad; background:#888d88;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(transparent.gif);
}
/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}
/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
</style>
and here is the html that goes with it: Code:
<div class="menu">
<ul>
<li><a href="index.html">MindWall Home</a></li>
<li class="sub"><a href="#nogo">News</a>
<ul>
<li><a href="news/recent/index.html">Recent News</a></li>
<li><a href="news/archives/index.html">News Archives</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Films</a>
<ul>
<li><a href="films/rendezvous/index.html"><i>A Dreamer's Rendezvous</i></a></li>
<li><a href="films/millberg/index.html"><i>Millberg Apartments</i></a></li>
<li><a href="films/musicvids/index.html">Music Videos</a></li>
<li><a href="films/upcoming/index.html">Upcoming Projects</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Links</a>
<ul>
<li><a href="http://www.mooseheadfilms.com">Moosehead Studios</a></li>
<li class="sub"><a href="#nogo">Purdue</a>
<ul>
<li><a href="http://www.purdue.edu">University Home Page</a></li>
<li><a href="http://www.cla.purdue.edu/film-studies/">Film Studies Program</a></li>
<li><a href="http://purduefvsnewsletter.blogspot.com/">FVS Newsletter</a></li>
</ul>
</li>
<li><a href="http://www.imdb.com">Internet Movie Database</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">About Us</a>
<ul>
<li><a href="about/mindwall/index.html">About MindWall Pictures</a></li>
<li><a href="about/awards/index.html">Awards & Recognition</a></li>
<li><a href="about/crewbio/index.html">Crew Biography</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Contact Us</a>
<ul>
<li><a href="contact/mindwall/index.html">Contact MindWall</a></li>
<li><a href="contact/crew/index.html">Contact film crew</a></li>
</ul>
</li>
</ul>
</div>
It has been altered (by myself, the n00b) from the original code found at CSSplay: http://www.cssplay.co.uk/menus/flyout_4level.html It's bugging the crap out of me, and the guy wants the site done as early as next week. This is the one thing holding me back, since people...actually...use IE. -_- Poor souls. Any help would be greatly appreciated! Thanks. I changed over all my CSS flyout menus from the CSSPlay method to the whatever:hover method. It's working great. I've just got a minor, but annoying, problem that occurs in IE (6 & 7 tested). URL 1 URL 2 Check out the left-side navigation menus on those two pages. Obviously they're different files, but the code is exactly the same for the menus (except the path for the links, of course). The pages even use the same stylesheet. So why, then, does the menu flutter when you hover over the "Our Dogs" <li> on the base level menu, but not move a pixel on the /dogs/ level menu? Here's the path to the stylesheet: Stylesheet 1 Hello I hope somebody can help me. I have a newly designed home page for my website, which looks fine now in pretty well all browsers - but I've just started getting feedback from people looking at the site with ie, and they say that the flyout menu on the left of the page is obscured by the content in the centre column when it does its flying out thing. I've tried giving the menu elements z-index:100; but it doesn't seem to have made any difference. I would be really appreciative if anyone can help - it is even more difficult to work out as I don't have access to a machine with ie as a browser, and remote screen shots don't show up the problem... This is the page: http://www.independentliving.co.uk/index.shtml And this is the part of the style sheet for the menu: .menu { width:150px; position:relative; margin:0; font-size:11px; margin:0px 0; z-index:100; } .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#003366; width:150px; height:25px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#003366 url(nav.gif); line-height:19px; font-size:11px; z-index:100; } .menu ul { padding:0; margin:0; list-style-type: none; z-index:100; } .menu ul li { float:left; margin-right:1px; position:relative; z-index:100; } .menu ul li ul { display:none; } /* specific to non IE browsers */ .menu ul li:hover a { color:#996600; background:#cccccc; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul { display:block; position:absolute; top:0; left:150px; width:150px; z-index:100; } .menu ul li:hover ul li a.hide { background:#ffffff; color:#003366; font-size:11px; text-decoration:none; } .menu ul li:hover ul li:hover a.hide { width:150px; font-size:11px; text-decoration:none; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; background:#cccccc; color:#996600; width:200px; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li a:hover { background:#dfc184; color:#666666; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul { display:block; position:absolute; left:151px; top:0; color:#003366; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul li a { display:block; width:200px; background:#dfc184; color:#003366; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul li a:hover { background:#bd8d5e; color:#fff; font-size:11px; text-decoration:none; z-index:100; } Any ideas gratefully received! Thanks Frances I was wondering if anyone knows of any tutorials or resources for creating a menu system using css. The problem I have is that when I change the submenu's which are divs to display, they pop into place. I want to change this aspect and assume there is a javascript solution to make the display slow down, but have not been able to find one on this forum or using google. Perhaps a pointer or two? I have a vertical flyout menu setup on the left side of the page with the associated links arranged in vertical columns next to each menu selection. It is working fine 99% of the time but I am getting some reports that the vertical columns do not touch the main selection column so that when the user moves the cursor to the right to go to the selection list there is a break between the columns and the column disappears before a selection can be made. I have not been able to duplicate this on my IE8 and it works fine with Firefox. This makes it rather hard to trouble shoot so I am hoping someone else has had this problem and know what I am talking about. It seems to only happen to users with IE7 and IE8 but not most IE8 users. Is there perhaps some code I need to add to the CSS file that will solve this problem? THX 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..??? First I am using Dreamweaver MX2004. I am still new to CSS, have not used it much. Still using tables (yeah i know) for the layout. Mainly because when I've tried positioning in the past, IE doesn't display it right. Layers don't seem to work for me! What I'd like to know is: can I use CSS (the son of suckerfish dropdowns) for my drop down menu in a separate HTML file that would be saved as a library item? I'd like the nav separate so I can update it easily. Should I also use a separate CSS file that would only be associated with the nav? Is necessary to have an external css sheet, if it only applys to this nav? The nav would get dropped into a table row under the top banner. My issue is: will it get positioned right ? And will it view ok in IE??? Hope I explained this right. I fear that what I have already coded, would get messed up if I do this! But due to search engine optimization, I'd like to avoid a fully functioning javascript dropdown. If you have a better suggestion/usage for a dropdown horizontal nav, I'd appreciate your ideas! Thanks for the advice! Valerie Hi all -- I've used plenty of CSS in the past, but I'm currently working on a dropdown menu that is more challenging than I had anticipated. A few things I need to fix that I just cannot figure out: 1) The last <li> in the dropdown seems to be overlapping my border 2) I want to put at least 10px of padding on the left hand side of the dropdown menu 3) I need to turn the carrot in front of each menu item to #ff9900 4) Whenever I try to increase or decrease the space between menu items, it seems as though white lines appear between my menu items. In the interest of full disclosure, I found this CSS out somewhere on the web, and I've been trying to customize it since I didn't feel I had the knowledge to build it from scratch. Normally, I'd prefer to create something on my own, but limited time and knowledge prevented me from doing so this time around. Attached below are my HTML and CSS code. I tried to post a link, but the forum will not allow me. If you can offer any assistance, I would greatly appreciate it. Thanks in advance for your time! HTML CODE: 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>Flyouts Page</title>
<link rel="stylesheet" type="text/css" href="menu/menu_style.css" />
<body>
<TABLE cellSpacing=0 cellPadding=0 width=610 border=0>
<TBODY>
<TR>
<TD width="200" valign="top">
<div id="outside">
<ul id="navigation-1">
<li><IMG src="test_graphic.jpg" border=0></A>
<ul class="navigation-2">
<li><a href="" title="Test 1" target="_self" ><strong>> Test 1</strong></a></li>
<li><a href="" title="Test 2" target="_self" ><strong>> Test 2</strong></a></li>
<li><a href="" title="Test 3" target="_self" ><strong>> Test 3</strong></a></li>
<li><a href="" title="Test 4" target="_self" ><strong>> Test 4</strong></a></li>
<li><a href="" title="Test 5" target="_self" ><strong>> Test 5</strong></a></li>
<li><a href="" title="Test 6" target="_self" ><strong>> Test 6</strong></a></li>
<li><a href="" title="Test 7" target="_self" ><strong>> Test 7</strong></a></li>
</ul>
</li>
</ul>
</div></TD>
</TR>
</TBODY></TABLE>
</body>
</html>
CSS CODE: Code: #outside{
border:0px solid #000000;
background:#ffffff;
}
#navigation-1 {
padding:0px 0;
margin:0px;
list-style:none;
width:200px;
height:107px;
border-top:0px solid #000000;
border-bottom:0px solid #000000;
font:normal 8pt Verdana, Arial, Helvetica;
background:#ffffff;
}
#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:200px;
background:#ffffff;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
padding:4px 0;
display:block;
text-align:left;
text-decoration:none;
background:#ebf7f3;
color:#000000;
width:195px;
background:#ffffff;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:left;
text-decoration:none;
background:#ffffff;
color:#000000;
width:195px;
}
#navigation-1 li ul.navigation-2 {
margin:0;
padding:0px 0px 0;
list-style:none;
display:none;
background:#ebf7f3;
width:195px;
position:absolute;
top:110px;
left:0px;
border: 1px solid #cbccce;
}
#navigation-1 li:hover ul.navigation-2 {
display:block;
width:198px;
}
/*the individual menu items*/
#navigation-1 li ul.navigation-2 li {
width:170px;
height:18px;
clear:left;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#ebf7f3;
padding:4px 0px -4px 5px;
width:170px;
border:none;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#ebf7f3;
padding: 4px 0px 0-4px 5px;
width:170px;
position:relative;
z-index:1000;
color:#cbccce;
}
#navigation-1 li ul.navigation-2 li a span {
position:absolute;
top:0;
left:132px;
font-size:10pt;
color:#000000;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
position:absolute;
top:0;
left:190px;
font-size:10pt;
color:#cbccce;
}
.carrot{
color:#ff9900;
}
Hi, on my site http://www.mattmdesign.com, sometimes when you mouseover the portfolio the menu appears in the wrong spot. someone also said that it is appearing on the left side of the page everytime with mozilla 1.0 Does anyone know how I can make it appear right under the porfolio link every time? Thanks, Matt Hi I am trying to create a drop down menu on my existing design. Code: http://dfinnema.com/help How would I add a drop down to Page 3 menu that looks like this: Code: http://dfinnema.com/help/images/dropdown_active.png Without the menu: Code: http://dfinnema.com/help/images/dropdown.png Any Ideas / Suggestions? :| Hi yall, i'm a quite newbie on css and i'm having an issue with my drop menu on the site i'm trying to do , with wordpress, multi level menu...i started from the code generated by the css generator and tried to fit it to my meeds. but, i can't control the li li menu (categories), i want it to appear exactly at the end of the li categories. 2) the second issue is that i'm trying to add a margin to the main ul because it's to near from the top. can someone help me plz? here my code Code: #suckerfishnav,
#suckerfishnav ul {
float: left;
height: 2.98em;
width: 960px;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
margin: 0.1em 0.1em 0.1em 0.1em;
padding: 0;
}
#suckerfishnav a {
display: block;
color: #7c6240;
text-decoration: none;
padding-top: 0.25em;
padding-right: 0.7em;
padding-bottom: 0.1em;
padding-left: 0.2em;
}
#suckerfishnav li {
float: left;
padding: 0;
width: 13em;
height: 2.8em;
}
#suckerfishnav ul {
position: absolute;
left: -999em;
height: auto;
margin-left: 2em;
line-height: 1;
z-index: 500;
}
#suckerfishnav li li {
width: 9.6em;
border: solid #eda;
border-width: 1px;
padding-top;
10px;
}
#suckerfishnav li ul a {
width: 9.8em;
}
#suckerfishnav li ul ul {
margin: -0.20em 0 0 9.8em;
}
#suckerfishnav li ul {
position: absolute;
left: -999em;
height: auto;
width: 9.9em;
w\idth: 9.8em;
font-weight: normal;
border-width: 0.20em;
margin: 0;
z-index: 500;
}
#suckerfishnav li ul a {
width: 9.9em;
w\idth: 9.8em;
}
#suckerfishnav li:hover ul ul,
#suckerfishnav li:hover ul ul ul,
#suckerfishnav li.sfhover ul ul,
#suckerfishnav li.sfhover ul ul ul {
left: -999em;
}
#suckerfishnav li:hover ul,
#suckerfishnav li li:hover ul,
#suckerfishnav li li li:hover ul,
#suckerfishnav li.sfhover ul,
#suckerfishnav li li.sfhover ul,
#suckerfishnav li li li.sfhover ul {
left: auto;
}
#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
background: #eda;
width: 9.5em;
w\idth: 9.4em;
}
Hey all, having a bit of trouble getting my drop down menu to display properly. It's modeled after the suckerfish menu, only modded a bit. Here's the site...hover over 'machines' to see what i'm talking about (have to use FF, i haven't added the JS for IE yet). The drop down is adopting the rollovers from the mainmenu, and I don't know what to change to make 'em different. Here's the CSS for the menu: Code:
#mainmenu {
width:780px;
height:41px;
margin:auto;
position:relative;
}
#mainmenu li.navigation {
width:78px;
height:41px;
float:left;
text-align:center;
background:#B8A488 url(images/mainmenu_roll.gif) no-repeat;
}
#mainmenu li.navigation a{
background:#66563D url(images/mainmenu_off.gif) no-repeat;
display:block;
text-decoration:none;
color:#F4F1E5;
height:31px;
padding-top:10px;
}
#mainmenu li.navigation a:hover {
background:transparent;
color:#66563D;
}
#mainmenu li#home {
background-image:url(images/home_roll.gif);
}
#mainmenu li#home a{
background-image:url(images/home_off.gif);
}
#mainmenu li#home a:hover {
background:transparent;
}
#mainmenu li#contact {
background-image:url(images/contact_roll.gif);
}
#mainmenu li#contact a {
background-image:url(images/mainmenu_off.gif);
}
#mainmenu li#contact a:hover {
background:transparent;
}
/* BEGIN DROP DOWN MENU */
li ul {
display: none;
position: absolute;
top: 1px;
margin-left:-2px;
background-color:#B8A488;
border-left:1px solid #66563D;
border-bottom:1px solid #66563D;
padding:2px;
z-index:500;
}
* html li ul {
top:26px;
}
/*
li ul li {
padding:0;
}
*/
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{
display: block;
}
Thanks! i'm having a problem with a couple attributes for my CSS dropdowns. view the page here (both CSS and XHTML are on the same page) specifically my .hoverBase:hover .hoverLaunch {} class which reads as such: Code: .hoverBase:hover .hoverLaunch {
display:block;
position:absolute;
top:15px;
left:-3px;
width:70px;
border:3px solid #000000;
text-align: center;
z-index: 30;
}
the problem is that IE6 will not display the .hoverLaunch class like FireBird does, in fact, it does not display at all. Another awesome feature of IE6 is that the :hover i have applied on the .hoverbase does not work either. Any help is appreciated. Thanks in advance. I have been hunting around for an all CSS drop down menu that when you hover on the heading the menu expands down to show the heading 1 menu and if you hovered over the next menu item this expands to show that menu list instead a bit like the 'be the first to apply' on the right of this page, http://www.fish4.co.uk/iad/jobs search for say 'admin' just to get to the results page as this is where the menu is. the look is not important but the function is BUT.... i wanted to have many links in the drop down not just the one as in this example. this is the extracted code i have got so far that does what you see on this page. Code:
<style>
#rightcolumn {
float: right;
width: 170px;
text-align: center;
}
#leftcolumn {
float: left;
width: 545px;
padding: 10px;
}
h3#bftahead {
text-align:left;
color:#c1001f;
font-size:1.5em;
font-weight:bold;
margin:23px 0px 10px 0px;
}
#bfta h4 {
font-size:1.1em;
margin:0em;
padding:0.4em 0.1em 0.6em 0.1em
}
#bfta {
width:170px;
text-align:left;
padding:0px;
margin:0px 0px 10px 0px;
list-style-type:none;
height:47em;
overflow:hidden;
background:#ffffff url('images/bfta-background.jpg') bottom no-repeat;
border-bottom:1px solid #cfcfcf;
}
#bfta li {float:left;width:100%;}
#bfta li a {
padding:0.5em 3%;
display:block;
width:94%;
height:1.95em;
margin-bottom:-0.4em;
overflow:hidden;
text-decoration:none;
background:transparent url('images/bfta-background.png') no-repeat;
color:#333333;
font-family:arial, sans-serif;
}
#bfta li a#last, #bfta li a:hover {height:24em;}
#bfta-whitebrand {list-style:none;margin:0em 0em 1em 1em;padding:0px;}
#bfta-whitebrand li {padding:0em 0.4em;}
</style>
<div id="leftcolumn">
<ul id="bfta">
<li>
<h4>a1</h4>
a1
</li>
<li><a href="a2">
<h4>a2</h4>
a2</a>
</li>
<li><a href="a3">
<h4>a4</h4>
a3</a>
</li>
</ul>
</div>
Link: http://cemtec.quicksites.co.za CSS: http://cemtec.quicksites.co.za/wp-c...grass/style.css Hi This dropdown menu on Products works in Firefox but when I goto IE7 I dont see anything at all. I have tried changing the div Class to a Div Id also without any change. Anybody have any clues to what I have todo? L. My second level menu items are not showing in IE, but show fine in firefox. Code: #menucontainer {
width: 100%;
clear: both;
position: relative;
text-align: center;
margin: 0 auto;
padding-left:0px;
padding-top:35px;
padding-bottom:15px; }
#menu {
text-align: center;
display:table;
padding:5;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
background: #eee;
}
#menu ul {
font: small-caps bold 12px/15px "lucida grande", tahoma, arial, verdana, sans-serif;
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}
#menu a {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb
margin: 0;
padding: 2px 3px;
}
#menu a {
color: #C7C7C7;
background: #000;
text-transform: small-caps;
}
#menu a:hover {
color: #fff;
background: #000000;
}
/* ********* secondary links ************** */
#menu li li a {
color: #C7C7C7;
background: #292A2C;
text-decoration: none;
}
#menu li li a:hover {
color: #FFF;
background: #292A2C;
}
#menu li:hover { z-index:1;}
#menu li {position: relative}
#menu ul ul {
position: absolute;
z-index:100;
left:0;
top:auto;
display:none;
}
div#menu ul ul,
div#menu ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(behavior.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
}
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}
</style>
<![endif]-->
|
|||||||