Jump to content
Stef's Coding Community
fazlionline

Horizontal Menu with a submenu

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


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

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