Learn VBA & Macros in 1 Week!

CSS - Drop Down Menu Problem = Ccs Prob?

Full Excel VBA Course - Beginner to Expert

Drop Down Menu Problem = Ccs Prob?	View Content

Full Excel VBA Course - Beginner to Expert

Help With Using Css For Nav. Menu - Link Hover Color Prob.

Similar Tutorials

View Content

Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use.

Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders.

Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white.

Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover.

Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation.

Drop Down Menu Problem

Similar Tutorials

View Content

Hello everyone, I need help with my drop down menu. There is a problem with CSS I think because it conflict with each other. I download both template and drop down menu script from somewhere else.

This is the original html template
http://www.styleshout.com/templates...ce11/index.html

This is my website with drop down menu added but it's not working
http://ghazifly.110mb.com/marketplace11/

I guess the template CSS might clash with the dropdownmenu CSS.

My index.html navigation code, I think theres nothing wrong with this code.
Code:

	<!-- navigation starts-->	
	<div  id="nav">
		<ul><ul id="jsddm">
			<li><a href="index.html">Home</a></li>
            
                         <li><a href="#">Drop Down Menu</a>
		<ul>
			     <li><a href="#">Other page</a></li>
			     <li><a href="#">jQuery Plugin</a></li>
			     <li><a href="#">Ajax Navigation</a></li>
		</ul>
	       </li>
            
			<li><a href="index.html">Archives</a></li>			
			<li><a href="index.html">About</a></li>
            			

</ul> 		
		</ul>
	<!-- navigation ends-->

My website CSS top navigation code:
PHP Code:
/* Navigation */
#nav {
    clear: both;
    padding: 0;
}
#nav ul {
    float: left;
    list-style: none;
    background: #E4E4E4 url(nav.jpg) repeat-x;

    padding: 0;    margin: 0 0 0 30px;
    height: 45px;
    display: inline;
    text-transform: uppercase;
}
#nav ul li {
    display: inline;
    margin: 0; padding: 0;
}
#nav ul li a {
    display: block;

    width: auto;
    margin: 0;
    padding: 0 15px;
    border-right: 1px solid #dadada;
    border-left: 1px solid #fafafa;
    border-bottom: none;
    color: #555;
    font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
}
#nav ul li a:hover,
#nav ul li a:active {
    color: #326ea1;
}
#nav ul li#current a {
    background: #DBDBDB url(nav-current.jpg) repeat-x;
}

My dropdownmenu CSS code:
PHP Code:
/* menu styles */
#jsddm
{    margin: 0;
    padding: 0}

    #jsddm li
    {    float: left;
        list-style: none;
        font: 12px Tahoma, Arial}

    #jsddm li a
    {    display: block;
        background: #324143;
        padding: 5px 12px;
        text-decoration: none;
        border-right: 1px solid white;
        width: 70px;
        color: #EAFFED;
        white-space: nowrap}

    #jsddm li a:hover
    {    background: #24313C}

        #jsddm li ul
        {    margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-top: 1px solid white}

            #jsddm li ul li
            {    float: none;
                display: inline}

            #jsddm li ul li a
            {    width: auto;
                background: #A9C251;
                color: #24313C}

            #jsddm li ul li a:hover
            {    background: #8EA344}

Please help me with CSS. I spend like 10 hours experimenting with CSS but still not working,

So as you can see I only pasted the right code so it should be working but somehow both CSS interfere with each other and messed up my top navigation design. Also the dropdownmenu is showing horizontally. Any help is appreciated.

Thanks in advance

Drop Down Menu Problem

Similar Tutorials

View Content

I have used suckerfish dropdown menu on this site herel

but in IE7 the 1st level links are to far left on the services menu.
Fine in firefox.

It will be something i missed

here is the css i used on the menu

Code:

/* Start Menu  */
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	
}

#nav a {
	display: block;
	width: 90px;
	text-decoration:none;
	color:#000000;
	font-size:11px;
	font-weight:400;
}

#nav li {
	float: left;
}

#nav li ul {
	position: absolute;
	width: 90px;
	left: -999em;
	background-color:#CCCCCC;
	
}

#nav li:hover ul {
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}
		
#menu1 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu2 {
		float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu3 {
	float: left;
	width: 90px;
	padding-top:10px;
	font-size:11px;
	text-align:center;
	}
	
			#menu4 {
	float: left;
	width: 90px;
	padding-top:10px;
	font-size:11px;
	text-align:center;
	}
	
			#menu5 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
		
				#menu6 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
		#menu7 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu8 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu9 {
		background-image:url(menu6.jpg);
		background-repeat:no-repeat;
	float: left;
	width: 220px;
	height:33px;
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}

/* End Menu */

this is doing my head in i just can't see it.

Drop Down Menu Problem

Similar Tutorials

View Content

Ok. To more easily explain my problem with you guys, I have included a "Diagram" if you will of the problem.

Area 1 is the area where all my buttons and dropdown menus are.

Area 2 is the greatly overlapping "background" area that is invisible.

What I want is to have Area 2 behind Area 1 and the width and height of Area 2 barely exceed Area 1's.

This will allow me to call the "hide()" function for my drop down menus whenever the mouse "seems" to move away from buttons and the menu.

http://www.alexwait.com/Nortonville...ester/main.html

I've tried doing that, but as you can see, it hasn't worked out too well.
Any advice?

EDIT/UPDATE:
Ok. I've now got the box "behind" the menus and buttons like I want.
But when I move my mouse into another element... for some stupid reason I am getting the onMouseOut event being fired for the "behind" element.

Thanks again.

Ie Problem With Drop Down Menu

Similar Tutorials

View Content

Hi guys,

I've written a drop-down menu, located here (there's only a drop down menu on the "Services" link in the menu.

Now, the menu works fine in FireFox, however it completely screws up in IE (I'm not too worried about the menu being put on the right in IE, just moreso about all the gaps its making).

To do the menu, I'm simply using an extra table for the drop down menu which has its display property set to none, and giving it the css property of "position: absolute;". Then when it is rolled over, it just changes to "display: block".

How would I go about fixing this?

Css Drop Down Menu Problem In I.e 7

Similar Tutorials

View Content

Hi I have the following menu worlks fine in firefox etc but will not work in I.E 7 any ideas why?

I have searched hi and low about i.e 7 problems but can't find the answer.

Code:

<html>
<head>
<title></title>
<style type="text/css">
#mainmenu{
 width: auto;
 height: 30px;
}
#mainmenu{
 margin: 0px;
 padding: 0px;
 z-index: 1;
}
#mainmenu li{
 float:left;
 position:relative;
 width: 140px;
 border: 0px solid #fff;
 list-style: none;
 background: #336699;
 font-family: verdana;
 font-weight: bold;
 font-size: 14px;
 padding: 3px 10px 3px 10px;
}
#mainmenu li a{
 background: #336699;
 text-decoration: none;
 color: #000;
}
#mainmenu li a:hover{
 color: #ff0000;
}
#mainmenu li ul{
 display:none;
 position:absolute;
 margin: 0px;
 width: 140px;
 padding: 0px;
 list-style: none;
 top: 20px;
 left: 0;
 z-index: 2;
}
#mainmenu li:hover ul {
 display: block;
 width: 140px;
}
#mainmenu .drop {
background: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px dashed #000;
}
#mainmenu .drop a{
background: #fff;
}
#mainmenu .dropb {
background: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
#mainmenu .dropb a{
background: #fff;
}
#mainmenu .dropt {
background: #fff;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px dashed #000;
}
#mainmenu .dropt a{
background: #fff;
}


</style>
</head>

<body>
<div id="mainmenu">
	<li>
		<a href="#">MENU 1</a>
		<ul>
			<li class="dropt"><a href="#">DROP DOWN 1</a></li>
			<li class="drop"><a href="#">DROP DOWN 2</a></li>
			<li class="dropb"><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 2</a>
		<ul>
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 3</a>
		<ul>
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
</div>

</body>
</html>

Help! Serious Problem With My Drop-down Menu

Similar Tutorials

View Content

Drop Down Menu Problem In Ie9

Similar Tutorials

View Content

I'm having an issue with getting my drop down menus to work in IE9. They work in chrome and other internet explorer browsers but for some reason they don't drop down in IE9.

This is my CSS coding:

div#menubar {
position: absolute;
top: 100px;
left: 150;
}

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode";
font-size:15px;
font-weight:bold;
}

.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}

.menu li{
float:left;
padding:0px;
}

.menu li a{
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:white;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a{
background: #F4FA58 url("images/hover.gif") bottom center no-repeat;
color:white;
text-decoration:none;
}

.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}

.menu li:hover ul{
display:block;
}

.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}

.menu li:hover li a{
background:none;
}

.menu li ul a{
display:block;
height:35px;
font-size:13px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a{
background:#F4FA58 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:black;
text-decoration:none;
}

.menu p{
clear:left;
}

and the html coding is:

<div id="menubar">
<div class="menu">
<ul>
<li><a href="mindex.htm" target="_self">home</a></li>
<li><a href="mabout.htm" target="_self">about us</a></li>
<li><a href="designservices.htm" target="_self">design services</a>
<ul>
<li><a href="vectorconversion.htm" target="_self">vector art
conversion</a></li>
<li><a href="webdesign.htm" target="_self">web design</a></li>
<li><a href="customdesigns.htm" target="_self">custom designs</a></li>
<li><a href="databasedesign.htm" target="_self">database
design</a></li>
<li><a href="spreadsheetdesign.htm" target="_self">spreadsheet
design</a></li>
<li><a href="presentations.htm" target="_self">presentations and
forms</a></li>
<li><a href="embroidery.htm" target="_self">embroidery</a></li>
<li><a href="customtransfers.htm" target="_self">custom
clothing</a></li>
</ul>
</li>
<li><a href="photoservices.htm" target="_self">photography services</a>
<ul>
<li><a href="photosessions.htm" target="_self">photo sessions</a></li>
<li><a href="photoediting.htm" target="_self">photo editing</a></li>
<li><a href="videoediting.htm" target="_self">video editing</a></li>
<li><a href="galleries.htm" target="_self">galleries</a></li>
</ul>
</li>
<li><a href="partyplanning.htm" target="_self">party & wedding
planning</a></li>
<li><a href="mcontact.htm" target="_self">contact us</a></li>
</ul>
</div>
</div>

does anyone know what the issue is?

Problem With Drop Down Menu

Similar Tutorials

View Content

Hi, I am having problems with a jQuery suckerfish drop down menu. The HTML seems fine so I can only assume the problem is with the CSS. It is a vertical drop down menu with three levels, and level two is supposed to drop down to the right hand side of level one, but it is currently dropping straight down and overlapping level one. Level three sits correctly to the right of level two though.

Here is the code:

/*** ESSENTIAL STYLES ***/
.sf-vertical, .sf-vertical * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-vertical {
line-height: 1.0;
}
.sf-vertical ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-vertical li:hover , .sf-vertical li.sfHover, .sf-vertical a:focus, .sf-vertical a:hover, .sf-vertical a:active{
width: 100%;
}
.sf-vertical li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-vertical li {
position: relative;
}
.sf-vertical a {
display: block;
position: relative;
}
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-vertical li:hover li ul,
ul.sf-vertical li.sfHover li ul {
top: -999em;
}
ul.sf-vertical li li:hover ul,
ul.sf-vertical li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-vertical li li:hover li ul,
ul.sf-vertical li li.sfHover li ul {
top: -999em;
}
ul.sf-vertical li li li:hover ul,
ul.sf-vertical li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}

/*** DEMO SKIN ***/
.sf-vertical {
float: left;
margin-bottom: 1em;
}
.sf-vertical a {
border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none;
}
.sf-vertical a, a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #13a;
}
.sf-vertical li {
background: #BDD2FF;
}
.sf-vertical li li {
background: #AABDE6;
}
.sf-vertical li li li {
background: #9AAEDB;
}
.sf-vertical li:hover, .sf-vertical li.sfHover,
.sf-vertical a:focus, .sf-vertical a:hover, .sf-vertical a:active {
background: #CFDEFF;
outline: 0;
}

/*** arrows **/
.sf-vertical a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position:relative;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: -10px 0; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-vertical ul .sf-sub-indicator { background-position: -10px 0; }
.sf-vertical ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-vertical ul a:focus > .sf-sub-indicator,
.sf-vertical ul a:hover > .sf-sub-indicator,
.sf-vertical ul a:active > .sf-sub-indicator,
.sf-vertical ul li:hover > a > .sf-sub-indicator,
.sf-vertical ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul.sf-shadow-off {
background: transparent;
}

Any help or suggestions would be really appreciated. Let me know if you need any additional information.

Drop Down Menu Problem With Hover State?

Similar Tutorials

View Content

Hi there, im trying to make a website for a friend and im having a little diffuculty with my drop down menu

the site is here
bbk.ac.uk/~fsando01/watma/index.html

when you hover over the link entitled services in the global nav bar and proceed to hover down to the first submenu link which is abs repair, youll notice the background image i set as hover state for the services link disapears, i want it to stay there like they have got on marks and spencers website...

Please if anyone could help id be very grateful...

ive tried everthing i can think of

Horizontal Drop-down Menu Positioning Problem

Similar Tutorials

View Content

Hi all!

I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to.
The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up

You can check out the site at:
cleopatra.gebodesign.no

The files are at:
gebodesign.no/cleopatra/menu.php
gebodesign.no/cleopatra/stylesheet.css

Thanks for any input

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

Drop Line Menu Hover Problem In Firefox

Similar Tutorials

View Content

HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox.

So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative.

URL

But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this.

URL

I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help!

Advance thanks for those who read this! Hopefully someone can help me out with this!

EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean.

CSS CODE:
Code:

* {
margin:0;
padding:0;
}

#nav {
	list-style:none;
	position:relative;
}

#nav li {
	float:left;
	text-align:center;
}

#nav a {
	display:block;
	text-decoration:none;
}

#nav a:active, #nav a:focus, #nav a:hover {
	background:#254563;
}

/* --------- Sub Nav --------- */
#nav li.current ul {
	left:0px;


}

#nav ul {
	position:absolute;
	left:-999em;
	list-style:none;
	padding:0 0 0;
	width: 500px;
}

#nav ul li {
	width: auto;
	margin: 3px 3px 0 0px;

}

#nav ul a {
	font-size: 12px;
	height: auto;
	padding: 5px 10px;
	background: #dfeec9;
	border-radius: 8px;
	-moz-border-radius: 8px;
	width: auto;
}

#nav li:active ul, #nav li:hover ul { 
	height: 30px;
	left: 10px;
	position: relative;
	padding: 0px 3px 5px 3px;
	background: none;
	width: 500px;
}

.navi01 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 33px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_01.png);
	}

.navi02 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 133px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_02.png);
	}

.navi03 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 86px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_03.png);
	}

.navi04 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 83px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_04.png);
	}

.navi05 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 92px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_05.png);
	}

.navi06 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 82px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_06.png);
	}

.navi07 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 30px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_07.png);
	}

HTML NAV CODE:
Code:

 <ul id="nav"> 
			<li><span class="navi01">&nbsp;</span></li> 
			  <li><a href="originalart/gallery.php"><span class="navi02">&nbsp;</span></a> 
<ul> 
	  <li><a href="originalart/gallery.php">Original Art</a></li> 
	  <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> 
	  <li><a href="commissions/gallery_commissions.php">Commissions</a></li> 
	  <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> 
	  </ul> 
</li> 
			<li><a href=""><span class="navi03">&nbsp;</span></a> 
<ul> 
	  <li><a href="info.php">Info</a></li> 
	  <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> 
	  </ul> 
 
</li> 
			<li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04">&nbsp;</span></a></li> 
			<li><a href="http://blog.luisarafidi.com/"><span class="navi05">&nbsp;</span></a> 
 <ul>	<li><a href="#">Old Artwork</a></li> 
	  <li><a href="#">More</a></li> 
</ul> 
</li> 
			<li><a href=""><span class="navi06">&nbsp;</span></a></li> 
			<li><span class="navi07">&nbsp;</span></li> 
</ul>

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!

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.

Drop Down Menu Help

Similar Tutorials

View Content

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

Drop Down Menu Help

Similar Tutorials

View Content

Alright, I've started to design the other pages on my site. I had to change some things in the code in order for my design to work properly. I didn't have it set up correctly before. So everything works the way I want it to now...except for the drop down menu. I am only a beginner with CSS and do not know much about it. I can't figure out what it is I did that made the navigation stop working. If maybe somebody that is more experienced than myself can take a look at it to see what I did, I would really appreciate it.

Oh yea, here is the link to the beggining stages of my "about" page:
About

Keep in mind, nothing is really for sure yet. I just want to get the coding done, so if you think the page could use some sprucing up, you're not alone. As of now the site works best in Firefox and the drop down menu should appear when "Portfolio" is hovered over.

Here is the link to the CSS:
CSS

Thanks

Drop Down Menu Help

Similar Tutorials

View Content

dup