...

View Full Version : pure CSS horizontal menu not working



Ottomated
01-01-2010, 11:54 AM
hi, I made this website,

student.seas.gwu.edu/~ottobahn/test.html


I am trying to make the navigation menu work. The parent menu and submenu works as intended but when I slide my cursor to the submenu they disappear. I believe it has to do with how much space is between parent menu and the submenu. with smaller spacing the menu works but they look attached and weird. I would like to keep the current spacing but make the submenu work.

if pure css solutions do not let me keep the spacing, I think I need to use a javascript approach instead.

I know im not supposed to use tables for layouts. but I made the bulk of my website using this method. if any of you would like to show me how I can do it with div tags it would be much appreciated as well.

vineet
01-01-2010, 12:54 PM
when i hover my mouse over COURSE & Products, then i m able to view the submenu in IE7 and Firefox 3.5

which browser are you testing.

vineet

Ottomated
01-01-2010, 01:11 PM
only the course and products have sub menus.
they appear fine but when I try to select things on the sub menu I am unable to do it. the submenu under course and products disappear as soon as move my cursor away from the parent menu eg course and products.

im viewing it through safari 4 and firefox.

vineet
01-01-2010, 01:43 PM
replace this in your css.



#navigation li ul
{margin:0px; padding:8px 8px 0px 0px; display:none; position:absolute; margin-left: 20px; left:-110px; top:20px;}


vineet

abduraooft
01-01-2010, 02:07 PM
Try
#navigation li ul {/*test.html (line 82)*/
display:none;
left:-110px;
line-height:32px;
margin:0 0 0 20px;
padding:0;
position:absolute;
top:20px;
}

Ottomated
01-02-2010, 03:02 AM
Try
#navigation li ul {/*test.html (line 82)*/
display:none;
left:-110px;
line-height:32px;
margin:0 0 0 20px;
padding:0;
position:absolute;
top:20px;
}

I love you abduraooft. thank you for your help. is there anway I can center the submenu around the parent menu. for example, the width of the submenu's center is located at the center of "product" so they would align itself vertically along the center of both.

also I am having trouble aligning the parent menu to the very right edge of my design. its got a little space on the right of "contact us" and its annoying. do you have any ideas? I tried putting align: center; but that does not seem to effect it.

I dont want you guys to hold my hand and just give me solutions. if there are tutorials or links I can study up on, it would be awesome as well. i learned the "line-height" command extends the hover areas. thats what I needed! just one line modification!

Ottomated
01-02-2010, 09:58 AM
in case anybody was trying to help me still.
i redid the whole thing using DIV tags


student.seas.gwu.edu/~ottobahn/test2.html


I am faking the way the navigation is aligned to the right edge. does anybody know how I can align <div id="navigation"> to the right edge of my website?

also I cannot align the submenu and the parent menu along their center line. how would I go about doing that?!

HELP IS MUCH APPRECIATED. We'll give you discounts if you live on Guam and would like a great spa treatment!!

abduraooft
01-02-2010, 11:17 AM
I am faking the way the navigation is aligned to the right edge. does anybody know how I can align <div id="navigation"> to the right edge of my website?


#navigation {/*test2.html (line 36)*/
font-family:Georgia,"Times New Roman",Times,serif;
font-size:20px;
padding:0;
position:absolute;
right:0;
top:55px;
/*width:595px;*/
}

Ottomated
01-02-2010, 01:29 PM
Thank you time and time again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum