Learn VBA & Macros in 1 Week!

CSS - Cant Make Menu Drop-down Work In Ie

Full Excel VBA Course - Beginner to Expert

Cant Make Menu Drop-down Work In Ie	View Content

Full Excel VBA Course - Beginner to Expert

Css Drop Menu Doesn't Work In Firefox

Similar Tutorials

View Content

My drop menu works fine in IE7, however in firefox the menu's don't drop. Anyhelp would be appreciated. Here is my css code.

Code:

#menu {
width: 769px;
height: 27px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background: #000000 url(images/SDCB-menu-bar.gif);
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 125px;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000000 url(images/SDCB-menu-bar.gif);
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#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;}

Here is the HTML.

Code:


<div id="menu">

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="HOME"><h2>HOME</h2></a></li>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="ABOUT US"><h2>ABOUT US</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Board of Directors">Board of Directors</a></li>
      <li><a href="http://mysite/index.html" title="Ex-Officio Members & Staff">Ex-Officio Members & Staff</a></li>
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="NEWS/EVENTS"><h2>NEWS/EVENTS</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Calendar">Calendar</a></li>
	  <li><a href="http://mysite/index.html" title="Newsletter">Newsletter</a></li>
	  <li><a href="http://mysite/index.html" title="Photo Gallery">Photo Gallery</a></li>
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="RENEWAL PROJECT"><h2>RENEWAL PROJECT</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="History">History</a></li>
      <li><a href="http://mysite/index.html" title="Executive Summary">Executive Summary</a></li>
      <li><a href="mysite/index.html" title="Plan & Dependencies">Plan & Dependencies</a></li>
		  <ul>
      <li><a href="http://mysite/index.html" title="Renewal Plan">Renewal Plan</a></li>
      <li><a href="http://mysite/index.html" title="Appendices">Appendices</a></li>
    </ul>
      <li><a href="http://mysite/index.html" title="garden">Community Learning Center & Garden</a></li>
      <li><a href="http://mysite/index.html" title="Get Involved">Get Involved</a></li>  
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="CONTACT US"><h2>CONTACT US</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Your Thoughts">Your Thoughts</a></li>
      <li><a href="http://mysite/index.html" title="Donate Now">Donate Now</a></li>
    </ul>
</ul>
</div>

Thank you in advance

Drop Down Menu; How To Align The Right Edge Of Drop Down And Parent Menu?

Similar Tutorials

View Content

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;
}

Show Selected Menu With Hierarchy On Each Page. Drop Down Menu Help Needed......

Similar Tutorials

View Content

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.

Vertical Drop-down Menu - Sub-menu's Don't Appear Long Enough (time Not Length)

Similar Tutorials

View Content

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

Only One Level Of Drop Down Menu Appearing In Horizontal Menu In Ie 6 And 7

Similar Tutorials

View Content

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!

Make It Work In Ie6!

Similar Tutorials

View Content

Hi

I have a page which has a header, footer, nav bar and content area using CSS and works great in IE8, FF, Chrome and Safari, and almost works in Opera.

Although I have tried to avoid it, my boss wants the page to work in IE6 as we have corporate clients still using it, and I CANNOT figure out how to arrange it without fixed sizing! Can anyone help?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
	Untitled Page
</title>
    <style type="text/css">
        #test div {
            border:solid 2px red;
            position:absolute;
        }
        #head {
            height:100px;
            top:0;
            left:0;
            right:0;
        }
        #nav {
            left:0;
            top:105px;
            bottom:105px;
            width:200px;
        }
        #foot {
            height:100px;
            bottom:0;
            left:0;
            right:0;
        }
        .scroll {
            top:0;
            right:0;
            left:0;
            bottom:0;
            margin-left:205px;
            margin-top:105px;
            margin-bottom:105px;
        }
    </style>
</head>
<body>
    <div id="test">
        <div id="head"></div>
        <div id="nav"></div>
        <div id='x40702f5b28_scroller' class='scroll' style='overflow:scroll;'>
            <div id='x40702f5b28' style='width:1024px;height:768px;position:relative;'>
            </div>
        </div>
        <div id="foot"></div>
    </div>
</body>
</html>

The red borders are purely so I can see where the DIVs are and don't need to be in the final version. Any help would be greatly appreciated...

SW.

Any Way To Make This Work In Ie

Similar Tutorials

View Content

Menu Tabs Drop Below Menu Bar

Similar Tutorials

View Content

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.

Z-index, What It Does, How To Make It Work!!

Similar Tutorials

View Content

I was told awhile back that z-index would fix the issue i am having.

the issue i am having is that my css popdown menus are hiding behind my flash embed!!

EXAMPLE HERE

Just scroll over the navigation at the top and you will see what i mean.

Make The Arrow On A Drop Down Box A Different Colour?

Similar Tutorials

View Content

Hello. On my website 2uk2 there is a domain search in the header. I want to make that litle arrow on the domain extension box purple. Using normal CSS i cant seem to acomplish it, i have tried assigning a "class" to the box, but it has no affect on it, it only sets the background colour. I have the scrollbar colour defined aswell, but again, no affect..

If anyone knew how i could fix that I'd really appreciate it!

Regards
Steven Billings

Why Does Adding An * Make The Display: None Work?

Similar Tutorials

View Content

Hey everyone,

I am making a menu in CSS( and javascript ) and I was wondering why the following doesn't work:
Code:

#menu ul li {
	display: none;
}

But this does:
Code:

#menu ul * li {
	display: none;
}

Adding an * makes it work in firefox and ie, is this a bug or something, or am I just on drugs?

How Can I Make The Auto Height Work (firefox)

Similar Tutorials

View Content

The situation is very simple:

Code:

<div id="maindiv" style="border:1px solid #000000; width:400px; margin:0px; padding:0px;">
    <div id="reddiv" style="border:1px solid #FF0000; width:150px; float:left;">
        red box<br>
        red box<br>        
        red box<br>
        red box<br>
        red box<br>        
        red box<br>                
	</div>

    <div id="greendiv" style="border:1px solid #00FF00; margin-left:170px; width:100px;">
        green box<br>
        green box<br>
        green box<br>
        green box<br>        
	</div>
</div>

AS you can see, I have a main div. Inside it, I have 2 divs:
red and green. If I enter text into the green div, the main div resizes automatically. But if I enter text into the red div, the main div doesn't resize, and so the red div overflows.

What I need is either enter text in the red or green divs and make the main div to auto resize.

(I'm using Mozilla FireFox)

Any Idea?

How To Make Nested Css Ie List Work Like Firefox?

Similar Tutorials

View Content

http://img55. imageshack .us/img55/6775/cssexamplesy8.png

^ please remove the space before and image shack to view the image

I've taken a screenshot of a problem I need help with, which is how IE and Firefox handle nested lists. Using code like this:

Code:

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>
     <ul>
      <li>sub item 1</li>
      <li>sub item 2</li>
     </ul>
</li>
 <li>item 3</li>
</ul>

Firefox displays the new list without being pushed down yet IE seems to create the space for where the list item would be and I can't figure out how to remove the space / how to get it to act like firefox.

Removing the list item that holds the nested ul solves all problems but it isn't valid so I'm looking for another solution.

Cheers

Drop Down Menu

Similar Tutorials

View Content

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>

Css Drop Down Menu

Similar Tutorials

View Content

I had made a site with a pure CSS drop down menu (using hover). The problem is that it works fine in the various browsers... IE6, FF1.x, NS, Opera... But it doesn't work in IE7. Anyone know a work around for using the hover as a drop down with IE7? I can paste the code later (when I get back to where my site is) if needed.

Thanks for any input.

Css Drop Down Menu Not

Similar Tutorials

View Content

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;
}

Need Help With Css Drop Down Menu

Similar Tutorials

View Content

I'm playing around with CSS for the first time and have created a drop down menu that I would like to use for a site I have so any help would be greatly appreciated!!!

I've placed the menu on its own page at h t t p : / / aztechnogeek . somee . com / cssmenu . html for accurate coding (just view source). - sorry as a new user I guess I can't post hyperlinks.

What I would like to know how to do is when the cursor is moved down a menu list why the top hover attribute does not stay active??? Confusing I know but when you see the working menu you'll understand - I hope.

Any help would be great, thank you!!!

Drop Down Menu Behind Div

Similar Tutorials

View Content

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

Trying To Fix My Drop-down Menu Pls Help!

Similar Tutorials

View Content

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.

Drop Down Menu Help

Similar Tutorials

View Content

dup