Welcome to WebmasterWorld Guest from 54.198.142.121

Forum Moderators: not2easy

Message Too Old, No Replies

Vertical Drop down menu CSS problem

     
11:24 pm on Aug 23, 2004 (gmt 0)

New User

10+ Year Member

joined:Aug 23, 2004
posts:13
votes: 0


Hi guys,
I been trying this drop down menu from:
[csscreator.com...]

Problem:
I cannot get the navigation bar to sit left to the screen, there seems to be an indentation, and I don't know how to remove. It is messing up my tables.
I'm fairly new to css.

Example is here: <snip>

CSS code below:

#vertnav{list-style: none;
}

#vertnav ul {
padding:0;
margin:0;
list-style: none;
width:12em;
z-index:99;
overflow:visible;
position:absolute;
background-color:#DFDFDF;

}

#vertnav li {
list-style: none;
position: relative;
width: 12em;
background-color:#DFDFDF;
border:solid 1px #CECECE;
border-bottom:none;
display:block;
height:1.5em; /*auto */
margin:0;
}

#vertnav a {
list-style: none;
text-decoration:none;
display:block;
padding: 0.1em;
margin:0.2em 0 0.2em 0.1em; /*helps Opera with hover */
background-color:#DFDFDF;
width:11.5em; /*helps IE with hover */
height:1em;
}
#vertnav a:hover{
list-style: none;
background-color:#0099CC;
color:#FFFFFF;
}

#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{
list-style: none;
display:none;
position:absolute;
top:0;
left:12em;
}

#vertnav li:hover ul ul, #vertnav li:hover ul ul ul{
display:none;
list-style: none;
}

#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul{
display:block;
list-style: none;
}

li>ul {
list-style: none;
top: auto;
left: auto;
}

/* Win IE only \*/
* html #vertnav li{float:left;}
/* end holly hack */

[edited by: SuzyUK at 8:21 am (utc) on Aug. 24, 2004]
[edit reason] ooops sorry no URLS per TOS #13 [webmasterworld.com] [/edit]

11:34 pm on Aug 23, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2004
posts:142
votes: 0


For some reason this fixes it, but not when applied to the stylesheet itself... This might help lead you to the problem.

<ul id="vertnav" style="margin-left:0px;">

11:39 pm on Aug 23, 2004 (gmt 0)

New User

10+ Year Member

joined:Aug 23, 2004
posts:13
votes: 0


That was amazing...I've been trying for 3hours!
How did you find that out...
Thank you so much!
11:43 pm on Aug 23, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2004
posts:142
votes: 0


I always attack the offending object first and work my way outward. So out of curiousity, I set the left margin to 0 and it worked. Strange that it doesn't work in the stylesheet though.

Oh and you are welcome. My pleasure. :)

11:48 pm on Aug 23, 2004 (gmt 0)

New User

10+ Year Member

joined:Aug 23, 2004
posts:13
votes: 0


one last thing...how can I move menu up?
12:05 am on Aug 24, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2004
posts:142
votes: 0


Well, on line 188 you have this:

<th height="400" colspan="2" scope="col">

change to this:

<th height="400" colspan="2" scope="col" valign="top">

Btw, I believe valign is depreciated and I've yet to see a reliable replacement for it in css.

6:00 am on Aug 24, 2004 (gmt 0)

New User

10+ Year Member

joined:Aug 23, 2004
posts:13
votes: 0


thank you again!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members