fazlionline Posted April 11, 2009 Report Posted April 11, 2009 Hello dear I have to problems: 1. I am trying to make a horizontal menu, and which open another horizontal menu under that one. I tried but the sub menu is opening vertically, not horizontally. 2. Is this possible with lists??? And how? Help Quote
Wickham Posted April 11, 2009 Report Posted April 11, 2009 Yes it is possible. You probably have float: left for the top level li tags now, something like:- li { float: left; } and for the second level you need float left for the second level li tags:- li li { float: left; } The above is the simplified principle but may need adapting for your menu. Quote
fazlionline Posted April 12, 2009 Author Report Posted April 12, 2009 hji jlhaslip http://www.jlhaslip.trap17.com/tests/index.html is working but whe i mouse over on the menu, sumenu opens but when i try to click on submenu , it dis apears... and hi Wickham can you write the full code of such menu for me. i will edit it later Quote
jlhaslip Posted April 12, 2009 Report Posted April 12, 2009 That is a demo only with Dummy links. Quote
fazlionline Posted April 12, 2009 Author Report Posted April 12, 2009 hi all i want just like this kenu http://www.cssplay.co.uk/menus/drop_line.html how can i find it code Quote
Wickham Posted April 12, 2009 Report Posted April 12, 2009 (edited) Open this page http://www.cssplay.co.uk/menus/drop_line.html Click View, Source to see the source code. Look for the sections that relate to the menu you want to copy. /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_line.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .menu { position:relative; width:750px; height:2em; background:#b7c6ac; border-top:10px solid #b7c6ac; padding-bottom:1px; background:#b7c6ac url(drop/line.gif) bottom left repeat-x; margin-bottom:5em; margin-top:50px; } * html .menu {padding-bottom:0;} .menu ul{ list-style-type:none; padding:0; margin:0 0 0 20px; width:730px; height:100%; } .menu li{ float:left; } .menu table{ position:absolute; border-collapse:collapse; left:0; top:0; } .menu a, .menu :visited { color:#fff; text-decoration:none; } .menu a em.lft, .menu :visited em.lft { display:block; float:left; width:5px; height:2em; background: transparent url(drop/lefta.gif); border-bottom:1px solid #777; } .menu a b, .menu :visited b { display:block; font-weight:normal; float:left; padding:0 10px; height:2em;line-height:1.9em; background: transparent url(drop/mida.gif); cursor:pointer; border-bottom:1px solid #777; } .menu a em.rgt, .menu :visited em.rgt { display:block; float:left; width:5px; height:2em; background: transparent url(drop/righta.gif); border-bottom:1px solid #777; } .menu ul ul { visibility:hidden; position:absolute; height:2em; top:2em; left:-20px; width:749px; border-bottom:1px solid #777; border-right:1px solid #777; background:#ccc; } .menu :hover { white-space:normal; } .menu a:hover b { color:#000; background: transparent url(drop/midb.gif); border-bottom-color:#ccc; } .menu a:hover em.lft { background: transparent url(drop/leftb.gif); border-bottom-color:#ccc; } .menu a:hover em.rgt { background: transparent url(drop/rightb.gif); border-bottom-color:#ccc; } .menu li:hover > a b { color:#000; background: transparent url(drop/midb.gif); border-bottom-color:#ccc; } .menu li:hover > a em.lft { background: transparent url(drop/leftb.gif); border-bottom-color:#ccc; } .menu li:hover > a em.rgt { background: transparent url(drop/rightb.gif); border-bottom-color:#ccc; } .menu ul li:hover ul, .menu ul a:hover ul{ display:block; visibility:visible; top:2em; margin-top:1px; } .menu ul :hover ul li { display:block; border-left:1px solid #777; background:#ccc; height:2em; } .menu ul :hover ul li a { display:block; font-size:0.8em; height:2em; line-height:2.5em; width:auto; float:left; color:#444; padding:0 10px;} .menu ul :hover ul li a:hover { color:#c00; } which is inside head section style tags or, even better, inside a stylesheet. This is the html markup:- John Constable The Hay Wain Brighton Beach Malvern Hall Salisbury Cathedral Weymouth Bay William Turner Fishermen at Sea The Shipwreck The Vale of Ashburnham Crossing the Brook Henri Matisse The Girl with Green Eyes The Dream Woman in Blue The Yellow Dress Paul Cezanne The Large Bathers Onions and Bottles Mardi Gras Still Life Boy in a Red Waistcoat You may need to put all of the above in a containing div or add styles to #menu Edited April 12, 2009 by Wickham Quote
jonbey Posted April 12, 2009 Report Posted April 12, 2009 I recommend the Stu Nichols menus too (i.e. CSS Play and also http://www.stunicholls.com/menu/index.html) I have been using his menus for a while now, they are really good. My favourite is the dropline, although I remove all images and use CSS to colour the tabs (better in all browsers and uses less bandwidth), Quote
PicnicTutorials Posted April 12, 2009 Report Posted April 12, 2009 I would not recommend them. They're difficult (at best) to edit and/or customize. Just use a script for ie6 and save yourself the frustration. Quote
fazlionline Posted April 13, 2009 Author Report Posted April 13, 2009 (edited) Dear jonbey i liked that menu but how can i make the submenu horizantal. and how can i get its code, ( i tried right click and source code, but nothing happened)... is there any javascript attached to this, i need only CSS Thanks Fazli Edited April 13, 2009 by fazlionline Quote
Wickham Posted April 13, 2009 Report Posted April 13, 2009 (edited) but how can i make the submenu horizantal..........is there any javascript attached to this, i need only CSS Thanks Fazli This site http://www.cssplay.co.uk/menus/drop_line.html which you said you liked has a horizontal submenu and I extracted the code for you in my previous post. It's much better for a beginner to use a menu that already works than to try to make your own. Edit the CSSplay menu. Edited April 13, 2009 by Wickham Quote
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.