Jump to content
Stef's Coding Community
fazlionline

li ul hide sublist

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by dms

Share this post


Link to post
Share on other sites
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....

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 by Eric

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...