|
CSS - Menu Dropdown Placement Incorrect
hello
i have managed to get a working menu where i want it and have managed to have a fixed header and footer. however, i have a problem when the main page scrolls the dropdown menu seems to scroll with it. instead of the dropdown being below the heading where it normally is, if i scroll the page the header and footer stay where they are but if i click the menu heading again, the dropdown is halfway down the page. i have attached css and the correct and incorrect screenshots to give you an idea if my outline is fuzzy. i would be grateful if someone could tell me where i am going wrong? i am only learning css and would be grateful for any advice. many thanks CSS CODE Code: padding: 0px;
font-family: Arial;
}
/* Don't touch */
ul#jmenu
{
margin: 0px;
padding: 0px;
list-style: none;
}
ul#jmenu li
{
float: left;
margin: 0px;
padding: 0px;
//width: 1px; /* ie */
//vertical-align: bottom; /* ie */
}
ul#jmenu li a
{
display: block;
white-space: nowrap;
}
ul#jmenu li ul
{
display: none;
position: absolute;
margin: 0px;
padding: 0px;
list-style: none;
zoom: 1; /* ie */
}
ul#jmenu li ul li
{
float: none;
}
/* Styling starts here */
ul#jmenu
{
margin-top:80px;
width: 100%;
height: 40px;
background: #3f4a58 url('../images/menu-bg.gif') repeat-x left top;
}
ul#jmenu li
{
background: url('../images/separator.gif') no-repeat right center;
padding: 0px 10px;
}
ul#jmenu li a:link, ul#jmenu li a:visited
{
padding: 0px 10px;
height: 40px;
line-height: 40px;
color: #e4ecf6;
font-size: 13px;
text-decoration: none;
background: none;
}
ul#jmenu li a:hover
{
color: #ffffff;
background: #3f4a58 url('../images/menu-bg.gif') repeat-x left bottom;
margin-top:0px;
}
ul#jmenu ul
{
background-color: #3f4a58;
border-left: 1px solid #7a8087;
}
ul#jmenu li ul li
{
padding: 0px;
background: url('../images/sub-separator.gif') repeat-x left bottom;
}
ul#jmenu li ul li a:link, ul#jmenu li ul li a:visited
{
;
min-width: 100px;
//width: 100px; /* ie */
font-size: 12px;
height: 30px;
line-height: 30px;
}
ul#jmenu li ul li a:hover
{
background: #3f4a58 url('../images/menu-bg.gif') repeat-x left top;
}
#header {
position:fixed;
width:100%;
left:0px;
top:0px;
height: 80px;
background: #808080 url(../../images/logo.jpg) no-repeat left center;
}
#logo {
/*background-image:url(../../images/logo.jpg) no-repeat left;*/
}
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#808080;
border-top:1px solid #333333;
}
.footertext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin:10px;
display:block;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
#main{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height:100%;
margin-top:25px;
}
#main p {
margin-left:20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
HTML CODE Code: <div id="header">
<ul id="jmenu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Requests</a>
<ul>
<li><a href="#">Item 2-1</a></li>
<li><a href="#">Item 2-2</a></li>
<li>
<a href="#">Item 2-3</a>
<ul>
<li><a href="#">Item 2-3-1</a></li>
<li>
<a href="#">Item 2-3-2</a>
<ul>
<li><a href="#">Item 2-3-2-1</a></li>
</ul>
</li>
<li><a href="#">Item 2-3-3</a></li>
</ul>
</li>
<li>
<a href="#">Item 2-4</a>
<ul>
<li><a href="#">Item 2-4-1</a></li>
<li><a href="#">Item 2-4-2</a></li>
<li><a href="#">Item 2-4-3</a></li>
</ul>
</li>
<li><a href="#">Item 2-5</a></li>
</ul>
</li>
<li><a href="#">Reports</a></li>
<li>
<a href="#">Control Panel</a>
<ul>
<li><a href="#">Item 4-1</a></li>
<li><a href="#">Item 4-2</a></li>
<li><a href="#">Item 4-3</a></li>
</ul>
</li>
<li>
<?php
echo $tNGs->getErrorMsg();
?><a href="<?php echo $logoutTransaction->getLogoutLink(); ?>">Logout</a></li>
</ul>
</div></div>
Similar TutorialsI'm aware that there are several threads addressing the issue of image placement, but I'm unable to find anything referencing the specific issue I'm having, so I figured I'd ask... Let me first say that I am a professional martial arts instructor, not a web developer. What I do know how to do is completely self-taught. Bearing that in mind, I've discovered a relatively minor issue with our site, and I'm curious as to input here. Blue Mountain Martial Arts You will notice two "bamboo sprigs" in the upper right and left hand corners of the page. It took me quite awhile to get these to the actual edge of the browser window, but it seems that what I did was almost too effective. When viewing yahoo's cache of the page the bamboo is still in the upper corners of the browser window, rather than still lined up with other page elements. Google's cache for some reason places the left bamboo in the middle of the page. This is also an issue when the browser window starts "small", and is then maximized. The images in that case do not re-align, and thus will stay where they originally loaded, which may be in the middle of the page. I'd like prospective martial arts students looking at our studio to be drawn in, rather than driven out by a malfunctioning website. Most of the time, the site works fine, but I'd like to make that 100%. Input...? What should I change to have the images load on the edge of the screen, but reposition themselves relative to the other page elements if necessary? Here trying to learn CSS and needed a menu to go under a logo on my page, I can't however get it in the right position. If anyone could help me i would greatly appreciate it. the problem is the #cssmenu codeing i think. 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" />
<style type="text/css">
<title>Northwest CT YMCA - We Build, Strong Kids, Strong Families, Strong Communities.</title>
#container { width: 900px; margin: 0 auto; }
body { background: #fff url('http://www24.brinkster.com/mattphat/images/body.gif') top repeat-x; font-family: Arial, Helvetica, sans-serif; }
#header { height: 300px; position: relative; }
#header h1 a { display: block; text-indent: -5000px; width: 606px; height: 125px; background: url('http://www24.brinkster.com/mattphat/images/logo.gif') no-repeat; position: absolute; left: 20px; top: 30px; }
#header2 { display: block; width: 769px; height: 32px; background: url('http://www24.brinkster.com/mattphat/images/winterprograms.gif') no-repeat; position: absolute; left: 20px; top: 250px; }
#header2 h1 {padding-top: 20px; padding-left: 20px; color: #777; font-size: 16px;}
#header2 h1 a {color: #5c91c7;}
#header2 h1 a:hover { color: #386da4; }
#cssmenu {list-style: none; padding: 0px;}
#cssmenu .displace {position: absolute; top: -90px; left: -5000px;}
#cssmenu li {float: left;}
#cssmenu li a { display: block; width: 150px; height: 44px; background: url('images/links.gif');}
#cssmenu li.Torrington a { background-position: 0 0; }
#cssmenu li.Winsted a {background-position: -150px 0;}
#cssmenu li.Cannan a {background-position: -300px 0;}
#cssmenu li.Torrington a:hover {background-position: 0 -43px;}
#cssmenu li.Winsted a:hover {background-position: -150px -43px;}
#cssmenu li.Cannan a:hover {background-position: -300px -44px;}
#cssmenu li.Torrington a:active {background-position: 0 -88px;}
#cssmenu li.Winsted a:active {background-position: -150px -88px;}
#cssmenu li.Cannan a:active {background-position: -300px -88px;}
#cssmenu li.Torrington a.selected {background-position: 0 -132px;}
#cssmenu li.Winsted a.selected {background-position: -150px -132px;}
#cssmenu li.Cannan a.selected {background-position: -300px -132px;}
#utility-nav { position: absolute; right: 20px; top: 40px; }
#utility-nav li { display: inline; }
#utility-nav li a { display: block; float: left; font-size: 11px; color: #ffffff; text-decoration: none; padding: 0 5px; background: url('http://www24.brinkster.com/mattphat/images/utility_nav_divider.gif') left no-repeat; }
#utility-nav li a:hover, #utility-nav li a.active { color: #E9F5FE; text-decoration: underline; }
#utility-nav li.first-item a { background: none; }
#sub-header { background: url('http://www24.brinkster.com/mattphat/images/sub_header.gif') no-repeat; width: 900px; height: 60px; position: relative; padding-top: 43px; margin-bottom: 20px; }
p.breadcrumbs { font-size: 15px; color: #E13040; position: absolute; top: 9px; left: 20px;}
p.breadcrumbs a {color: #5c91c7;}
#images { background: #fff; height: 111px; }
#images li { display: block; float: left; margin: 1px 1px 0 0;}
#images li.first-item { margin-left: 1px; }
#images li.last-item { margin-right: 0; }
#directory ul { width: 159px; float: left; padding: 10px 0 0 20px; }
#directory ul li { background: url('http://www24.brinkster.com/mattphat/images/directory_bullet.gif') left no-repeat; padding-left: 8px; }
#directory ul li a { font-size: 11px; color: #666; text-decoration: none; line-height: 1.6; }
#directory ul li a:hover, #directory ul li a.active { border-bottom: 1px dotted #333; color: #333; }
#sidebar { width: 247px; float: left; padding-left: 20px; margin-right: 20px; }
#sidebar h2, #main-content h2 { font-size: 20px; color: #2e9eff; margin-bottom: 5px; text-indent: 8px; }
#sidebar ul { background: #f4f4f4 url('http://www24.brinkster.com/mattphat/images/sidebar_li.gif') top repeat-x; }
#sidebar ul li { padding: 10px; background: url('http://www24.brinkster.com/mattphat/images/sidebar_li.gif') bottom repeat-x; line-height: 1.4; }
#sidebar ul li img { float: left; padding: 1px; border: 1px solid #ddd; margin-right: 8px; }
#sidebar ul li h3 { font-size: 11px; font-weight: bold; color: #ee912a; }
#sidebar ul li p { font-size: 11px; color: #999; }
#sidebar ul li a { background: url('http://www24.brinkster.com/mattphat/images/read_more.gif') left no-repeat; padding-left: 12px; color: #5c91c7; font-size: 11px; }
#sidebar ul li a:hover { color: #386da4; }
#main-content { width: 592px; float: left; margin-bottom: 20px; }
.article-wrapper .article-actions { background: url('http://www24.brinkster.com/mattphat/images/article_actions.gif') top repeat-x; height: 34px; font-size: 11px; color: #999; padding: 10px 0 0 8px; }
.article-wrapper .article-actions li { display: inline; margin-right: 10px; }
.article-wrapper .article-actions li img { vertical-align: middle; margin-right: 6px; }
.article-wrapper .article-actions li a { color: #666; }
.article-wrapper .article-actions li a:hover { text-decoration: underline; }
.article-wrapper .article { width: 574px; margin: 0 auto; }
.article-wrapper .article h3 { font-size: 16px; font-weight: bold; color: #ee912a; margin-bottom: 2px; }
.article-wrapper .article p { color: #666; font-size: 12px; line-height: 1.6; margin-bottom: 10px; }
.article-wrapper .article strong { font-weight: bold; }
.article-wrapper .article em { font-style: italic; }
.article-wrapper .article p a { color: #5c91c7; }
.article-wrapper .article p a:hover { color: #3b6691; }
#footer { background: url('http://www24.brinkster.com/mattphat/images/footer.gif') no-repeat; width: 898px; height: 80px; margin: 0 auto 10px auto; clear: both; padding-top:13px; position: relative; }
#footer p { font-size: 11px; color: #999;}
#footer p.copyright { text-align: center; }
#footer p.copyright span { color: #5c91c7; }
#footer p.authors { position: absolute; right: 25px; top: 14px; }
#footer p.authors a { color: #5c91c7; text-decoration: none; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="#">Health Life</a></h1>
<ul id="utility-nav">
<li class="first-item"><a href="#">About us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Support the Y</a></li>
</ul>
<!-- //#main-nav -->
</div>
<!-- //#header -->
<!-- //#sub-header -->
<div id="cssmenu">
<li class="Torrington"><a href="#" title="Home"><span class="displace">Home</span></a></li>
<li class="Winsted"><a href="#" title="Blog"><span class="displace">Blog</span></a></li>
<li class="Cannan"><a href="#" title="Contact"><span class="displace">Contact</span></a></li>
</div>
<div id="sidebar">
<h2>Quick Links:</h2>
<ul>
<li class="clearfix">
<img src="YMCA/logo.png">
<br><br><br><br><p>"Ive regained and maintained my mental capacity from 10 years earlier. I look forward to every day now with an open mind and new possibilities."<br>
<b>JoAnn Baird, age 67</b><br>
Program Graduate<br>
<br>
<font color="red"><b>Think Faster, Focus Better, Remember more.</b></font></p>
<a href="http://www.northwestctymca.org/PDFs/Final%20Brain%20Fit%20Brochure.pdf">Read more</a> </li>
<li class="clearfix"> <img src="YMCA/ymca-logo.jpg">
<h3>Virtural Tour</h3>
<p>Before you join please feel free to take a virtural tour of our 3 branches by clicking the links below.</p>
<a href="http://www.flickr.com/photos/44211805@N04/sets/72157622709363760/show/">Torrington</a>
<a href="http://www.flickr.com/photos/44211805@N04/sets/72157622709343912/show/">Winsted</a>
<a href="http://www.flickr.com/photos/44211805@N04/sets/72157622610891891/show/">Cannan</a>
<li class="clearfix"> <img src="YMCA/hugs.JPG">
<h3>Childcare</h3>
<p>Our Torrington and Winsted branchs both offer quality childcare services to the public. To read more information about childcare at the Y! click below. </p>
<a href="#">Read more</a> </li>
</ul>
</div>
<!-- //#sidebar -->
<div id="main-content">
<h2>Northwest YMCA Latest News:</h2>
<div class="article-wrapper">
<ul class="article-actions">
<li><img src="images/category.gif" alt="" /> <a href="#">My Healthy Life</a></li>
<li><img src="images/date.gif" alt="" /> 24.12.2008 at 23:00h</li>
<li><img src="images/author.gif" alt="" /> <a href="#">YMCA Webmaster</a></li>
<li><img src="images/comments.gif" alt="" /> <a href="#">32 Comments</a></li>
</ul>
<div class="article">
<img src="YMCA/my%2520healthy%2520life%2520logo.jpg" alt="" /><h3>Northwest YMCA ~ My Healthy Life ~ New in 2010!</h3>
<p>The Northwest YMCAs my healthy life program is a personalized health and wellness program included with your YMCA Facility Membership. The YMCA is your health partner, providing you with the proper education, motivation and healthy activity routines to help you reach your fitness goals.
Best of all, theres a step-by-step program for everyone! Each program will feature workout routines and educational information, guidance, and support sessions with your YMCA Wellness Coach. Its easy, select from one of our four my healthy life programs: <b>Trim, Momentum, Spark or Firm.</b> <a href="http://www.northwestctymca.org/PDFs/My%20Healthy%20Life%20Brochure%20FINAL.pdf">Click Here for More Details!</a><p>
</div>
</div>
<!-- //.article -->
<div class="article-wrapper">
<ul class="article-actions">
<li><img src="images/category.gif" alt="" /> <a href="#">Welcome</a></li>
<li><img src="images/date.gif" alt="" /> 24.12.2008 at 23:00h</li>
<li><img src="images/author.gif" alt="" /> <a href="#">YMCA Webmaster</a></li>
<li><img src="images/comments.gif" alt="" /> <a href="#">32 Comments</a></li>
</ul>
<div class="article">
<h3>*NEW* Year ~ *NEW* Website </h3>
<p>Welcome to a new year and a brand new site for the Northwest YMCA. Please bare with us while we work out the kinks, in our effort to bring you a more interactive and informative website.
<br><br>
</p>
</div>
</div>
<!-- //.article -->
</div>
<!-- //#main-content -->
<div id="footer">
<p class="copyright">2009 Northwest Connecticut YMCA.<br>The YMCA is a 501(c)(3) not-for-profit social services organization dedicated to <br>building strong kids, strong families and strong communities.</p>
<!-- //#footer -->
</div>
<!-- //#container -->
</body>
</html>
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..??? 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;
}
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 Need some help with some dropdown menus. I have been reading many of the tutorials on other sites. I have come up with this code for my drop down menus: Code:
.dropmenu {
position: absolute;
left: -1500px;
visibility: visible;
z-index: 101;
float: left;
width: 122px;
border-width: 1px;
border-style: solid;
border-color: #BFBFBF;
background-color: #FFFFFF;
}
.dropmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropmenu li {
display: inline;
}
.dropmenu a, .dropmenu a:visited, .dropmenu a:active {
display: block;
width: 120px;
padding: 2px;
margin: 1px;
font-family: Arial;
font-size: 10px;
font-weight: normal;
text-align: center;
text-decoration: none;
color: #000000;
background-color: #D4D4D4;
}
.dropmenu a:hover {
padding: 2px;
margin: 1px;
font-family: Arial;
font-size: 10px;
font-weight: normal;
text-align: center;
text-decoration: none;
color: #000000;
background-color: #BFBFBF;
}
but no matter how much I adjust settings that I know, I cannot get the dropdowns to show up below my original buttons, they always show up to the right hand side. Can someone here please point me in the right direction... 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;
}
I'm looking to add a drop down menu for my site but Instead of the menu dropping down i want it to go up and I found a few things about it but nothing really helped me I was wondering how can i get a css drop down to go up? sorry if this is the wrong forum to post on.. but i am clueless on this part i am going to be starting on the script soon just wanted to know how to code the script to make it go up Thank you Smackadoo 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. 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? :| 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. Help!! I am trying to design this website: nitrocanine .com/D/DDesign and the dropdown menus won't work in IE, while they work in Chrome, Safari, Firefox... does anyone know how to make them work in IE as well?? You can view the source and see the css coding and the relevant HTML. 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]-->
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 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>
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 Everything works perfect expect one thing. When a mouse hovered on a link, dropdown links appear. Problem here is when I move my mouse towards the new links, they disappear before I reach them. Did I explain the problem well? No. Try the link. Menu at the top here. http://www.refinethetaste.com/html/ Code:
<style type="text/css">
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/elegant1.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#navigation { float:left; height:26px; width:776px; background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_off.gif);
}
#navigation .menu {padding:0; margin:0; list-style:none; font-size:16px;}
#navigation .menu table {border-collapse:collapse; height:0; width:0; margin:0 -4px -1px 0;}
#navigation .menu li {float:left; margin:0 5px;}
#navigation .menu li a {display:block; float:left; color:#FFFFFF; height:26px; text-decoration:none;}
#navigation .menu li a.current {font-weight:bold; border-bottom:3px solid #9d0808; cursor:text;}
#navigation .menu li:hover {position:relative; z-index:100;}
#navigation .menu li a:hover {position:relative; z-index:100; border-bottom:3px solid #aaa;}
#navigation .menu ul {position:absolute; left:-9999px; top:38px; width:140px; padding:0; margin:0; list-style:none;}
#navigation .menu ul li {margin:0;}
#navigation .menu ul li a {width:140px; height:20px; color: #000000; font-size:14px; border:0; text-align:right;}
#navigation .menu ul li a:hover { border:0;}
#navigation .menu ul ul {position:absolute; margin-left:100%; top:0; padding:0; margin:0; list-style:none;}
#navigation .menu :hover ul {right:0; left:auto;}
#navigation .menu :hover ul ul {left:-9999px; width:130px; padding-left:10px; }
#navigation .menu li ul :hover ul {left: 140px; height:20px; right:auto;}
#navigation .menu li ul li ul li a { color:#000000; font-size:12px; text-align:left; }
</style>
Hiyas, I am a bit of a CSS noob, and I am having some problems so I thought I would post here and see if anyone could help me. I was given some code by a friend the other day to make a drop-down menu that comes down from a jpg-based button. Everything seemed to work, until I tried to make more than 1 menu. Here is my friend's website that uses the code - she can have 3 menus without anything glitching: www.hollyhostile.com The menu is controlled by a javascript file, I have been told this is CSS based but it may indeed be java, so sorry if this is in the wrong place. Her js menu file looks kind of like this: Code: //Contents for menu 1 var menu1=new Array() menu1[0]='<a href="http://www.hollyhostile.com/about.html">About Me</a>' menu1[1]='<a href="http://www.hollyhostile.com/faq.html">FAQ</a>' menu1[2]='<a href="http://www.hollyhostile.com/references.html">References</a>' menu1[3]='<a href="http://www.hollyhostile.com/pricing.html">Pricing</a>' //Contents for menu 2, var menu2=new Array() menu2[0]='<a href="http://www.hollyhostile.com/forum">Forum</a>' menu2[1]='<a href="http://www.hollyhostile.com/guestbook/">Guestbook</a>' menu2[2]='<a href="http://www.hollyhostile.com/blog/">Blog</a>' menu2[3]='<a href="http://www.youtube.com/hollyhostile">Tutorials</a>' Then she has this in her index.html file: Code: <a href="http://hollyhostile.com/default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu1, '100px')" onMouseOut="delayhidemenu()"> <img src="holly_files/purple_05.jpg" alt="" width="65" height="23"></a></td> <td> <a href="http://www.hollyhostile.com/portfolio.html"><img src="holly_files/purple_06.jpg" alt="" width="65" height="23"></a></td> <td> <a href="http://hollyhostile.com/default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu2, '100px')" onMouseOut="delayhidemenu()"> <img src="holly_files/purple_07.jpg" alt="" width="88" height="23"></a></td> However, when I try to use this on my own design, it will only show menu1, and this displays over random buttons, not in a succession. It's very very strange. Here is an example of the kind of thing I want to do: www.gothique-noir.com/asylum Each button apart from "Home" should drop down into a menu, but for some reason it won't let me do different menus. If anyone can help me that would be hugely appreciated I've got a dropdown menu that works great in Firefox, Opera, Safari, and Chrome. In fact it ALMOST works in IE7, except for an annoying bug that happens when the person is using the drop down menu. As the user moves the mouse partway down the menu, the menu will suddenly vanish, making the rest of the menu unusable. The live website is he http://www.a-1plumbing.us/100.html Here's my menu CSS code: Code: /* menu */
#navcontainer {padding-left:235px; margin:0; height:36px;}
#menu {
position:relative; display:table;
list-style-type:none;
margin:0; padding:0;
/* width:552px; */
height:24px;
z-index:5;
}
.menuitem {
position:relative; display:table-cell; float:left;
margin:0; padding:0;
width:128.75px;
overflow:hidden;
}
.menuitem ul {
display:none; /* hide it first off */
margin: 0; padding:0;
list-style-type:none;
}
.menuitem li { margin:0; padding:0; overflow:visible;}
.submenu li { position:relative; z-index:10;}
/* 2-class selector to have higher weight than ".menuitem ul" */
.submenu .subsubmenu {
position:absolute;
top:0;
display:none;
}
.menuitem:hover {
overflow:hidden;
z-index:10;
position:relative;
}
.menuitem:hover ul{
display:block;
}
.meunuitem:hover, .menuitem:hover ul{
position:static; }
.submenu li:hover > .subsubmenu {
display:block;
}
#menu a {
display:block;
margin:0; padding: 0.2em 0.5em;
text-align:center;
text-decoration:none;
font: normal small-caps 1em Verdana, Arial, Helvetica, sans-serif;
color:black ! important;
}
#menu a:hover { text-decoration: underline; color:black }
.menuitem a { background-color:transparent;}
#menu .menuitem ul a { background-color:#D71921; color:white ! important; font-size:0.8em ! important;}
#menu .menuitem ul ul a { background-color:darkblue; color:white ! important; font-size:0.8em ! important }
#pindex #mindex, #p100 #m100, #pcontact #mcontact, #ptips #mtips {color: #005D8B ! important;}
#menu .menuitem ul a#sm { background:#D71921 url('../images/seal_small.gif') no-repeat center left ! important; padding-left: 1.5em ! important; }
#phoneNum {display:none}
.submenu {border:1px solid white;}
Here is my HTML code: Code: <div id="navcontainer">
<ul id="menu">
<li class="menuitem"><a href="home.html" id="mindex"><strong>Home</strong></a></li>
<li class="menuitem"><a href="100.html" id="m100"><strong>Guarantee</strong></a>
<ul class="submenu">
<li><a href="./100.html#s_100">100% Guarantee</a></li>
<li><a href="./100.html#s_time">On Time or it's Our Dime</a></li>
<li><a href="./100.html#s_seal" id="sm">Technician<br />Seal of Safety</a></li>
<li><a href="./100.html#s_clean">Cleanliness</a></li>
</ul>
</li>
<li class="menuitem"><a href="tips.html" id="mtips"><strong>Tips</strong></a>
<ul class="submenu">
<li><a href="./tips.html#ttt">Toilet Trouble</a></li>
<li><a href="./tips.html#tfd">Flooded Basement</a></li>
<li><a href="./tips.html#twl">Water Leak</a></li>
<li><a href="./tips.html#tbs">Blocked Sewer</a></li>
<li><a href="./tips.html#tnhw">No Hot Water</a></li>
<li><a href="./tips.html#tgl">Gas Leak</a></li>
<li><a href="./tips.html#tcd">Clogged Drain</a></li>
</ul>
</li>
<li class="menuitem"><a href="./contactus.html" id="mcontact" ><strong>About Us</strong></a>
<ul class="submenu">
<li><a href="./testimonials.html">Testimonials</a></li>
<li><a href="./service_area.html#serve">Service Area</a></li>
<li><a href="./feedback.html#feedback">Feedback Form</a></li>
<li><a href="./contactus.html#phone">Phone</a></li>
<li><a href="./contactus.html#address">Address</a></li>
</ul>
</li>
</ul>
</div> <!-- end NAV container -->
I've tried using "position: static" in several divs, but this bug does not seem to be related to the other (and well known) IE7 positioning bugs. Does anyone have any idea why the menus vanish as you mouse down them? It appears to be triggered if there is a DIV under the menu. For example, on this page ( http://www.a-1plumbing.us/tips.html ) the "Guarantee" drop down menu works quite well, because there is no div under neath it. (due to the improper floating IE7 bug, which I'll fix soon. :P ) Thanks for any input! -Suthern101 |
|||||||