CSS Menu ::: How To

[fazlionline]

Hi all

i have a CSS Menu

it is vertical

how i can make it horizantal

http://www.geocities.com/fazlionline/css/css_list_menu.html

 

I recently added two post on related topic , but no any satisfied answer...

need help

Thanks

Edited April 15, 2009 by fazlionline

[Andrea]

Adding

ul {
   list-style: none;
}

ul li {
   float: left;
   }

Is one way to get things horizontal (and remove the bullets).

 

You have several errors in your code - your list should look like this:

></pre>
<ul>
Products

Laptops
Mobiles

Download


Mac Version
Windows Version

Contact Us

and 'size' is not a valid selector.

[newseed]

In addition to Thelma's response, the invalid 'size' selector seems to be indicating that you are trying to set the width of the hyperlink. You would use 'width' instead. (i.e. width: 200px; )

 

Finally, after you fix the html (per Thelma's example), you will need to use a small script to for IE6 so that the dropdown will work.

[web2crawler]

There are many examples on the web. The examples below are easy and not code-complicated.

 

Left Menu (vertical)

http://www.cafewebmaster.com/pure-css-mouseover-menu-without-javascript

 

Top Menu(horizontal)

http://www.cafewebmaster.com/dropdown-rollover-menu-pure-css-html

[newseed]

There are many examples on the web. The examples below are easy and not code-complicated.

 

Left Menu (vertical)

http://www.cafewebmaster.com/pure-css-mouseover-menu-without-javascript

 

Top Menu(horizontal)

http://www.cafewebmaster.com/dropdown-rollover-menu-pure-css-html

There's still a large number of IE6 users out there and so you will still need to use some script to make them work.

[fazlionline]

Thanks everyone

i removed the size, nothing were happened.

i added Thelma's code

it looks like this now

http://www.geocities.com/fazlionline/css/css_list_menu2.html

 

how can i remove the bullets.

how can i hide submenus by default, without javascript

 

Thanks for examples, but i want to create my own.

[Andrea]

i added Thelma's code

it looks like this now

http://www.geocities.com/fazlionline/css/css_list_menu2.html

No you haven't - at least not on the page this link goes to. You still don't have the list itself coded correctly - and you're missing the to CSS parts I gave you - one of which would also remove the bullets.

[fazlionline]

in li a and li a:hover

i removed the code

size:200px;

and replaced it with

float: left;

 

also in

ul a and ul a:hover

i replaced

size:200px;

with

list-style: none;

 

check http://www.geocities.com/fazlionline/css/css_list_menu2.html again please.

[Andrea]

You may want to look again at my earlier post (Post # 2 in this thread) where I clearly state that your HTML for your list is incorrect - you are missing the opening and closing

• tags around the entire thing - and I posted the code that you should have. I also gave you some CSS to add to your CSS - specifically for ul and ul li - is there any reason you don't want to try that - or you have tried it and it didn't work?

[fazlionline]

Thanks Thelma

I added that code u wrote in Post # 2

now it looks like this

http://www.geocities.com/fazlionline/css/css_list_menu3.htm

[Andrea]

Adding

ul {
   list-style: none;
}

[fazlionline]

but i have added this code .

look at line 43 & 56.

 

http://www.geocities.com/fazlionline/css/css_list_menu3.htm

Edited April 22, 2009 by fazlionline

[jlhaslip]

list-style-type : none;

 

http://www.w3schools.com/CSS/pr_list-style-type.asp

Edited April 22, 2009 by jlhaslip

[fazlionline]

the list style problem is solved by Thelma, Thanks to her.

 

but have aproblem , it looks like stairs now, how can i make it vertical.

[Andrea]

You need to be a bit more specific about what you really want - in the very first post in this thread, you say "How can I make it horizontal' - well, actually, you said 'how i can make it horizantal', but I think it means the same thing.

 

Now you want to make it vertical.

 

Is it possible you may want your main list horizontal, but the sub items vertical under them?

[fazlionline]

Dear Thelma

 

my menu looks like stairs, which i do not want.

first of all i want the submenu hidden by default, and should apear on mouse over.

 

when i solved this problem, then i will learn how to make it horizantal.

(i also want to learn the ocde for vertical, but later)

 

 

Thanks

Edited April 23, 2009 by fazlionline

[fazlionline]

can any one tell me how to fix this menu?