li ul hide sublist

[fazlionline]

Can anyone tell me how to hide the sub list by default?

And then should be appear on mouse over

 

My code is this

 

></pre>
<ul>
List one


Sublist one 
Sublist two 
Sublist three 


List two 
List three 

 

Please do not give me other links, just type the code, how to hide

Thanks

[Andrea]

You mean you don't want me to post the link to a page that not only explains it, but also shows it clearly? Too bad I don't have to time to copy and paste it all.

[fazlionline]

Yes, I Google it and read many saw many example

Bu I was unable to find the exact code which hides those submenus by default.

For example

li status= hidden

Thanks

[akurtula]

just to hide the sub menu you need:

 

li ul {
   position: absolute;
   display: none;
   }

 

however you'll now need to go back to those tutorials, and the the overall style right (if you haven't already)

 

then to show it back again you need

 

li:hover ul { display: block;  }

 

if had no time to check if im right, but i'm sure this is the way to get the very basic hide and show, then you need to style the whole navigation to show as horizontal or vertical

 

hope this is what you were looking for

[lm]

the main problem here is that IE renders lists quite differently and most of the time needs conditional comments, so you do need to pick some example ( try CSS Play) menu.

[fazlionline]

Products

• 
  
• Laptops
  
• Mobiles
  

Download

• 
  
• Mac Version
  
• Windows Version
  

Contact Us

[lm]

have you got one of Listamatics menus working? All your questions answered there. Try them all step for step to get grip on lists in general.

Further, To get drop down-flyout horizontal menus working, if you starting from scratch, take some working example and anatomize it - style to your own.

I searched the site and got menus, but I have my own menu

.

Have you got some kind of a template you need to get working?

[dms]

I think you should select the list like this, by selecingn the first ul...

ul li a {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

text-decoration: none;

display: block;

margin: 1px;

padding: 7px;

border: 1px solid #990000;

background-color: #FFFFCC;

color: #990000;

size:200px;

}

 

... and select the nested list or submenu by selecting the first ul and then the nested ul.

 

ul ul a {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

text-decoration: none;

display: block;

margin: 1px;

padding: 7px;

border: 1px solid #990000;

background-color: #FFFFCC;

color: #990000;

size:200px;

}

 

It seems to me that when dealing with nested list, you would need to specify which ul you are referring to. Good luck.

Edited July 9, 2009 by dms

[PicnicTutorials]

I would hand it to you on a silver platter, but per request, no links...

[Andrea]

I would hand it to you on a silver platter, but per request, no links...

I would have already linked to your tutorial - it's simple and straight-forward - would have explained how things work and given him the code - but he didn't want to click. His loss....

[fazlionline]

Thanks you all

Can anyone give me a link of a tutorial for li ul menu with dropdown?

I have browsed the Listimatic, it is fantastic but there was not any drop down menu.

(If this was given, I will tell you my second problem, it will make the issue easier)

Thanks

[Wickham]

CSSplay is are very often used:-

http://www.cssplay.co.uk/menus/

 

There are hundreds. You look at the source code for two sections of code, one is in the head section style tags, usually with a .menu or #menu beginning, and the second is the html markup section lower down, and possibly you have to find a meta tag with a link to a css file with codes for IE6and download that (usually with IE6 in the filename like dropdown_ie6.css).

[fazlionline]

• 
  
• Milk
  
  • 
    
  • Goat
    
  • Cow
    
  
  
  
• Eggs
  
  • 
    
  • Free-range
    
  • Other
    
  
  
  
• Cheese
  
  • 
    
  • Smelly
    
  • Extra smelly
    
  
  
  

[Andrea]

Try the link in the post above yours - third column from the left.

[fazlionline]

I searched more than 47 menus there. Those menus are nice but I was unable to find the exact code to hide the submenu.

I think it is better to write the code (just for hiding the submenu) instead of searching the code of more than 47 or more menu!!!

Will any one give me the code for this? Just like:

Sub menu status {
       Default: hidden;
       on mouse over: appear;
       }

 

 

Copy my code from 13th post on this page and view it in DreamWeaver or other program, you will get what I mean.

Thanks

[Andrea]

Here is another great tutorial for drop downs - it has all the code and it explains. BTW - it's the one I would have linked to in Post #2!

 

http://www.visibilityinherit.com/code/drop-down.php

[fazlionline]

Thanks to Thelma and everyone

I was thinking of exact this menu

http://www.visibilityinherit.com/code/drop-down-demo1.php

Thanks again

 

Now I have another question

? As this menu is horizontal, how can I make it vertical?

This must be one script only, for example

Menu layout: horizontal;

So how I can make it vertical as

Menu layout: vertical;

If you give me external example, I will be confused as I am from three months.

Please give me the code.

 

Explanation:

If someone ask me how to make text BOLD in HTML, I will not link him to the tutorials. He may find that in tutorial after a long time. But if I tell him that the to make the text Bold just write this code

your text

I faced the same problem, how to convert the horizontal menu to vertical.

So if anyone gives me link, thanks to him. But if anyone gives me the code, I will too much thankful to him.

 

Thanks to everyone

[lm]

you will need to look for "flyout" menu.

this basic one: just coped paste code.

[fazlionline]

I looked that menu

But was unable to make the horizontal menu to vertical

Code please

[PicnicTutorials]

I looked that menu

But was unable to make the horizontal menu to vertical

Code please

 

You know... I've looked back at some older threads of yours, and they've all played out the same way. I want "vertical", no wait, I want "horizontal", no wait, I want to make "horizontal vertical". Like you yourself said, you've been at this for 3 months. What you want is obviously to specific for us, so why don't "you" give an exact example of what your after.

Edited July 16, 2009 by Eric

[fazlionline]

Yes dear

On internet I found many menus

I found a good vertical menu but do not know how to make it horizontal

And I found many horizontal menus but do not know how to make it vertical.

 

If you got my point, now I want to exact code which makes the menu vertical or horizontal.

 

As I know that the rest of menu is ul and li. Only one code can change the menu from vertical to horizontal or from horizontal to vertical.

 

That is my problem

 

Hope you will give the answer.

 

Thanks

[Andrea]

ul li {float: left;}

[fazlionline]

• 
  
• Home
  
• News
  
  • 
    
  • Asia News
    
  • Local News
    
  
  
• Photos
  
• Contact
  

[Wickham]

You will never get such simple code to work properly in all browsers and hide the sub-level drop down.

 

Use the code from one of many CSSplay menus like this one and edit it to what you want:-

http://www.cssplay.co.uk/menus/drop_definition4.html

[fazlionline]

Thanks a lot Wickham

 

I used that menu; it is exact what I needs. If you help me to solve some of its problem to make it best for my site, I will be so thankful.

 

If I mouse over on it, the submenu opens and covers the other area to the right side.

How to solve this?

Thanks

[PicnicTutorials]

"If you don't have anything positive to say, then don't say anything at all". So I won't say anything!

[virtual]

If you look at the CSS you will see widths, you need to change some of these to the width you need so that it doesn't hide whatever you have on the right hand side. Just experiment, play around with the CSS and you will immediately see which piece of code makes the change.

That is how you learn, using good coding and experimenting by trial and error so that you begin to understand how it works.

Good Luck