|
CSS - Css Drop-downs Hover Nav Disappears Before You Can Click
drlinklove.com/drew/index4.html
Some of the navigation items have drop-down menus. It seems that sometimes the drop-down menu disappears before the user has a chance to click one of the options. Anyone have a guess to how I can make it more stable? Similar TutorialsHi there, Any help would be appreciated. Im currently building a site http://lafine.101webtech.com Im implementing the drop down menu system from CSSPlay for some reason its all good in IE7, Firefox, Safari (PC) but IE6 is not display the top level items as a horizontal list. I know the menu works in IE6 as I tested on the site before I grabbed the code. It must be something in my implementation but I can't for the life of me work out what. Cheers, Phil Is is possible to get CSS drop-downs to work in IE6? If so what does it require? Thanks! I don't have any styles applied to these drop downs. I don't really know how to do what I need to do. I want to make this drop down: graiai [dot] com /screenshots/makethis.gif Look like this drop down: graiai [dot] com /screenshots/looklikethis.gif Help! Hello All, I'm working on this site at the moment: http://www.whitecapgraphics.com/APP Unfortunately I seem to be missing the drop down menus in IE6. Can anyone explain why? (No, I haven't made it standards compliant yet and I am aware that the png is not transparent in IE6. Aside from that feel free to pick on me for anything else, I take criticism well.) CSS: Code:
* {margin:0; padding:0;}
body {
background-image:url(images/background.gif);
color:#450109;
}
a {
color:#450109;
text-decoration:none;
font-weight:bold;
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:.9em;
}
a:hover {
color:#D6970C;
text-decoration:overline underline;
}
div#main {
background-color: #FFFFFF;
margin: auto;
width: 95%;
border-width: 0px 5px 0px 5px;
border-style: solid;
border-right-color: #450109;
border-left-color: #D6970C;
border-bottom:15px solid #450109;
}
#main #logo {
background-image:url(images/logo.jpg);
background-position:top center;
background-repeat:no-repeat;
background-color:#71001E;
}
#main #leftflourish {
float:left;
}
#main #rightflourish {
float:right;
}
div#navigation {
background-color:#400000;
float: right;
margin: 0;
width: 100%;
min-height: 24px;
}
div#navigation ul {
margin-left: 193px;
padding-left: 5px;
padding-right: 5px;
}
div#navigation ul li {
background-color: #400000;
float: left;
list-style-type:none;
width: 25%;
position: relative;
z-index:99;
}
div#navigation a {
text-decoration:none;
font-variant:normal;
color: #DFCDB6;
text-align:center;
display: block;
width: 100%;
line-height: 25px;
font-family: serif;
font-size:1.1em;
font-weight:normal;
}
div#navigation a:hover {
color: #FFCC00;
}
div#navigation ul li ul {
width: 90%;
padding: 0;
margin:0;
margin-left:5%;
margin-right: 5%;
position:absolute;
display: none;
}
div#navigation ul li ul li {
width: 100%;
}
/* shows drop down on hover */
div#navigation ul li:hover ul, div#navigation ul li ul:hover {display:block;}
div#lcolumn {
width: 190px;
float: left;
margin: 0;
padding: 0;
position: relative;
top: -66px;
z-index:999;
}
div#lcolumn ul li {
list-style-type:none;
text-align:center;
width: 167px;
padding-bottom: .1em;
}
#main #body #lcolumn ul li a {
background-image: url(images/yapdropback.jpg);
display: block;
background-repeat: no-repeat;
min-height: 24px;
color:#DFCDB6;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:.9em;
line-height: 24px;
letter-spacing: -.02em;
font-variant:small-caps;
}
#main #body #lcolumn ul li a:hover {
color: #ffcc00;
}
#main #body #lcolumn #featureContent {
padding-top: 24px;
}
#main #body #lcolumn #featureContent div{
padding-right: 30px;
padding-top: 60px;
background-image: url(images/featuresback.jpg);
background-repeat: no-repeat;
}
#main #body {
background-image:url(images/chaser.jpg);
background-position:bottom right;
background-repeat:no-repeat;
position: relative;
margin-bottom:3em; /*1.25 + 1.75*/
clear:both;
}
#main #body #content {
padding-left: 200px; /*fix for IE - it's including from side of L Column*/
position: absolute;
top: 48px;
z-index:1;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 1.5em;
line-height:1.1em;
text-transform: uppercase;
color: #350000;
width: 50%;
}
#main #body #content div ul li {
float: right;
list-style-type:none;
padding-left: 2%;
top: .4em;
line-height:2.2em;
display:block;
font-weight:bold;
}
h2 {
position:relative;
width: 98%;
background-image:url(images/navback.jpg);
background-repeat:repeat-x;
padding-top:1%;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
text-indent: 2em;
}
#main #body #content div ul {
width: 46%;
position: absolute;
top: .4em;
right:0;
padding-right:4%;
}
h1:first-letter {
font-size: 1.7em;
}
#content p {
padding: 2em;
}
#main #footer {
text-align: center;
position:relative;
top: -1em;
}
/* Aslett Clearing Method */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
* html #main #body #content {padding-left:0px; width:78%;}
.clearfix {display:block;}
/* end backslash hack */
This method is just awesome, but how on earch does someone get the font color to stay on its hover state? http://htmldog.com/articles/suckerfish/dropdowns/ This should be a sticky and lets solve this problem together. This question is always asked but never answered. Hi there, I have this css to display some drop downs, but the drop downs are not showing in IE, but they are in FF. any ideas why? Code: #navt,
#navt ul {
padding: 0;
margin: 0;
list-style: none;
z-index: 1000;
}
#navt a {
display: block;
z-index: 1000;
width: 10em;
}
#navt li {
float: left;
z-index: 1000;
width: 10em;
}
#navt li ul {
z-index: 1000;
position: absolute;
width: 10em;
left: -999em;
}
#navt li:hover ul {
z-index: 1000;
left: auto;
}
#navt li:hover ul,
#navt li.sfhover ul {
z-index: 1000;
left: auto;
}
Im writing a combination navigation bar and contextual layout box model for a large dynamically generated site. The contextual layout is so that i can set a variable in the appropriate markup and then have the correct collumns display. I have two problems. #1. When I mouse over the menus and try to go down my menus they dissapear. If I take out the layout styling they work properly in both IE and Firefox. #2. Anyway to get the menus to appear above form elements? I would appreciate any help.... my code... Quote: /* default layout.php */ body { color: #000; background-color: #fff; margin: 0; } p, h1, h2, h3, h4 { margin: 0; padding: 1em; } h2, h3, h4 { color: #cc0000; } #layoutlogic-abc, #layoutlogic-ab, #layoutlogic-a { background-color: #fff; margin: 0 -1px; width: 100%; border:1px solid black; } #footer { color: #000; position: relative; z-index: 13; width: 100%; } #footer a { color: black; } #layoutlogic-abc .page { background-color: #fff; width: auto; border-right: 150px solid #eee; border-left: 200px solid #eee; } #layoutlogic-ab .page { background-color: #fff; width: auto; border-left: 200px solid #eee; } #layoutlogic-a .page { background-color: #fff; width: auto; } .section { margin: 0; width: 100%; } .col-a, .col-b, .col-c { position: relative; float: left; padding: 2.5em; } .col-a a, .col-b a, .col-c a{ color: blue; } .col-a { margin-right: 1px; } .col-b { margin: 0 -3px 0 -2px; } .col-c { margin-left: 1px; } #layoutlogic-abc .col-a, #layoutlogic-ab .col-a { margin-left: -200px; z-index: 10; width: 200px; padding-top: 1em; } #layoutlogic-abc .col-b, #layoutlogic-ab .col-b { z-index: 20; width: 100%; padding-top: 1em; border: 1px solid black; } #layoutlogic-abc .col-c { color: #fff; margin-right: -150px; z-index: 10; width: 150px; padding-top: 1em; } #layoutlogic-a .col-b, #layoutlogic-ab .col-c, #layoutlogic-a .col-c { display: none; } .floatright { float: right; margin: 1em 1em 0 2em; } .floatleft { float: left; margin: .8em 0 .8em 1.6em; } .clear { clear: both; } .page > .section { border-bottom: 1px solid transparent; } .garamond {font-family: garamond;} ."Times New Roman" {font-family: "Times New Roman";} .verdana {font-family: verdana;} .arial {font-family: arial;} ."Times New Roman" {font-family: "Times New Roman";} and my markup: PHP Code: <body> <div align="center"><h1><img src="/images/banner.gif" alt="UCWDC Banner" /></h1></div> <div id="nav"> <ul class="level1"> <li><a href="/home/"><?= $menu1 ?></a></li> <li class="submenu"><a href="/my_ucwdc/"><?= $menu2 ?></a> <ul class="level2"> <li><a href="/my_ucwdc/my_account.php"><?= $menu2array[0] ?></a></li> <li class="submenu"><a href="/my_ucwdc/online_community.php"><?= $menu2array[1] ?></a> <ul class="level3"> <li><a href="/my_ucwdc/forum.php"><?= $submenu2array[0] ?></a></li> <li><a href="/my_ucwdc/marketplace.php"><?= $submenu2array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $submenu2array[2] ?></a></li> </ul></li> <li><a href="/my_ucwdc/membership.php"><?php echo ($menu2array[2])?></a></li> <li><a href="/my_ucwdc/history.php"><?= $menu2array[3] ?></a></li> <li><a href="/contacts/officers.php"><?= $menu2array[4] ?></a></li> <li><a href="/contacts/regional_rep.php"><?= $menu2array[5] ?></a></li> <li><a href="/contacts/members_dir.php"><?= $menu2array[6] ?></a></li> <li><a href="/events/results.php"><?php echo($menu2array[7])?></a></li> </ul></li> <li class="submenu"><a href="/events/"><?= $menu3 ?></a> <ul class="level2"> <li><a href="/events/events_by_date.php"><?= $menu3array[1] ?></a></li> <li><a href="/events/event_reviews.php"><?= $menu3array[2] ?></a></li> <li><a href="/events/results.php"><?= $menu3array[0] ?></a></li> <li><a href="/events/register.php"><?= $menu3array[3] ?></a></li> </ul></li> <li class="submenu"><a href="/competition/"><?= $menu4 ?></a> <ul class="level2"> <li class="submenu"><a href="/rules/"><?= $menu4array[0] ?></a> <ul class="level3"> <li><a href="/rules/couples.php">Couples</a></li> <li><a href="/rules/line.php">Line Dance</a></li> <li><a href="/rules/pro_am.php">Pro-Am</a></li> <li><a href="/rules/team.php">Team</a></li> </ul></li> <li class="submenu"><a href="/dances/"><?= $menu4array[1] ?></a> <ul class="level3"> <li><a href="/dances/triple_2.php"><?= $dancesarray[0] ?></a></li> <li><a href="/dances/polka.php"><?= $dancesarray[1] ?></a></li> <li><a href="/dances/night_club.php"><?= $dancesarray[2] ?></a></li> <li><a href="/dances/cha_cah.php"><?= $dancesarray[3] ?></a></li> <li><a href="/dances/waltz.php"><?= $dancesarray[4] ?></a></li> <li><a href="/dances/2_step.php"><?= $dancesarray[5] ?></a></li> <li><a href="/dances/east_coast_swing.php"><?= $dancesarray[6] ?></a></li> <li><a href="/dances/west_coast_swing.php"><?= $dancesarray[7] ?></a></li> </ul></li> <li class="submenu"><a href="/music/"><?= $menu4array[2] ?></a> <ul class="level3"> <li><a href="/music/release_dates.php"><?= $musicarray[0] ?></a></li> <li><a href="/music/music_news"><?= $musicarray[3] ?></a></li> <li><a href="/music/dj_forum"><?= $musicarray[2] ?></a></li> <li><a href="/music/music_match.php"><?= $musicarray[1] ?></a></li> </ul></li> </ul></li> <li class="submenu"><a href="/worlds/"><?= $menu5?></a> <ul class="level2"> <li><a href="/worlds/worlds_register.php"><?= $menu5array[0] ?></a></li> <li><a href="/worlds/worlds_swing.php"><?= $menu5array[1] ?></a></li> <li><a href="/worlds/worlds_workshops.php"><?= $menu5array[2] ?></a></li> <li><a href="/worlds/worlds_schedule.php"><?= $menu5array[3] ?></a></li> <li><a href="/worlds/worlds_line.php"><?= $menu5array[4] ?></a></li> <li><a href="/worlds/worlds_competitors.php"><?= $menu5array[5] ?></a></li> <li><a href="/worlds/worlds_hotels.php"><?= $menu5array[6] ?></a></li> <li><a href="/worlds/worlds_sponsor.php"><?= $menu5array[7] ?></a></li> <li><a href="/worlds/worlds_contacts.php"><?= $menu5array[8] ?></a></li> <li><a href="/wolrds/worlds_updates.php"><?= $menu5array[9] ?></a></li> </ul></li> <li class="submenu"><a href="/judge/"><?= $menu6?></a> <ul class="level2"> <li><a href="/judge/about_judge.php"><?= $menu6array[0] ?></a></li> <li><a href="/contacts/judge_pool.php"><?= $menu6array[1] ?></a></li> <li><a href="/judge/judge_curriculum.php"><?= $menu6array[2] ?></a></li> </ul></li> <li class="submenu"><a href="/classes/"><?= $menu8 ?></a> <ul class="level2"> <li><a href="/classes/zip_code_match.php"><?= $menu8array[0] ?></a></li> <li><a href="/classes/classes_events.php"><?= $menu8array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $menu8array[2] ?></a></li> <li><a href="/classes/classes_judging.php"><?= $menu8array[3] ?></a></li> </ul></li> <li class="submenu"><a href="/contacts/"><?= $menu9 ?></a> <ul class="level2"> <li><a href="/contacts/officers.php"><?= $menu9array[0] ?></a></li> <li><a href="/contacts/regional_rep.php"><?= $menu9array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $menu9array[2] ?></a></li> <li><a href="/contacts/judge_pool.php"><?= $menu9array[3] ?></a></li> <li><a href="/contacts/members_dir.php"><?= $menu9array[4] ?></a></li> <li><a href="/contacts/webmaster.php"><?= $menu9array[5] ?></a></li> </ul></li> </ul> </div> <div id="layoutlogic-abc"> <div class="page"> <div class="section"> <div class="col-a"> <fieldset><legend>Login:</legend> <table width="100%" border="0"> <tr> <td align="right">Username:</td><td align="center"><input type="text" size="10" /></td> </tr> <tr> <td align="right">Password:</td><td align="center"><input type="password" size="10" /></td> </tr> <tr> <td colspan="2" align="center"><a href="#">Forgot Password?</a></td> </tr> <tr> <td colspan="2" align="center"><a href="new-member.html">Not a Member yet?</a></td> </tr> </table> </fieldset> <div align="center"><input type="submit" value="Login"></div> <hr /> <p>left Content </p> <hr /> </div> <div class="col-b"> <div class="floatright"><img src="header2.jpg"></div> <p >Content</p> </div> <div class="col-c"> <p>Content</p> </div> <div class="clear"></div> </div> </div> <div id="footer"><h3>Footer</h3><p>Site Design and Maintenence by <a href="#">WestonWebWorks.com</a>.</p></div> </div> </body> </html> Thanks Hi all, The following CSS and HTML work fine in Mozilla, Netscape and Firefox. It can be viewed in action at: http://www.sirfragalot.com/wikindx2/ (choose the 'chocolate vanilla fudge sundae' from the Wikindx/preferences menu.) I have two questions: 1/ I'm aware that Konqueror does not support CSS drop-downs. It doesn't concern me as I've programmed a way around it. However, the menu items occasionally stack up vertically on the left side of the browser window: they're supposed to be horizontal. This stacking and subsequent un-stacking seems to be quite random. What's the fix? 2/ In IE, the drop-downs are rendered from the bottom right corner of the originating top menu item (they should be directly underneath). What is the fix? 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" xml:lang="en" lang="en">
<!-- begin header template (+ 3 lines up!) -->
<head>
<title>WIKINDX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="chocolate.css" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<!-- begin menue template -->
<table class="menuTable" border="0" cellspacing="0" cellpadding="0" align="left">
<tr class="" align="left" valign="top">
<td class="" align="right" valign="top">
<ul id="nav">
<li><a class="menuLi" href="index.php?action=frontNoMenu">Wikindx</a>
<ul>
<li><a class="menu" href="index.php">Home</a></li>
<li><a class="menu" href="index.php?action=preferencesDisplay">Preferences</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=fileNoMenu">File</a>
<ul>
<li><a class="menu" href="index.php?action=exportRtf">Export RTF</a></li>
<li><a class="menu" href="index.php?action=exportBibtex">Export BibTeX</a></li>
<li><a class="menu" href="index.php?action=showFiles">Show Files</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=editNoMenu">Edit</a>
<ul>
<li><a class="menu" href="index.php?action=editCreator">Creator</a></li>
<li><a class="menu" href="index.php?action=editJournal">Journal</a></li>
<li><a class="menu" href="index.php?action=editPublisher">Publisher</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=resourceNoMenu">Resources</a>
<ul>
<li><a class="menu" href="index.php?action=listDisplay">List</a></li>
<li><a class="menu" href="index.php?action=searchDisplay">Search</a></li>
<li><a class="menu" href="index.php?action=selectDisplay">Select</a></li>
<li><a class="menu" href="index.php?action=resourceNew">New</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=textNoMenu">Text</a>
<ul>
<li><a class="menu" href="index.php?action=allMusings">Musings</a></li>
<li><a class="menu" href="index.php?action=randomMusing">Random Musing</a></li>
<li><a class="menu" href="index.php?action=allParaphrases">Paraphrases</a></li>
<li><a class="menu" href="index.php?action=randomParaphrase">Random Paraphrase</a></li>
<li><a class="menu" href="index.php?action=allQuotes">Quotes</a></li>
<li><a class="menu" href="index.php?action=randomQuote">Random Quote</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=adminNoMenu">Admin</a>
<ul>
<li><a class="menu" href="index.php?action=superadminLogonDisplay">Logon</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=helpNoMenu">Help</a>
<ul>
<li><a class="menu" href="index.php?action=helpDisplay">Wikindx Help</a></li>
<li><a class="menu" href="index.php?action=aboutWikindx">About Wikindx</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<br />
<!-- end menu template -->
</body>
<!-- end footer template (+ 1 line down!) -->
</html>
CSS CODE: Code: body {
background : #74664a;
font-family : sans-serif;
font-size : 0.9em;
color : #f6eedf;
}
/* SuckerFish CSS drop down style */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 7em;
}
#nav li {
float: left;
width: 7em;
background : red;
}
#nav li ul {
position: absolute;
width: 7em;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* End Suckerfish Style */
/* Standard links such as top menu links */
A:visited, A:link, A:active {
text-decoration : none;
color : #74664a;
background : #efd197;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
A:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
/* .menu = submenu links */
A.menu:visited, A.menu:link, A.menu:active {
text-decoration : none;
color : #74664a;
display : block;
border-bottom : 1px solid #f6eedf;
width : 6em;
background : #efd197;
font-size : 0.9em;
text-align : left;
}
A.menu:hover {
text-decoration : none;
background : #f6eedf;
display : block;
color : #74664a;
border-bottom : 1px solid #f6eedf;
width : 6em;
font-size : 0.9em;
text-align : left;
}
/* normal links and paging links */
A.link:visited, A.link:link, A.link:active, A.page:visited, A.page:link, A.page.active {
text-decoration : none;
color : red;
background : transparent;
border : none;
}
A.link:hover, A.page:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* resource links for resource URLs */
A.rLink:visited, A.rLink:link, A.rLink:active {
text-decoration : none;
background : transparent;
color : #f6eedf;
border : none;
}
A.rLink:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* image links */
A.imgLink:visited, A.imgLink:link, A.imgLink:active {
text-decoration : none;
background : transparent;
border : none;
}
A.imgLink:hover {
text-decoration : none;
background : transparent;
border : none;
}
/*****
* .titleTable: the table containing the title bar
*****/
.titleTable {
width : 90%;
}
/*****
* .menuTable: the table containing the drop-down menus
*****/
.menuTable {
margin : 0 0 0 5%;
}
/*****
* .menuLi: text-color in list items of the drop-down menus
*****/
.menuLi {
color : black;
}
/*****
* .mainTable: the table containing the main content of WIKINDX
*****/
.mainTable {
border : none;
width : 90%;
padding : 0.2em;
clear : both;
}
/*****
* redefine HTML headings - see /core/html/MISC.php
*****/
h1, h2, h3, h4 {
color : #f6eedf;
margin : 0 0 1em 0;
}
/*****
* .footerFooter: footer information at end of script - part of a table
*****/
.footerTable {
font-size : 0.6em;
color : #f6eedf;
width : 90%;
}
/*****
* .error: <p>error messages</p>
*****/
.error {
background : red;
color : black;
}
/*****
* .success: <p>success messages</p>
*****/
.success {
background : #33ff00;
color : black;
}
/*****
* .small: small text
*****/
.small, .hint {
font-size : 0.8em;
}
/*****
* .hint: text hints given to provide further information usually on form input. Often used in conjunction
* with .small and usually the class of <span>....</span>
*****/
.hint {
color : #f6eedf;
}
/*****
* alternate background colours and font sizes for <td>resources</td> in a bibliographic list
*****/
.alternate1 {
/* background : #efd197; */
/* background : #f8efdf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
.alternate2 {
/* background : #ede5d8; */
/* background : #f6eedf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
/*****
* .highlight: highlight <span>search terms</span> in text
*****/
.highlight {
color : #583b04;
background : yellow;
}
/*****
* .required: highlighting for <span>required</span> form input elements (asterisk).
*****/
.required {
color : red;
}
Im doing a project Located Here *** not work safe *** 96.0.176.55/login.php Please look at the css and html If you hover over with the mouse on the top navigation were you see Gallery you will notice there is a drop down menu with three separate choices or images... The problem is when you move the mouse down to the second or third image the dropdown disappears. Can someone please help? Thanks Hi, I have a pure css menu that uses hover, Kravitz told me it wont work in touchscreens which I searched for and is so, thanks Kravitz. Also one told me to keep the hover and add a class to make it posible to click on li if hover does not work. Problem, cant test this as I dont have any touchscreen. So 1. is there a way to add a code to disable the hover affect? 2, maybe a website where you can test but using mouse.... 3. Dont remember, its validates but are there anything against using <a href="#">? Thanks, Helen Hi, How do i change the colour of the background hover colour of a drop down menu? I can only seem to change the background of the normal state. Any ideas? @kravvitz You have any idea how to do this? I can do it in all browsers except ie6, but I have no idea how to make ie6 comply... I developed a drop down menu for the current site I'm working on. I used several on-line tutorials and the outcome was variable. Everything seems to work great in IE after the hack to fix the :hover elements, but I have never been able to get the drop downs to work in Firefox 3, Chrome, or Safari. Unfortunately I do not have the ability to test in a previous version of Firefox at the moment so I am unsure if it is just a version issue from when the tutorials were written. The page in progress may be viewed at clcah.org.previewdns.com The specific CSS can be found in clc_common.css under the MENU section. Any insight would be greatly appreciated as I only anticipated trouble with IE. Hello All, I have a left navigation bar that seems to be working perfectly in Firefox and Safari. However (I know, you've heard this before!), when I open the page in IE, there is no list appearing whatsoever. When I hover in a place outside of where the ul is supposed to be, I can find where the menu is, but it is not functioning well. Could someone please take a look and provide some insight? I have tried a few different things but they are mostly guesses as this is pushing my understanding of CSS a bit. The menu is supposed to appear under the "Select a Tool" text... 029c92a.netsolhost.com/brushes.html Best Regards, Colin Hi everyone, I am having an issue with IE7 (imagine that) with a css drop down nav menu. On IE8 and Chrome the menus work flawlessly but in on IE7 the menu is behind the pictures on the page. The page is located at www.philadler.com/newlayout2.php. At first I thought it may be a z-index problem but the nav bar is set to 1000 and 900 depending on the menu and the thumbnails are set to 100. As of now the site validates on both css and xhtml 1.0 transitional. I can list any code if needed. Thanks for any help Phil Hello, This is my first post, so let my start by saying thanks and hopefully this can be of some help. I work in a college, and I'm somewhat unfamiliar with the CSS used. I also apologize in advance if my issue is simple, but I looked through the rules and resources sections and I felt my issue was somewhat specific. In an effort to save time and frustration, I'll put it in the simplest terms I can: I'm trying to make the site I have control over have a menu that drops down upon mouseover. The site is he www dot ccm dot edu/admissions The menu I'd like to make expandable on mouseover is the "Things to Do" menu on the right side of the page. For example, here's how another site does it: www dot ecc dot edu/admissions You can see the menu on the left side of the page, "Admissions Checklist". I show that site as an example because we're using the same templates. I inquired as to how they achieved the menu on their site, but they unfortunately didn't know. If possible, I'd like to have the menu expand upon mouseover instead of a click. Below are the copied CSS codes for each menu. The site I want the menu to be able to expand on mouseover: Code: /* TodoList */
.AC-TodoList {position:absolute;top:7px;right:-27px;background:#eeeac3;width:164px;padding:19px 13px 0px;}
.AC-TodoList DIV {padding-bottom:14px;text-align:center;}
.AC-TodoHeader {padding-left:21px;}
.AC-TodoHeader H4 {background:url(../images/admissions/header_thingsToDo.gif) no-repeat;width:116px;height:14;text-indent:-9999px;overflow:hidden;}
.AC-TodoList .AC-TodoCheck {display:none;}
#zone1 .AC-TodoList A {display:block;background:url(../images/admissions/bg_todoSm.gif) no-repeat;width:153px;height:22px;padding:8px 5px 4px;font-weight:bold;color:#8d8a6e;}
#zone1 .AC-TodoActive A {background-position:0px -34px;color:#fff;}
#zone1 .AC-TodoComplete A {background-position:0px -68px;width:128px;padding-left:30px;text-align:left;}
#zone1 .AC-TodoList A.large {background-image:url(../images/admissions/bg_todoLg.gif);height:36px;line-height:1.4em;}
#zone1 .AC-TodoActive A.large {background-position:0px -48px;}
#zone1 .AC-TodoComplete A.large {background-position:0px -96px;}
.AC-TodoListCt .controls {display:none;}
And the site that already has the effect I'd like to use:
/* To Do List */
#AC-TodoList {margin:0px -20px 0px -24px;background-color:#586A3E;padding-left:24px;}
#AC-TodoList INPUT {display:none;}
#AC-TodoList .AC-Spacer {display:none;}
#AC-TodoList .controls {display:none;}
.AC-TodoHeader {display:block;width:220px;height:32px;cursor:pointer;}
.AC-TodoHeader H4 {margin:0px;padding:0px;font-size:1em;font-weight:normal;line-height:1.6em;text-transform:uppercase;color:#f9e9b6;padding:0px 0px 0px 5px}
.AC-TodoHeader H4 A {color:#f9e9b6;}
.AC-TodoOpen H4 {background-color:#7F0000;position:absolute;width:233px;height:32px; }
.AC-TodoOpen h4 A {width:238px;height:32px; background-color:#7F0000;}
.AC-TodoContent {background-color:#ffffff; position:absolute;width:238px;height:0px;overflow:hidden; z-index:999; color:#F9E9B6;}
.AC-TodoIncomplete {background:url(../images/admissions/todo_checked.gif) no-repeat 7px 8px transparent; border-bottom:solid 1px #C9C9CA;}
.AC-TodoIncomplete a {display:block;padding:4px 10px 2px 30px;color:#7F0000;text-decoration:none;font-weight:normal;}
.AC-TodoComplete {background:url(../images/admissions/todo_checkedCom.gif) no-repeat 4px 8px transparent; border-bottom:solid 1px #C9C9CA; background-color:#B2B3B4;}
.AC-TodoComplete a {display:block;padding:4px 10px 2px 30px;color:#ffffff;text-decoration:none;font-weight:normal;}
.AC-TodoFooter {background:url(../images/admissions/todo_footer_bg.gif) no-repeat;width:238px;height:41px;cursor:pointer;}
I apologize if I'm breaking any rules, or my issue is simplistic. I especially apologize if my issue isn't well illustrated because of the no links policy. But thank you in advance to anyone that might be able to help. Hi there, im trying to make a website for a friend and im having a little diffuculty with my drop down menu the site is here bbk.ac.uk/~fsando01/watma/index.html when you hover over the link entitled services in the global nav bar and proceed to hover down to the first submenu link which is abs repair, youll notice the background image i set as hover state for the services link disapears, i want it to stay there like they have got on marks and spencers website... Please if anyone could help id be very grateful... ive tried everthing i can think of HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox. So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative. URL But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this. URL I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help! Advance thanks for those who read this! Hopefully someone can help me out with this! EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean. CSS CODE: Code: * {
margin:0;
padding:0;
}
#nav {
list-style:none;
position:relative;
}
#nav li {
float:left;
text-align:center;
}
#nav a {
display:block;
text-decoration:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
background:#254563;
}
/* --------- Sub Nav --------- */
#nav li.current ul {
left:0px;
}
#nav ul {
position:absolute;
left:-999em;
list-style:none;
padding:0 0 0;
width: 500px;
}
#nav ul li {
width: auto;
margin: 3px 3px 0 0px;
}
#nav ul a {
font-size: 12px;
height: auto;
padding: 5px 10px;
background: #dfeec9;
border-radius: 8px;
-moz-border-radius: 8px;
width: auto;
}
#nav li:active ul, #nav li:hover ul {
height: 30px;
left: 10px;
position: relative;
padding: 0px 3px 5px 3px;
background: none;
width: 500px;
}
.navi01 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 33px;
height: 44px;
text-decoration: none;
background: url(images/navi_01.png);
}
.navi02 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 133px;
height: 44px;
text-decoration: none;
background: url(images/navi_02.png);
}
.navi03 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 86px;
height: 44px;
text-decoration: none;
background: url(images/navi_03.png);
}
.navi04 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 83px;
height: 44px;
text-decoration: none;
background: url(images/navi_04.png);
}
.navi05 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 92px;
height: 44px;
text-decoration: none;
background: url(images/navi_05.png);
}
.navi06 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 82px;
height: 44px;
text-decoration: none;
background: url(images/navi_06.png);
}
.navi07 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 30px;
height: 44px;
text-decoration: none;
background: url(images/navi_07.png);
}
HTML NAV CODE: Code: <ul id="nav"> <li><span class="navi01"> </span></li> <li><a href="originalart/gallery.php"><span class="navi02"> </span></a> <ul> <li><a href="originalart/gallery.php">Original Art</a></li> <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> <li><a href="commissions/gallery_commissions.php">Commissions</a></li> <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> </ul> </li> <li><a href=""><span class="navi03"> </span></a> <ul> <li><a href="info.php">Info</a></li> <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> </ul> </li> <li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04"> </span></a></li> <li><a href="http://blog.luisarafidi.com/"><span class="navi05"> </span></a> <ul> <li><a href="#">Old Artwork</a></li> <li><a href="#">More</a></li> </ul> </li> <li><a href=""><span class="navi06"> </span></a></li> <li><span class="navi07"> </span></li> </ul> I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! |
|||||||