fazlionline Posted July 8, 2009 Report Share Posted July 8, 2009 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 8, 2009 Report Share Posted July 8, 2009 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. Quote Link to comment Share on other sites More sharing options...
fazlionline Posted July 8, 2009 Author Report Share Posted July 8, 2009 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 Quote Link to comment Share on other sites More sharing options...
akurtula Posted July 8, 2009 Report Share Posted July 8, 2009 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 Quote Link to comment Share on other sites More sharing options...
lm Posted July 8, 2009 Report Share Posted July 8, 2009 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. Quote Link to comment Share on other sites More sharing options...
fazlionline Posted July 9, 2009 Author Report Share Posted July 9, 2009 Products Laptops Mobiles Download Mac Version Windows Version Contact Us Quote Link to comment Share on other sites More sharing options...
lm Posted July 9, 2009 Report Share Posted July 9, 2009 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? Quote Link to comment Share on other sites More sharing options...
dms Posted July 9, 2009 Report Share Posted July 9, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted July 9, 2009 Report Share Posted July 9, 2009 I would hand it to you on a silver platter, but per request, no links... Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 9, 2009 Report Share Posted July 9, 2009 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.... Quote Link to comment Share on other sites More sharing options...
fazlionline Posted July 11, 2009 Author Report Share Posted July 11, 2009 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 Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 11, 2009 Report Share Posted July 11, 2009 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). Quote Link to comment Share on other sites More sharing options...
fazlionline Posted July 12, 2009 Author Report Share Posted July 12, 2009 Milk Goat Cow Eggs Free-range Other Cheese Smelly Extra smelly Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 12, 2009 Report Share Posted July 12, 2009 Try the link in the post above yours - third column from the left. Quote Link to comment Share on other sites More sharing options...
fazlionline Posted July 13, 2009 Author Report Share Posted July 13, 2009 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 13, 2009 Report Share Posted July 13, 2009 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 Quote Link to comment Share on other sites More sharing options...
fazlionline Posted July 13, 2009 Author Report Share Posted July 13, 2009 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 Quote Link to comment Share on other sites More sharing options...
lm Posted July 13, 2009 Report Share Posted July 13, 2009 you will need to look for "flyout" menu. this basic one: just coped paste code. Quote Link to comment Share on other sites More sharing options...
fazlionline Posted July 16, 2009 Author Report Share Posted July 16, 2009 I looked that menu But was unable to make the horizontal menu to vertical Code please Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted July 16, 2009 Report Share Posted July 16, 2009 (edited) I looked that menuBut 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 Quote Link to comment Share on other sites More sharing options...
fazlionline Posted July 18, 2009 Author Report Share Posted July 18, 2009 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 18, 2009 Report Share Posted July 18, 2009 ul li {float: left;} Quote Link to comment Share on other sites More sharing options...
fazlionline Posted July 28, 2009 Author Report Share Posted July 28, 2009 Home News Asia News Local News Photos Contact Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 28, 2009 Report Share Posted July 28, 2009 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 Quote Link to comment Share on other sites More sharing options...
fazlionline Posted July 28, 2009 Author Report Share Posted July 28, 2009 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted July 28, 2009 Report Share Posted July 28, 2009 "If you don't have anything positive to say, then don't say anything at all". So I won't say anything! Quote Link to comment Share on other sites More sharing options...
virtual Posted July 28, 2009 Report Share Posted July 28, 2009 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.