|
CSS - Css Drop Down Menu, When My Browser Is Refreshed It Becomes Disabled/stopsworking
hi im using a CSS drop down menu, when my browser is refreshed it becomes disabled/stopsworking. im using IE browser. i got the css drop down list script from the web.
can someone help me please! Similar TutorialsIs there a way to detect if the browser have disabled CSS? That way, I can redirect users to another page explaining that website won't function with his/her browser with disabled CSS. Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. 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. hey all, i have a strange problem... When the page opens the footer appears on top of the page content but if i refresh the page it goes to the bottom as expected?? really wierd can someone please help me with this? here is the page lin to see what i mean page with the problem and here is a link to me css css page Any ideas would be great. I am using firefox Thanks RF I have page that automatically changes the images in a container via css. Does anyone know if its possible for each image to have a different hyperlink? Would have done this in Flash but, IT Security is not on board with that yet. Any suggestions? Hi I have been trying to get a cross browser Dropdown css menu to work on my site. I have got it working in Firefox and IE7. The problem is in IE6. The way the author set this up is there are two .css files, one is specific for IE6 and is called in a different manner, like this : Code: <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" href="css/dropdown_ie.css" /> <![endif]--> I dont think this is working for me. It is strange because the page that I get the files from has a demo of the menu and I tested it in FF, IE7, and IE6 and it worked. When I put it on my page it works everywhere but IE6. Am I calling the .css wrong? Here is my menu code: Code:
<div class="menu">
<ul>
<li><a class="hide" href="index.php">HOME</a>
<!--[if lte IE 6]>
<a href="index.php">HOME
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="company.php">COMPANY</a>
<!--[if lte IE 6]>
<a href="company.php">COMPANY
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="contact.php">CONTACT</a>
<!--[if lte IE 6]>
<a href="contact.php">CONTACT
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="consulting/consulting.php">CONSULTING</a>
<!--[if lte IE 6]>
<a href="consulting/consulting.php">CONSULTING
<table><tr><td>
<![endif]-->
<ul>
<li><a href="consulting/confined_space.php" title="Confined Spage Consulting">Confined Space</a></li>
<li><a href="consulting/emergency_planning.php" title="Emergency Planning Consulting">Emergency Planning</a></li>
<li><a href="consulting/regulatory_compliance.php" title="Regulatory Compliance Consulting">Reg. Compliance</a></li>
<li><a href="consulting/development.php" title="Program and Procedure Development Consulting">Procedure Dev.</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="training/training.php">TRAINING</a>
<!--[if lte IE 6]>
<a href="training/training.php">TRAINING
<table><tr><td>
<![endif]-->
<ul>
<li><a href="training/open.php" title="Open Schedule Training">Open Course</a></li>
<li><a href="training/rescue.php" title="Confined Space Training">Confined Space</a></li>
<li><a href="training/spill_response.php" title="Spill Response Training">Spill Response</a></li>
<li><a href="training/hazmat.php" title="Hazardous Materials Training">HazMat. Response</a></li>
<li><a href="training/im.php" title="Incident Management Training">Incident Management</a></li>
<li><a href="training/extinguisher.php" title="Fire Extinguisher Training">Fire Extinguisher</a></li>
<li><a href="training/cpr.php" title="First Aid and CPR Training">First Aid & CPR</a></li>
<li><a href="training/whmis.php" title="Workplace Hazardous Materials Information System">WHMIS</a></li>
<li><a href="training/dangerous_goods.php" title="Dangerous Goods Training">Dangerous Goods</a></li>
<li><a href="training/high_angle.php" title="High Angle Rescue Training">High Angle Rescue</a></li>
<li><a href="training/waste_management.php" title="Waste Management Training">Waste Management</a></li>
<li><a href="training/fall.php" title="Fall Protection Training">Fall Protection</a></li>
<li><a href="training/lockout.php" title="Lockout Training">Lockout</a></li>
<li><a href="training/air.php" title="Air Monitoring Training">Air Monitoring</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="response.php">RESPONSE</a>
<!--[if lte IE 6]>
<a href="response.php">RESPONSE
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="media/media.php">MEDIA</a>
<!--[if lte IE 6]>
<a href="media/media.php">MEDIA
<table><tr><td>
<![endif]-->
<ul>
<li><a href="media/news.php" title="Industry Related News">News Releases</a></li>
<li><a href="media/photos/photos.php" title="Standard Response Services in action">Photo's</a></li>
<li><a href="media/links.php" title="Helpfull Links">Links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
Menu I am using from the authors site.: http://www.cssplay.co.uk/menus/dd_valid.html Thanks for looking hi, In my site, I'm trying to make the menu in a table. The table has many images, which only some are links. I did it so that hovering over a link cell, changes the image in the cell (and actually all of the link images are from one file, which everytime I show a different part of him). Now, everything seems to be working fine in Firefox and IE7, however, naturally IE6 doesn't work. Actually only the first cell, "Home", works, and the others don't. Any idea how can I fix it? here is the html for the menu: <div id="menu"> <table width="679" border="0" cellpadding="0" cellspacing="4"> <tr> <td class="link" id="nav_home"><a href="../home/index.htm" title="home">home</a></td> <td background="../../images/1.jpg"> </td> <td background="../../images/2.jpg"> </td> <td class="link" id="nav_about"><a href="../about/main.htm" title="about">about us</a></td> <td background="../../images/3.jpg"> </td> <td background="../../images/4.jpg"> </td> <td background="../../images/5.jpg"> </td> <td class="link" id="nav_recruit"><a href="../recruit/" title="recruit">recruit</a></td> <td background="../../images/6.jpg"> </td> </tr> <tr> <td background="../../images/7.jpg"> </td> <td background="../../images/8.jpg"> </td> <td class="link" id="nav_company"><a href="../company/outline.htm" title="company">company</a></td> <td background="../../images/9.jpg"> </td> <td background="../../images/10.jpg"> </td> <td class="link" id="nav_clients"><a href="../clients/clients.htm" title="clients">clients</a></td> <td background="../../images/11.jpg"> </td> <td background="../../images/12.jpg"> </td> <td class="link" id="nav_contacts"><a href="../contacts/contacts.htm" title="contacts">contacts</a></td> </tr> </table> </div> and here is the css: /* Regular menu items */ #nav_company {background: transparent url(../images/menu.jpg) 0 0 no-repeat;} #nav_about {background: transparent url(../images/menu.jpg) -71px 0 no-repeat;} #nav_clients {background: transparent url(../images/menu.jpg) -142px 0 no-repeat;} #nav_recruit {background: transparent url(../images/menu.jpg) -213px 0 no-repeat;} #nav_contacts {background: transparent url(../images/menu.jpg) -284px 0 no-repeat;} #nav_home {background: transparent url(../images/menu.jpg) -355px 0 no-repeat;} /* Hovered menu items */ #nav_company a:hover {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;} #nav_about a:hover {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;} #nav_clients a:hover {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;} #nav_recruit a:hover {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;} #nav_contacts a:hover {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;} #nav_home a:hover {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;} /* Active menu items */ body#company #nav_company {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;} body#about #nav_about {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;} body#clients #nav_clients {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;} body#recruit #nav_recruit {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;} body#contacts #nav_contacts {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;} body#home #nav_home {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;} I really need help... Thanks a lot!! For my website at btccaction.co.uk I have chosen a CSS menu at the top as the ideal solution. However I'm having some problems positioning it so that the menu is in the same position in both Firefox and Internet explorer, and on various screen sizes. Does anyone have any tips for me here regarding positioning elements such as this so that they appear in the same position no matter what the operating system variables? For reference I'm using the code from he http://www.cssplay.co.uk/menus/ultimate.html Any help kindly appreciated. Andy Hi all I'm just wondering if anyone can help me with a few corrections I need to make on a site I'm developing ? I've recently developed a site on Mac OS X and been viewing it using Firefox whilst working on it, the site should look like this : http://www.timetraveltours.net/firefox.jpg However when viewed in Safari I have found that there is a problem with the menu bar as seen here : http://www.timetraveltours.net/safari.jpg To add to that I have noticed that there is also a problem at the bottom of the page, as seen here : http://www.timetraveltours.net/explorer.jpg I'm guessing that I just have to change some of the positioning or something in the CSS but don't really want to it without some help/advice first incase I mess the whole thing up. The CSS code can be found here http://www.timetraveltours.net/base.css Other style sheets are : http://www.timetraveltours.net/ie5mac.css http://www.timetraveltours.net/ie5win.css http://www.timetraveltours.net/netscape.css http://www.timetraveltours.net/screen.css http://www.timetraveltours.net/style.css (if needed) I'm also wondering if these problems appear in 3 different browsers on a Mac what problems there are when viewed with various browsers on Windows and would very much appreciate anyone to beta test the site for me on the Windows platform. I hope that I have explained myself cleary and given the correct information ? Many thanks in advance The site can be found at : http://www.timetraveltours.net Hello, this is my first in a hope to find the solution to a long standing problem i am having and doing google had not helped me for this. ** I am a novice in css **. I have tried many drop down css menus (with back ground image), but none is compatible with ie6, ie7, ie8, and firefox. Please let me know the best available *free* menu. Thanks, foka hi there, i'm using code from http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/P10/ for my menubar, the problem is when i refresh the page the menubar is on it stops working. help please! First let me start of with this for doing all this work for my drop down menu and then finding out that IE6 (apparently 50% of people browsing) doesn't support :hover except on anchor tags. Here is my situation. I finally got my drop down menu working. However, there are three issues. when I hover over the 'companies' menu item 1) the menu expands and pushes the 'blog' and 'contact' menu items further down the menu. I will say that I did not define a width on the li tags because this is actually for a wordpress theme and I wanted to allow for more pages that might be added later. I thought that by defining a width I would be more likely to fill up my menu container. 2) the child/nested li tags aren't under the parent li tag. Basically the sub-menu items show up to the bottom and right of the 'companies' menu item. I want them to show up directly underneath the parent menu item. 3) the longer sub-menu items (nested li tags) are not showing up on the same line. It's like there is a width that is causing them to overlap or go down to the next row. Not sure if that makes sense. I am wanting it to appear on one line no matter how long the menu item is. I am sure that not defining a width on the li tags have something to do with some of these problems but I wanted others to take a look at it. Code(validated) and styles below. Tried to keep it simple. there are two img files that I use as well but couldn't figure out how to upload those. Any and all help from the CSS gurus will be greatly appreciated. Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drop Menu Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="access">
<div id="menu-container">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Compare</a></li>
<li><a href="#">Companies</a>
<ul>
<li><a href="#">Company number one</a></li>
<li><a href="#">Company 2</a></li>
<li><a href="#">Company #3</a></li>
<li><a href="#">Company number 4</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--menu-->
</div><!--menu-container-->
</div><!--access-->
</body>
</html>
Code: body{
background-color: #999;
margin: 0;
}
ul,li {
margin: 0;
}
div#access {
margin: 0px;
background-repeat: repeat-x;
background-image: url(images/navbar-bckgrd.gif);
}
div#menu {
height:1.5em;
width:100%;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
div#menu a {
color: #FFF;
text-decoration: none;
}
div#menu-container {
width: 974px;
margin-right: auto;
margin-left: auto;
height: 27px;
margin-top: 0px;
margin-bottom: 0px;
}
div#menu li {
list-style-type: none;
color: #FFF;
position: relative;
float: left;
height: 27px;
/*width: 6em;*/
font-size: 1.2em;
line-height: 1em;
}
div#menu ul a {
display:block;
margin-right:1em;
padding:0.2em 0.5em;
}
div#menu li a:hover {
background-image: url(images/hover%20menu.jpg);
background-repeat: repeat-x;
}
/*second teir*/
div#menu li ul {
display: none;
background-repeat: repeat;
background-color: #CCC;
margin: 0px;
}
div#menu li:hover ul {
display: inline;
float: left;
width: 10em;
height: auto;
}
div#menu li ul li {
font-size: 0.9em;
width: 7em;
margin-left: 0px;
}
div#menu li ul li a {
color: #000;
margin-left: 0px;
}
div#menu li ul li a:hover {
color: #FFF;
}
Hey guys, New to the forum. Mainly came on here to get help with my nav bar. It works perfectly in FF and IE 8.07+, but the problem it with IE8.06, where it doesn't show at all. Not too worried about pre-8.06, only a small amount of my page hits comes from below that version. I've spent ages looking for a problem, but can't find where I've went wrong. There's may be some superfluous stuff in there that I've added to try and fix the problem.. Please help? =) ------------------------ Code: #PageList1 ul {
height: 1.5em;
overflow:hidden;
margin: 10px -10px 5px;
width: 100%;
padding: 10px;
background-image:url('http://4.bp.blogspot.com/-WKkxGKrRVcw/TbFWFn_2VxI/AAAAAAAAAis/NKf1k3sO9A8/s1600/nav_bg2.jpg');
background-repeat:repeat-x;
}
#PageList1 li {
height: 1.5em;
list-style-type:none;
float:left;
}
#PageList1 li a {
display:block;
height: 1.5em;
width:auto;
clear:left;
font-weight:bold;
font-size:9pt;
line-height: 0.5em;
margin: -9px 0px -23px;
color: #ffffff;
background-image:url('http://3.bp.blogspot.com/_vhqPwC7csIg/TSUQG6Q3tfI/AAAAAAAAAYU/5ceiGi8na3s/s1600/gradient40px.jpg');
background-repeat:repeat-x;
text-align:center;
text-decoration:none;
padding: 10px 10px 15px;
border: 1px solid #ccc;
border-right: 0px solid #ccc;
border-bottom: 0px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
#PageList1 li a:hover, #PageList1 li a.sfhover {
background:transparent;
font-weight:bold;
color: white;
}
#PageList1 li ul {
left: -999em;
position: absolute;
width: 13em; /* Width to help Opera out */
height: auto;
background-color: #ccc;
colour:#fff;
clear: left;
}
#PageList1 li:hover ul, #PageList1 li.sfhover ul {
left: auto;
margin: 8px -80px 0px;
width: 13em;
height: auto;
background: #ccc;
}
#PageList1 li:hover li a, #PageList1 li.sfhover li a {
background:#ccc;
border: 0px solid #ccc;
border-right: 0px solid #ccc;
border-bottom: 0px solid #fffccc;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding: 0px;
margin: 5px 0px 0px;
-moz-box-shadow: 0px 0px 0px #000;
-webkit-box-shadow: 0px 0px 0px #000;
box-shadow: 0px 0px 0px #000;
color: #000;
}
#PageList1 li li a:hover, #PageList1 li li a.sfhover {
background-color: #ccc;
color: #fff;}
<script type='text/javascript'>
sfHover = function() {
var sfEls = document.getElementById("PageList1").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>
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. Hi all, I'm having an issue with a drop down menu and have been beating myself up trying to figure it out. If I position the menu as relative it works when I resize the page/browser but it screws up the layout of the page (I put the <div> code right below the menu images to get it lined up but it throws the layout way off). By works I mean the menu will open right below the "Company" menu item regardless of browser size. Positioning the menu using absolute, it doesn't move if I resize the browser, etc. but it doesn't screw up the layout of the page. So my question is, how can I get this menu to always be under the correct menu option? You can use the link below to view my test page. The page is currently using absolute positioning and the coordinates are off since I was playing with the various positioning schemes. http://www.info-adv.com/test/css Any insight/help you can provide would be greatly appreciated. If you need me to elaborate or better explain my problem please let me know. Thanks, Tim How easy is it to create one of these where when you hover over a link a menu appears underneath? |
|||||||