|
CSS - Ie6 Issues With Ccs Drop Down Menu
Similar TutorialsHello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! I working on a CSS to display a round-shouldered-tab menu. My result is acceptable: http://rickduley.webs.com/roundShoulderTabMenu.jpg except for the fact that the tabs are set below the menuBar on which the are supposed to display. I have run out of ideas. Would someone please set me on the right path? Thanks. P.S.: the code is at http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb - you have to delete the 'dot key gee bee' suffix. I am having some trouble getting my drop-down menu to work in IE6... I was also having some issues with it working in IE8 compatibility mode. /*--- Issue in IE6 ---*/ When I mouse over the menu items nothing displays. It acts as though nothing is there. /*--- Issue in IE8 Compatibility Mode ---*/ I tested this in Virtual PC w/ an IE7 VHD and everything works great. However when I open in IE8 and click that button the menu items work but the boxes do not close. Instead they stay open. Here is a working link that shows the navigation both HTML and CSS: http://www.mjtexas.com/dev8a/navigation.html Here is my CSS: Code: /* Navigation */
#top-nav-wrapper {margin-left:6px;}
#top-nav-wrapper h2 {color:#FFFFFF;font-size:14px;font-weight:bold;}
ul#topnav {background:url(../images/bg_top_nav.jpg) no-repeat;width:972px;height:43px;margin:0 0 0 0;padding:0;float:left;}
ul#topnav li{margin-top:0;}
#topnav li.first-level span {position:absolute;left:-9999px;z-index:50;}
#topnav li,#topnav li.first-level a {min-height:43px;display:block;}
#topnav li {float:left;list-style:none;display:inline;padding:0;}
li#nav-air-purifiers a.first-level {width:132px;}
li#nav-air-purifier-filters a.first-level {width:177px;}
li#nav-dehumidifiers a.first-level {width:152px;}
li#nav-home-air-filters a.first-level {width:166px;}
li#nav-learning-center a.first-level {width:167px;}
li#nav-customer-support a.first-level {width:178px;}
li#nav-air-purifiers:hover a.first-level {background:url(../images/bg_top_nav.jpg) 0px -43px no-repeat;}
li#nav-air-purifier-filters:hover a.first-level {background:url(../images/bg_top_nav.jpg) -132px -43px no-repeat;}
li#nav-dehumidifiers:hover a.first-level {background:url(../images/bg_top_nav.jpg) -309px -43px no-repeat;}
li#nav-home-air-filters:hover a.first-level {background:url(../images/bg_top_nav.jpg) -461px -43px no-repeat;}
li#nav-learning-center:hover a.first-level {background:url(../images/bg_top_nav.jpg) -627px -43px no-repeat;}
li#nav-customer-support:hover a.first-level {background:url(../images/bg_top_nav.jpg) -794px -43px no-repeat;}
ul#topnav li.first-level ul {display:block;margin:0 0 12px 7px;float:left;padding:14px 0 14px 0;}
ul#topnav li.first-level ul {width:150px;}
ul#topnav li.first-level ul li {margin:0 0 0 0;line-height:18px;padding:0 0px 0 0;width:230px;min-height:12px;float:left;}
ul#topnav li.first-level ul li a {color:#f5f5f5;font-size:14px;text-decoration:none;text-align:left;min-height:12px;}
ul#topnav li.first-level ul li a:hover {text-decoration:underline;}
ul#topnav li div.topnav-dd-outer {position:absolute;z-index:500;width:500px;left:-999em;background:#2F68B2 repeat;margin:0 0 0 0;padding:0 0 0 0;}
ul#topnav li#nav-air-purifiers div.topnav-dd-outer {margin:0 0 0 4px;}
ul#topnav li#nav-air-purifier-filters div.topnav-dd-outer {width:300px; margin:0 0 0 11px;}
ul#topnav li#nav-dehumidifiers div.topnav-dd-outer {width:300px; margin:0 0 0 11px;}
ul li#nav-home-air-filters div.topnav-dd-outer {width:470px; margin-left:11px;}
ul li#nav-home-air-filters div.topnav-dd-outer ul {width:215px;}
ul li#nav-learning-center div.topnav-dd-outer {width:230px; margin-left:-74px;}
ul li#nav-customer-support div.topnav-dd-outer {width:230px; margin-left:-57px;}
ul#topnav li:hover div.topnav-dd-outer {left:auto;}
div.topnav-dd-inner {position:relative;background:#ebebeb repeat;margin-left:17px;margin-bottom:-5px;padding:0 0 0 0;}
Here is my HTML: Code: <div class="clearfix clear" id="top-nav-wrapper">
<ul class="clearfix" id="topnav">
<li class="first-level" id="nav-air-purifiers"><a class="first-level" href="/video"><span>Air Purifiers</span></a>
<div class="topnav-dd-outer">
<div class="topnav-dd-inner clearfix">
<ul class="three-col clearfix">
<li><h2>Shop by Brand</h2></li>
<li><a href="category.asp?subcat=Air-Purifiers&linkid=globalNav2">View All Brands</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=AirFree">AirFree</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Airgle">Airgle</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=AirTamer">AirTamer</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Alen">Alen</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Aller">AllerAir</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Austin-Air">Austin Air</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=BlueAir">BlueAir</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Coway">Coway</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Honeywell">Honeywell</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=IQAir">IQAir</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=LightAir">Light Air</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=SHA">Sharper Image</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=whirlpool">Whirlpool</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&manufacturer=Oreck">Oreck</a></li>
</ul>
<ul class="three-col clearfix">
<li><h2>Shop by Needs</h2></li>
<li><a href="lc_home.asp?linkid=globalNav">Test Results</a></li>
<li><a href="allergy.asp?linkid=globalNav">Allergy</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=Asthma&linkid=globalNav">Asthma</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=Dust&linkid=globalNav">Dust</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=Odor&linkid=globalNav">Odor</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=Smoke&linkid=globalNav">Smoke</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=Bacteria+Flu+Virus&linkid=globalNav">Bacteria/Flu/Virus</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=Mold&linkid=globalNav">Mold</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=Pet+Odor&linkid=globalNav">Pet Odor/Dander</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=Chemical&linkid=globalNav">Chemical</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=UV+Ultraviolet&linkid=globalNav">UV/Ultraviolet</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=ionic&linkid=globalNav">Ionic</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=Energy+Star&linkid=globalNav">Energy Star</a></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=Wildfires&linkid=globalNav">Wildfires</a></li>
</ul>
<ul class="three-col clearfix">
<li><h2>Special Deals</h2></li>
<li><a href="category.asp?subcat=Air-Purifiers&fl=Specials">Specials</a></li>
<li><a href="category.asp?search=whole+house">Whole House</a></li>
<li><a href="category.asp?search=package">Package Deals</a></li>
<li style="padding:12px 0 0 0"><h2>Help Me Choose</a></h2></li>
<li><a href="lc_top10.asp?linkid=globalNav">Top 10 Air Purifiers</a></li>
<li><a href="top_air_purifier_brands.asp?linkid=globalNav">Brand Comparisons</a></li>
<li><a href="lc_home.asp?linkid=globalNav">Air Purifier Test Results</a></li>
<li><a href="reviews2.asp?linkid=globalNav">Air Purifier Reviews</a></li>
<li><a href="comparisonChart.asp?linkid=globalNav">Comparison Chart</a></li>
</ul>
</div>
</div><!--/ .topnav-dd-outer, .topnav-dd-inner -->
<li class="first-level" id="nav-air-purifier-filters"><a class="first-level" href="/briefing-room"><span>Air Purifier Filters</span></a>
<div class="topnav-dd-outer">
<div class="topnav-dd-inner clearfix">
<ul class="two-col clearfix">
<li><h2>Shop for Replacement Air Filters</h2></li>
<li><a href="replacementfilters.asp?linkid=globalNav2">View All Replacement Air Filters</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=Airgle">Airgle</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=AirTamer">AirTamer</a></li>
<li><a href="alenreplacementfilters.asp?linkid=globalNav2">Alen</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=Aller">AllerAir</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=Austin-Air">Austin Air</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=BlueAir">BlueAir</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=Coway">Coway</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=Honeywell">Honeywell</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=Hunter">Hunter</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=IQAir">IQAir</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=Sharp">Sharp</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=Whirlpool">Whirlpool</a></li>
<li><a href="category.asp?subcat=Air-Filters&manufacturer=Other">Other</a></li>
</ul>
</div>
</div><!--/ .topnav-dd-outer, .topnav-dd-inner -->
</li>
<li class="first-level" id="nav-dehumidifiers"><a class="first-level" href="/issues"><span>Dehumidifiers</span></a>
<div class="topnav-dd-outer">
<div class="topnav-dd-inner clearfix">
<ul class="one-col clearfix">
<li><h2>Shop for Dehumidifiers</h2></li>
<li><a href="category.asp?subcat=Dehumidifiers&linkid=globalNav2">View All Dehumidifiers</a></li>
<li><a href="category.asp?subcat=Dehumidifiers&manufacturer=Alen">Alen</a></li>
<li><a href="category.asp?subcat=Dehumidifiers&manufacturer=Comfort-Aire">Comfort-Aire</a></li>
<li><a href="category.asp?subcat=Dehumidifiers&manufacturer=Danby">Danby</a></li>
<li><a href="category.asp?subcat=Dehumidifiers&manufacturer=DeLonghi">DeLonghi</a></li>
<li><a href="category.asp?subcat=Dehumidifiers&manufacturer=Sunpentown">Sunpentown</a></li>
</ul>
</div>
</div><!--/ .topnav-dd-outer, .topnav-dd-inner -->
</li>
<li class="first-level" id="nav-home-air-filters"><a class="first-level" href="/administration"><span>Home Air Filters</span></a>
<div class="topnav-dd-outer">
<div class="topnav-dd-inner clearfix">
<ul class="two-col clearfix">
<li><h2>Shop by Needs</h2></li>
<li><a href="homeFilters.asp?linkid=globalNav2">Home Filters by Alen</a></li>
<li><a href="category.asp?subcat=Home-Filters&fl=Healthy+Home+%26+Basic+HVAC+Care">Healthy Home</a></li>
<li><a href="category.asp?subcat=Home-Filters&fl=Allergy+Plus">Allergy Plus</a></li>
<li><a href="category.asp?subcat=Home-Filters&fl=Asthma+%26+Respiratory+Sensitivity">Asthma & Respiratory Sensitivity</a></li>
<li><a href="category.asp?subcat=Home-Filters&fl=HVAC+Filters">HVAC Filters</a></li>
</ul>
<ul class="two-col clearfix">
<li><h2>Shop by Rating</h2></li>
<li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv11-Gold-5in">Gold Merv 11 5"</a></li>
<li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv11-Gold-1in">Gold Merv 11 1"</a></li>
<li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv-13-Plat-1in">Platinum Merv 13 1"</a></li>
<li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv13-Plat-5in">Platinum Merv 13 5"</a></li>
<li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv8-silver">Silver Merv 8 1"</a></li>
<li><a href="category.asp?subcat=Home-Filters&manufacturer=Merv8-silver-5in">Silver Merv 8 5"</a></li>
<li><a href="category.asp?subcat=Whole-House&manufacturer=EnviroSept">Envirosept</a></li>
</ul>
</div>
</div><!--/ .topnav-dd-outer, .topnav-dd-inner -->
</li>
<li class="first-level" id="nav-learning-center"><a class="first-level" href="/about"><span>Learning Center</span></a>
<div class="topnav-dd-outer">
<div class="topnav-dd-inner clearfix">
<ul class="two-col clearfix">
<li><h2>Get Informed Now!</h2></li>
<li><a href="lc_top10.asp?linkid=globalNav2">Top 10 Air Purifiers</a></li>
<li><a href="top_air_purifier_brands.asp?linkid=globalNav2">Brand Comparisons</a></li>
<li><a href="lc_home.asp?linkid=globalNav2">Air Purifier Test Results</a></li>
<li><a href="reviews2.asp?linkid=globalNav2">Air Purifier Reviews</a></li>
<li><a href="comparisonChart.asp?linkid=globalNav">Comparison Chart</a></li>
<li><a href="lc_Allergy-allergens.asp">Allergy</a></li>
<li><a href="lc_Asthma-allergicAsthma.asp">Asthma</a></li>
<li><a href="lc_Bacteria-uvViruses.asp">Bacteria and Flu Viruses</a></li>
<li><a href="lc_chemical.asp">Chemical</a></li>
<li><a href="lc_dust.asp">Dust</a></li>
<li><a href="lc_flooding.asp">Flooding</a></li>
<li><a href="lc_ionProducers-negativeIons.asp">Ion Producers</a></li>
<li><a href="lc_Mold-allergies.asp">Mold</a></li>
<li><a href="lc_odor.asp">Odor</a></li>
<li><a href="lc_pets.asp">Pets</a></li>
<li><a href="lc_Smoke-secondhandSmoke.asp">Smoke</a></li>
<li><a href="lc_homefilters.asp">Home Filters</a></li>
<li><a href="lc_health.asp">For Your Health</a></li>
</ul>
</div>
</div><!--/ .topnav-dd-outer, .topnav-dd-inner -->
</li>
<li class="first-level" id="nav-customer-support"><a class="first-level" href="/our-government"><span>Customer Support</span></a>
<div class="topnav-dd-outer">
<div class="topnav-dd-inner clearfix">
<ul class="two-col clearfix">
<li><h2>Need Help?</h2></li>
<li><a href="help.asp?linkid=globalNav2">Help</a></li>
<li><a href="contactcustomerservice.asp?linkid=globalNav2">Customer Service</a></li>
<li><a href="returning.asp?linkid=globalNav2">Returns</a></li>
<li><a href="contactus.asp?linkid=globalNav2">Contact Us</a></li>
</ul>
</div>
</div><!--/ .topnav-dd-outer, .topnav-dd-inner -->
</li>
</ul>
</div>
Thank you to all in advance for you help. Much appreciated Ok for some reason for the life of me I cant get this navigation to render right in Firefox. Normaly I have the issues with IE buts its firefox this time. Can some one take a quick look at ... http://dev.signaturewebmedical.com/...meticdentistry/ here is the css Code:
body {
background: url("images/bg.jpg") repeat;
font: 12px Verdana, Arial, Helvetica, sans-serif;
margin-right:0px;
margin-left:0px;
margin-top:0px;
padding:0px;
}
a{
color:blue;
}
a:hover{color:red;}
#frame {
width:820px;
height:;
padding:0px;
text-align:left;
border-left-width: 0px;
border-right-style: solid;
border-left-style: solid;
border-left-color: #889db3;
border-right-width: 0px;
border-right-color: #ffffff;
}
#topleft{
position:absolute;
left:0px;
top:0px;
width:546px;
}
#logo {
height:72px;
width:546px;
padding-top:0px;
padding-left:0px;
}
#menudiv{
position:absolute;
width:675px;
top:141px;
left:10px;
height:26px;
FONT-FAMILY:Verdana, Arial, Helvetica, sans-serif;
LIST-STYLE-TYPE: none;
FONT-VARIANT: small-caps;
padding-left:0px;
border-top:1px #beb088 solid;
border-bottom:1px #beb088 solid;
text-align:left;
}
html>body #menudiv{
left:60px;
}
#menu{
LIST-STYLE-TYPE: none;
FONT-VARIANT: small-caps;
margin-left:-50px;
}
#menu A {
PADDING-RIGHT: 6px; PADDING-LEFT: 5px;
FLOAT: left;
PADDING-BOTTOM: 0px;
COLOR: #000;
PADDING-TOP: 6px;
height:20px;
font-weight: bold;
TEXT-DECORATION: none;
text-shadow: black 3px 3px, yellow -3px -3px;
font-size:11px;
}
#menu A:hover {
color:white;
background-color:tan;
}
#menu LI {
DISPLAY: inline;
MARGIN: 0px;
TEXT-ALIGN: left;
}
hr{
text-align:left;
padding:0px;
width:620px;
margin:2px;
height:1px;
color:#beb088;
style:noshade;
}
#topright{
position:absolute;
top:50px;
left:460px;
}
#contenthome{
float:left;
margin-top:20px;
width:630px;
margin-bottom:20px;
}
html>body #contenthome{
margin-top:120px;
}
#contenthome p{
margin-left:15px;
font-size:110%;
line-height:110%;
}
#contenthome p.first{
padding-top:10px;
}
#footer{
height:40px;
float:left;
width:640px;
padding:5px;
text-align:center;
font: 10px Verdana, Arial, Helvetica, sans-serif;
color:#111111;
border-top:1px #beb088 solid;
}
#footer a{
color:#666;
font-weight: normal;
}
#footer a:hover{
color: #444444;
font-weight:bold;
}
.bigger {font-size:160%;}
.blu {color:blue;}
.blue2 {color:#0099cc;}
.orange {color:orange;}
.bold{font-weight:bold;}
.black1{color:#000;}
h1{
color:navy;
font-size: 130%;
padding:5px;
margin:0;
}
.nobold{font-weight:normal;}
}
h5{
color:#889db3;
margin:0;
padding:0;
}
h3{
font-size:100%;
color:navy;
margin:0;
padding:5px;
}
#contenthome img{
padding:5px;
padding-right:15px;
}
#contenthome ul li{
font-size:90%;
}
#contenthome ul li a{
color:blue;
text-decoration:none;
}
#contenthome ul li a:hover{
color:red;
text-decoration:underline;
}
#solutions ul{
list-style-type:square;
color:blue;
}
#solutions ul li{
padding:3px;
padding-bottom:8px;
color:#555;
}
#solutions ul li a{
font-weight:bold;
font-size:115%;
text-decoration:underline;
color:blue;
}
#contenthome a img{
border:1px tan solid;
padding:0;
margin:0;
}
#contenthome a:hover img{
border:1px blue solid;
}
#contactdiv{
float:right;
width:200px;
height:110px;
padding:10px;
text-align:center;
}
#contactdiv a{
font-size:150%;
color:red;
font-weight:bold;
text-align:center;
text-decoration:underline;
}
#contactdiv a:hover{
color:blue;
}
#portfoliodiv{
float:right;
width:200px;
height:auto;
padding:10px;
text-align:center;
}
p.quote{
font-size:110%;
display:block;
width:400px;
padding-left:80px;
text-align:center;
font-style:italic;
}
Hello. I know all about the damn IE6 'hover' menu problem, yet have only just came to not being able to fix it with a new site I edited. In IE7/8 and Firefox and Opera, the menu looks and works great. It's a horizontal menu. Unfortunately, in IE6 each top menu item or header is using the full width of the page and thus each one is on a new line, completely screwing everything up. I'm using the .htc file from here (http://www.xs4all.nl/~peterned/csshover.html) to fix some things, but the menu still isn't displayed horizontally properly, each main header menu is on a new line instead of all on one line. Please, can someone tell me what stupid line of code I need to fix IE6? I'm sorry, but unfortunately I cannot link to the page as it's a secure web page only viewable to admins and customers. You should be able to edit the links in the href code though or just replace them with '#' just to test. And don't worry about the arrow_grey images as all that is is an image that changes between one or the other when you hover over the menu (a right arrow or a down arror when hovering over the menu). CSS: Code:
#menubar-new {
width: 100%;
background-color: #069;
color: #CCC;
border-top: 1px solid black;
border-bottom: 1px solid black;
vertical-align: middle;
white-space: nowrap;
padding-bottom: 1px;
margin-bottom: 1px;
z-index: 99;
font-size: small;
}
ul#navigation-1 {
margin:0;
padding:0;
list-style:none;
width:100%;
height:21px;
border-top:1px solid #006699;
border-bottom:1px solid #006699;
font-weight:bold;
font-size:inherit;
font-family:inherit;
}
ul#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:auto;
border-top:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
}
ul#navigation-1 li a span, ul#navigation-1 li:hover a span, ul#navigation-1 li a:hover span {
position:relative;
vertical-align:top;
font-size:12pt;
color:#FFFFFF;
}
ul#navigation-1 li a span.onhover1, ul#navigation-1 li:hover a span.onhover2, ul#navigation-1 li a:hover span.onhover2 {
display:inline;
vertical-align:middle;
}
ul#navigation-1 li a span.onhover2, ul#navigation-1 li:hover a span.onhover1, ul#navigation-1 li a:hover span.onhover1 {
display:none;
vertical-align:middle;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited, ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
padding-top:2px;
padding-bottom:5px;
padding-left:6px;
padding-right:6px;
display:block;
text-align:left;
text-decoration:none;
color:#ffffff;
width:auto;
height:13px;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited {
background:#006699;
}
ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
background:#2288BB;
}
ul#navigation-1 li ul.navigation-2 {
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:auto;
position:absolute;
top:21px;
left:-1px;
}
ul#navigation-1 li:hover ul.navigation-2 {
display:block;
border-top:none;
}
ul#navigation-1 li ul.navigation-2 li {
width:100%;
clear:left;
border-top:none;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited, ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover {
clear:left;
padding-top:2px;
padding-bottom:5px;
padding-left:6px;
padding-right:6px;
width:auto;
position:relative;
z-index:1000;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited {
background:#006699;
}
ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover {
background:#2288BB;
}
ul#navigation-1 li ul.navigation-2 li a span, ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span {
position:relative;
vertical-align:top;
font-size:12pt;
}
ul#navigation-1 li ul.navigation-2 li a span {
color:#FFFFFF;
}
ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span {
color:#000000;
}
HTML: Code:
<div id="menubar-new">
<div id="menu-container">
<ul id="navigation-1">
<li>
<a href="Home.shtml" title="Status">Status</a>
</li>
<li><a href="#" title="Maintenance">Maintenance <span class="onhover1"><img alt="" border="0" src="images/arrow_grey2.gif"></span><span class="onhover2"><img alt="" border="0" src="images/arrow_grey2_down.gif"></span></a>
<ul class="navigation-2">
<li><a href="BusinessReport.shtml?DeferQuery=true">Businesses</a></li>
<li><a href="TerminalReport.shtml?DeferQuery=true">Terminals</a></li>
<li><a href="BankRecordReport.shtml?DeferQuery=true">BankRecords</a></li>
<li><a href="ContractReport.shtml?DeferQuery=true">Contracts</a></li>
<li><a href="RegEReport.shtml?DeferQuery=true">RegEs</a></li>
<li><a href="MessageReport.shtml?DeferQuery=true">Messages & Alerts</a></li>
<li><a href="UserReport.shtml?DeferQuery=true">Users & Security</a></li>
<li><a href="TroubleTicketReport.shtml?DeferQuery=true">Call Tickets</a></li>
<li><a href="WizardReport.shtml?DeferQuery=true">Wizards</a></li>
<li><a href="WirelessAssociationReport.shtml?DeferQuery=true">Wireless Associations</a></li>
<li><a href="WorkflowReport.shtml?DeferQuery=true">Workflows</a></li>
<li><a href="BillingGroupReport.shtml?DeferQuery=true">Billing Groups</a></li>
<li><a href="RecurringChargeReport.shtml?DeferQuery=true">Recurring Adjustments</a></li>
<li><a href="AdjustmentReport.shtml?DeferQuery=true">Adjustment Journal</a></li>
</ul>
</li>
<li><a href="#" title="Reports">Reports <span class="onhover1"><img alt="" border="0" src="images/arrow_grey2.gif"></span><span class="onhover2"><img alt="" border="0" src="images/arrow_grey2_down.gif"></span></a>
<ul class="navigation-2">
<li><a href="ComplianceReport.shtml?DeferQuery=true&$lr_override=true">Compliance Report</a></li>
<li><a href="ComplianceDetail.shtml?DeferQuery=false&$lr_override=true">Compliance Detail Report</a></li>
<li>
...
Thanks! Hi there, I'm playing around with a menu that is based on the 'suckerfish' method and basically, I am trying to change the background colour of one of the menu options. The problem is, I can't seem to do this in isolation - i.e. without messing up the other items in the menu. I've tried applying a background image to the <li> item, with no joy and I've also tried creating a separate div layer for this one option - again with no joy. **EDIT** Just worked out how to do this.... All I did was add [CODE]id="selected" Hi guys wonder if i could get a hand, I have a problem with an applet from the bbcnews website - essentially my portal has dynamic content, and sometimes this is pushed against the menu bar. It works fine, until used in IE6/7, when you roll over the parent on the menu bar, the child goes under the applet, again only in IE. I have tried every type of z-index trick going to no avail - is it an issue with the JScript or css, and more to the point is there a fix? Thanks a million for you help in advance, as theres no upload script here and this portal is in a secure location i'll copy the test code below for you to generate an htm with. <--------> CODE <--------> Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
z-index:5;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}
</style>
<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>
<table width="200" border="0">
<tr>
<td><ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a>
<ul>
<li><a href="#">Echeneis</a>
<ul>
<li><a href="#">Sharksucker</a></li>
<li><a href="#">Whitefin Sharksucker</a></li>
</ul>
</li>
<li><a href="#">Phtheirichthys</a>
<ul>
<li><a href="#">Slender Suckerfish</a></li>
</ul>
</li>
<li><a href="#">Remora</a>
<ul>
<li><a href="#">Whalesucker</a></li>
<li><a href="#">Spearfish remora</a></li>
<li><a href="#">Marlinsucker</a></li>
<li><a href="#">Remora</a></li>
<li><a href="#">Ceylonese remora</a></li>
</ul>
</li>
<li><a href="#">Remorina</a>
<ul>
<li><a href="#">White suckerfish</a></li>
</ul>
</li>
<li><a href="#">Rhombochirus</a>
<ul>
<li><a href="#">R. osteochir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tilefishes</a>
<ul>
<li><a href="#">Caulolatilus</a></li>
<li><a href="#">Lopholatilus</a></li>
<li><a href="#">Malacanthus</a></li>
</ul>
</li>
<li><a href="#">Bluefishes</a>
<ul>
<li><a href="#">Pomatomus</a></li>
<li><a href="#">Scombrops</a></li>
<li><a href="#">Sphyraenops</a></li>
</ul>
</li>
<li><a href="#">Tigerfishes</a>
<ul>
<li><a href="#">Amniataba</a></li>
<li><a href="#">Bidyanus</a></li>
<li><a href="#">Hannia</a></li>
<li><a href="#">Hephaestus</a></li>
<li><a href="#">Lagusia</a></li>
<li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li>
<li><a href="#">Pelates</a></li>
<li><a href="#">Pelsartia</a></li>
<li><a href="#">Pingalla</a></li>
<li><a href="#">Rhyncopelates</a></li>
<li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li>
<li><a href="#">Terapon</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a>
<ul>
<li><a href="#">Anabas</a></li>
<li><a href="#">Ctenopoma</a></li>
</ul>
</li>
<li><a href="#">Labyrinthfishes</a>
<ul>
<li><a href="#">Belontia</a></li>
<li><a href="#">Betta</a></li>
<li><a href="#">Colisa</a></li>
<li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li>
<li><a href="#">Parosphromenus</a></li>
<li><a href="#">Pseudosphromenus</a></li>
<li><a href="#">Sphaerichthys</a></li>
<li><a href="#">Trichogaster</a></li>
<li><a href="#">Trichopsis</a></li>
</ul>
</li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
<li><a href="#">Gobioidei</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>
</ul></td>
<td><!-- BBCi Syndication --><noscript><a href="http://www.bbc.co.uk/news" target="_BBC"><img src="http://newsimg.bbc.co.uk/shared/bsp/hi/services/htmlsyndication/img/synd_js_error_js-inactive.gif" width="165" height="200" border="0" alt="BBCi: Javascript is not available on this browser"/></a></noscript><script src="http://www.bbc.co.uk/syndication/html/jsserver/1096038497229" language="JavaScript" style="z-index:1;" type="text/javascript"></script><!-- /BBCi Syndication --></td>
</tr>
</table>
</body>
</html>
i m having problem in displaying menu and sub menu. pls check the code. HTML <html> <head> <title> List of Hospital values </title> <link href="new.css" rel="stylesheet" type="text/css"/> </head> <body> <ul id="navbar"> <li><a href="##">IPD Maintenance</a> <ul> <li><a href="#">Registration</a></li> <li><a href="#">Diagnose</a></li> <li><a href="#">Laboratary Test</a></li> </ul> </li> <li><a href="#">OPD Maintenance</a> <ul> <li><a href="#">Registration</a></li> <li><a href="#">Diagnose</a></li> <li><a href="#">Laboratary Test</a></li> <li><a href="#">Admission</a></li> <li><a href="#">Services </a></li> </ul> </li> <li><a href="#">Donation Management</a> <ul> <li><a href="">Donor detail</a></li> <li><a href="">Lab Test detail</a></li> <li><a href="#">Donor Medication</a></li> </ul> </li> <li><a href="#">Billing</a> <ul> <li><a href="#">IPD billing</a></li> <li><a href="#">OPD billing</a></li> </ul> </li> <li> <a href="#">Administrative Task</a> <ul> <li><a href="#">Manage user</a></li> <ul> <li><a href="#">Add User</a></li> <li><a href="#">Delete User</a></li> </ul> <li><a href="#">Manage Doctors</a></li> <ul> <li><a href="#">Edit Doctor</a></li> <li><a href="#">Add Doctor</a></li> <li><a href="#">Delete Doctor</a></li> </ul> <li><a href="#">Manage Staff</a></li> <ul> <li><a href="#">Edit Staff</a></li> <li><a href="#">Add Staff</a></li> <li><a href="#">Delete Staff</a></li> </ul> <li><a href="#">Manage Departments</a></li> <ul> <li><a href="##">Add Department</a></li> <li><a href="#">Delete Department</a></li> <li><a href="#">Edit Department</a></li> </ul> <li><a href="#">Manage Rooms</a></li> <ul> <li><a href="#">Add Room</a></li> <li><a href="#">Delete Room</a></li> <li><a href="#">Edit Room</a></li> </ul> </ul> </li> <li><a href="#">Laboratory</a> <ul> <li><a href="">Laboratory detail</a></li> <li><a href="">Lab Test detail</a></li> </ul> </li> <li><a href="#">Organ Management</a> <ul> <li><a href="">Laboratory detail</a></li> <li><a href="">Lab Test detail</a></li> </ul> </li> <li><a href="#">Blood Management</a> <ul> <li><a href="">Blood Taken</a></li> <ul> <li><a href="">Hospitals</a></li> <li><a href="">Donors</a></li> </ul> <li><a href="">Blood Endorsed</a></li> <ul> <li><a href="">Persons</a></li> <li><a href="">Hospitals</a></li> <li><a href="">IPD</a></li> </ul> </ul> </li> <li><a href="#">Emergency Services</a> <ul> <li><a href="">Estaff Detail</a></li> <li><a href="">Add Estaff</a></li> <li><a href="">Delete Estaff Detail</a></li> <li><a href="">Edit Estaff Detail</a></li> <li><a href="">Ambulance Detail</a></li> <li><a href="">Ambulance Route</a></li> </ul> </li> <li><a href="#">Inventory</a> <ul> <li><a href="">Suppliers</a></li> <li><a href="">Purchase Receipt</a></li> <li><a href="">Purchase return receipt</a></li> <li><a href="">Sales Receipt</a></li> <li><a href="">Sales Return Receipt</a></li> </ul> </li> </ul> </body> </html> AND THE CSS FILE IS AS FOLLOWING #navbar { margin: 0; padding: 0; height: 1em; } #navbar li { list-style: none; float: left; } #navbar li a { display: block; padding: 3px 8px; background-color: #5e8ce9; color: #fff; text-decoration: none; } #navbar li ul { display: none; width: 10em; /* Width to help Opera out */ background-color: #69f;} #navbar li:hover ul { display: block; position: absolute; margin: 0; padding: 0; } #navbar li:hover li { float: none; } #navbar li:hover li a { background-color: #69f; border-bottom: 1px solid #fff; color: #000; } #navbar li li a:hover { background-color: #8db3ff; } WAITING FOR YOUR HELP Hi all, I am trying to style a drop-down menu. I'd like the hover state to have a transparent cut out on the menu... and the bottom of the drop down to be rounded. Probably makes more sense in the picture... which I am apparently not allowed to post. grrr. So think little triangle, but instead of being a different color, it is a transparent cut out. I've been banging my head into the keyboard for a couple of hours and can't seem to find the right way to tackle this. The problem is compounded by some of the menu items not have submenus. I'd like those to hover as if they were the bottom link in the drop down... ie, a notched edge and rounded bottom border. I would really appreciate anyone pointing me in the right direction here. Many thanks, -helga I have created a style sheet drop down menu and it works fine in mozilla and most times in works in ie however sometimes the menu will not drop down in ie but when you hit refresh the menu drops down. any ideas. Below is my stylesheet for creating a css drop down menu - I am using csshover.htc for internet explorer and this in the html <!--[if IE]> <style type="text/css" media="screen"> body { behavior: url(<%lcURLTheme2%><%lcThemeName%>css/csshover.htc);} #menu ul li {float: left; width: 100%;} #menu ul li a {height: 1%;} </style> <![endif]--> #menu { z-index: 2000; background: url(../images/hoz_menu_BG.gif) repeat-x #8898BC; background-color: #8898BC; color: black; position: absolute; width: 100%; text-align: center; left: 0; cursor: pointer; font-size: .9em; font-weight: bold; font-family: Arial, Helvetica, sans-serif; border-bottom: 5px solid #CCD6EB; } /*top level for student*/ #menu #st ul { list-style: none; margin: 0; padding: 0; width: 19.7%; float: left; } /*2nd level for student*/ #menu #st ul ul { width: 80%; position: absolute; left: 0; z-index: 500; } /*3rd level for student*/ #menu #st ul ul ul { width: 90%; position: absolute; left: 100%; top: 1px; } #menu a { color: #FFFFFF; background-color: transparent; text-decoration: none; text-align: center; display: block; padding: 4px 2px 4px 5px; } #menu a:link { color: #FFFFFF; background-color: #4D678C; } #menu a:visited { color: #FFFFFF; background-color: #4D678C; } #menu a:hover { color: #000000; background-color: #ABBAD7; } #menu ul { border-right: 1px dotted #FFFFFF; } #menu li { position: relative; } #menu ul ul li {border-bottom: 1px solid #FFFFFF; } #menu ul ul { border-right: 1px solid #FFFFFF; } #menu ul ul { border-top: 1px solid #FFFFFF; } /*#menu ul ul ul { position: absolute; top: 0; left: 100%; }*/ div#menu ul ul , div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul { display: none; } div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul { display: block; } /*2nd menu colours - uses #menu styles and then overwrites them for top menu links*/ div#menu ul li li a { color: white; background-color: #4D678C; text-transform: capitalize; text-align: left; border-left: 1px solid #FFFFFF; } Hi this theme had an old dropdown menu that was acting weird in some browsers so I updated it with a plugin and now to need to customize it to look a certain way. There are a few stylesheets at work because of the plugin but I am unable to discern why the "Contact Us" text is off-center in the button. I can see that it seems to be too long, but I don't know why it is favoring the right side of the background, instead of being centered in the background. If someone could help me demystify this I would be MUCH obliged. I will post a link so that it can be inspected... When I am allowed after 4 more posts! Please inspect the elements (too much code to post with all different style sheets at play!). Thank you. EDIT: here is link: http://drewclifton.com/clients/northern-computer/ You can also see that the dropdown under 'Services' looks funky; I'm thinking a 'sliding door' solution would be appropriate yes? Thank you. How easy is it to create one of these where when you hover over a link a menu appears underneath? The code is here on an old Proboards test site: http://kayaoti.proboards.com/index.cgi The menu in the black bar is just one I used from a free code. It works fine except when you hover over the items, the drop-down tabs are out of alignment. I'm not code-savvy enough to know how to make them drop straight down or how to move them so they look nicer, but I'm guessing someone here could help me out in that regard. How can I edit the code (shown below) or whatever else to make the drop-down tabs look better aligned with the menu items? Code: <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 748px; background: #000; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu h2 { color: #000; background: #000; text-transform: uppercase; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #000 #000 #000 #000; margin: 0; padding: 2px 3px; } #menu a { color: #fff; background: #000000; text-decoration: none; } #menu a:hover { color: #fff; background: #000; } #menu li {position: relative;} #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} </style> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> <div id="menu" style="position:relative; left:301px; top:483px;"> <ul><li><a href="http://dominionwolves.proboards.com/"><IMG SRC="http://i44.tinypic.com/24zb1vq.png" border="0"></a></li></ul> <ul><li><IMG SRC="http://i43.tinypic.com/311lyra.png" style="position:relative; left:-40px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus">CSS Hover Navigation</a> <ul> <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li> <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li> <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><IMG SRC="http://i39.tinypic.com/2cne1d5.png" style="position:relative; left:0px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a> <ul> <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li> <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li> <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><IMG SRC="http://i40.tinypic.com/24ffxu1.png" style="position:relative; left:55px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li> <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a> <ul> <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a> <ul> <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li> <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li> <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li> <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li> <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li> <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <ul> <li><IMG SRC="http://i42.tinypic.com/15cerno.png" style="position:relative; left:65px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li> <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample --> <ul> <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a> <ul> <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li> <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li> <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li> <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li> <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li> <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
Howdy. Take a look here. The menu is dropping behind the div for the body section in IE. I've tried mucking with the z-index, but it doesn't seem to make a difference. Here's the menu code; Code:
#menu {
width:780px;
height:28px;
background: #CCCCCC url(images/menu_img.gif) no-repeat center top;
}
ul#nav {
padding: 0;
margin:0 25px 0 25px;
list-style: none;
}
li.navB {
float: left;
position: relative;
width: 230px;
margin:7px 0 7px 0;
font:bold 12px arial, verdana, sans-serif;
text-decoration:none;
color:#2F60C0;
}
li ul {
display: none;
position: absolute;
top: 15px;
left: 0;
padding:5px;
width:100px;
list-style:none;
margin:0;
z-index:3;
}
li ul li{
padding:2px;
width:100px;
list-style:none;
margin:auto;
}
li:hover ul, li.over ul{
display: block;
background:white;
border:1px solid #333333;
width:100px;
padding:5px;
position:absolute;
}
and the body code Code:
.product_container {
width:720px;
margin:auto;
margin-top:4px;
margin-bottom:4px;
border:1px solid black;
min-height:270px;
position:relative;
clear:both;
z-index:1;
}
.product_info {
float:left;
width:500px;
position:relative;
z-index:1;
}
.product_image {
float:right;
margin:auto;
margin-top:20px;
margin-bottom:20px;
position:relative;
font:10px arial;
color:#666666;
text-align:center;
z-index:1;
}
.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}
Any thoughts? Thanks Hi I have the following script is from http://tiernok.com/tt/dropdown/styles/caffeine.css and http://www.htmldog.com/articles/suckerfish/ that I am trying to modify. It runs fine both in IE and Netscape but look and feel is what I am trying to make it work. Here is the issue I am facing and have tried but couldn't figure it out 1. In IE when hovering over Services And Implementation there's too much gap between Services And Implementation and History1Histy1 as in FireFox it comes out fine but everything is overlapped. Want to have less gap between menu and sub-menu. 2. How can I increase the width for the menus and sub menus, as I want to fit everything in table width of 586. Code:
<html>
<head>
<title> Caffeinated Dropdowns </title>
<STYLE>
/**************************** Editable Pretty Stuff *****************/
/* Modification of the .ddMenu li item will require modification */
/* of the .ddVert width as well
/********************************************************************/
/* Menu List Items */
.ddMenu li{
width: 117px;
height: 20px;
background: #9C2B01;
color: #616F81;
font-weight: bold;
}
.ddMenu .top_lvl .mnu_foot{
background-color: #9C2B01;
height: 2px;
border-bottom: 1px solid #616F81;
width: 117px;
}
.ddMenu .top_lvl .mnu_head{
/* used to space from the top menu without losinghover focus */
border: 0px;
height: 1px;
background-color: #9C2B01;
width: 117px;
}
.ddMenu .top_lvl li{
background: #9C2B01;
border-right: 0px solid #dddddd
}
.ddHoriz .mnu_head, .ddHoriz .mnu_foot{
width: 1px;
}
.ddHoriz .mnu_foot{
display: none;
}
.ddVert li{
background-color: yellow;
}
.ddVert .top_lvl{
padding: 15px 0 15px 0;
border-bottom: 1px solid #616F81;
}
ul.ddVert li.mnu_foot, ul.ddVert li.mnu_head{
background-color: #9C2B01;
}
/* Menu List Items Hover */
.ddMenu li.sfhover, .ddMenu li:hover{
background-color: green;
color: #816A61;
z-index: 5;
cursor: default;
}
.ddMenu a:link { text-decoration: none; color: white }
.ddMenu a:visited { text-decoration: none; color: white }
.ddMenu a:hover { text-decoration: none; color: white }
/**************************** Required CSS **************************/
.ddMenu, .ddMenu ul { /**** all lists ****/
list-style: none; /* list style for menus */
margin: 0px; /* get rid of built-in margin */
padding: 0px; /* get rid of built-in padding */
display: block; /* display as block elements */
}
.ddMenu li{ /**** all list items ****/
float: left; /* float list items */
position: relative; /* position relative to siblings */
}
.ddMenu li a{ /**** all anchors in list items ****/
display: block; /* make anchor tags block tags */
width: 100%; /* 98% width to compensate for any borders
/* that get added without obviously stealing
/* hover space from user */
}
.ddMenu li ul{ /**** positioning for sub-menus ****/
position: absolute; /* position */
display: none; /* hide submenus */
}
.ddMenu li.sfhover ul.ulhover{ /**** show immediate submenu for IE ****/
display: block;
}
.ddMenu li:hover>ul{ /**** Show immediate submenu for compliant browsers ****/
display: block;
}
/**************************** Horizantal ***************************/
/* Sub-Menus need to drop down, Sub-Sub-Menus need to fly out to */
/* the right in a horizantal view */
ul.ddHoriz ul ul{
left: 100%;
top: 0;
}
.ddHoriz li ul{
top: 1.2em;
left: 0px;
}
/**************************** Vertical *****************************/
/* Menu needs a fixed width in vertical view to cause wrapping and */
/* sub-menus fly to the right by default */
.ddVert, .ddVert ul{
width: 10em;
}
.ddVert li ul{
top: 0px;
left: 100%;
}
</STYLE>
<script language="JavaScript" type="text/javascript"><!--//--><![CDATA[//><!--
//--- This script is heavily based upon the one published as part of the SuckerFish dropdown method.
//--- For more information, please visit: http://www.htmldog.com/articles/suckerfish/
ddHover = function() {
var ddMs = document.getElementsByTagName("UL");
for ( var t=0; t<ddMs.length;t++){
if(ddMs[t].className.indexOf("ddMenu") > -1){
var ddSMs = ddMs[t].getElementsByTagName("LI");
for (var i=0; i<ddSMs.length; i++) {
ddSMs[i].onmouseover = function(){
var ddsm = this.getElementsByTagName("UL")[0];
this.className+=" sfhover";
if(ddsm != null){ ddsm.className+= " ulhover"; }}
ddSMs[i].onmouseout = function(){
var ddsm = this.getElementsByTagName("UL")[0];
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
if(ddsm != null){ ddsm.className = ddsm.className.replace(new RegExp(" ulhover\\b"), ""); }
}
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", ddHover)
//--><!]]></script>
</head>
<body>
<TABLE width="586" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#9C2B01">
<TR><TD height="28" valign="center" bgcolor="#9C2B01" align="center">
<ul class="ddMenu ddHoriz">
<li class="mnu_head"></li>
<li class="top_lvl"><a href="" title="History of Chocolate">Customer Inform</a></li>
<li class="top_lvl"><font color="white">Services And Implementation</font>
<ul>
<li class="mnu_head"></li>
<li><a href="" title="The History of Tea">History1Histy1</a></li>
<li><a href="" title="The History of Tea">Services And Implementation History</a></li>
<li><a href="" title="The History of Tea">History3</a></li>
<li><a href="" title="The History of Tea">History4</a></li>
<li><a href="" title="The History of Tea">History5</a></li>
<li><a href="" title="The History of Tea">History6</a></li>
<li><a href="" title="The History of Tea">History7</a></li>
<li><a href="" title="The History of Tea">History8</a></li>
<li><a href="" title="The History of Tea">History9</a></li>
<li class="mnu_foot"></li>
</ul>
</li>
<li class="top_lvl"><a href="" title="History of Chocolate">About Us</a></li>
<li class="top_lvl"><a href="" title="History of Chocolate">Foreign Affiliation</a></li>
<li class="top_lvl"><a href="" title="History of Chocolate">Contact Us</a></li>
<li class="mnu_foot"></li>
</ul>
</TD></TR></TABLE>
</body>
</html>
Any help is appreciated. Thanks I have been tasked with building a CSS drop down menu system. I have worked out I can use a hover event to invoke the drop-downs (and hide them again). However. How would I invoke one and keep it visible if they went down to the sub-menu rather than just disappearing because they left the element the hover is applied to? |
|||||||