13 replies [Last post]
mikeh66
mikeh66's picture
Offline
newbie
Last seen: 6 years 12 weeks ago
Joined: 2008-01-22
Posts: 1
Points: 0

Hi All

I'm using the Spry menu bar widget in Dreamweaver
to create a horizontal drop-down down, like this:

Item 1
- Item 1.1
- Item 1.2
- Item 1.3

Does anyone know how to modify the CSS in this widget
to create a menu like this:

Item 1
Item 1.1 Item 1.2 Item 1.3

where the sub-menu items are side-by-side, rather than
under each other?

Here's the HTML code (body only):

And the CSS, with comments as in DW template:

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}

I've been banging my head against this for hours, so any help would be great.

Thanks

Mike

jesushax
Offline
Regular
Last seen: 5 years 37 weeks ago
Joined: 2007-09-12
Posts: 35
Points: 0

look for the

look for the below

ul.MenuBarHorizontal a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%;

and add display:inline; to it

lisainla
Offline
newbie
Los Angeles
Last seen: 6 years 5 weeks ago
Los Angeles
Joined: 2008-03-14
Posts: 1
Points: 0

can't get the submenu to display horizontally

Hi, there --

I'm having the same issue as Mike -- I want the submenu in my horizontal menu bar to display horizontally beneath the parent item. I tried adding the "display: inline;" language to the CSS, but it didn't work for me. (The submenu was still oriented vertically -- but it began beside rather than below the parent item).

Any thoughts? I'm new to spry, and this is making me crazy.

Thanks so much,
Lisa

PeterPan
PeterPan's picture
Offline
Enthusiast
London
Last seen: 4 years 17 weeks ago
London
Joined: 2008-03-13
Posts: 51
Points: 11

I had a problem like this

I had a problem like this not so long ago.

so what you could try is add a class to your second list(Your sub menu), then use that class to access the 'li' tags(your sub menu items), the piece of css that would let you float the items next to each other then would be, 'float:left'.

so your HTML:


  • Item 1.1

  • Item 1.2


and your css:

ul.floatSubMenu li
{
float:left;
}

obviously you'd need to add the rest of your script to it but i know that this should work. I hope its what you guys have been looking for.

kirbster
Offline
newbie
Last seen: 5 years 43 weeks ago
Timezone: GMT-4
Joined: 2008-04-10
Posts: 4
Points: 0

I've tried to follow the

I've tried to follow the above and get my submenus to appear horizontally as the OP was looking to do, but I've had no luck. I'm probably reading something wrong.

Could someone please do a step-by-step procedure on how to make this work? I've tried the display:inline and float:left tricks as mentioned above and absolutely nothing happened.

Can anyone help?

Thanks!

makstak
makstak's picture
Offline
newbie
Last seen: 5 years 46 weeks ago
Joined: 2008-05-26
Posts: 1
Points: 0

found out how

I've found out the answer to your problem. If you still need help with this - please e-mail me.

rockslayer [a] t [g] mail [d] ot [c] om

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 34 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

makstak wrote:I've found out

makstak wrote:
I've found out the answer to your problem. If you still need help with this - please e-mail me.

We'd prefer if questions asked on the forum are dealt with on the forum; that way everyone can benefit from the answers.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

benbenben
Offline
newbie
Last seen: 5 years 46 weeks ago
Joined: 2008-05-29
Posts: 1
Points: 0

this worked for me

Hi all,

this may not be the optimal way to do it but it worked for me.

set the width of
ul.MenuBarHorizontal ul
from "auto" to a pixel width wide enough to hold all of the submenu items.

so you might end up with
width: 780px;

you might need to add a
float: left;
to the same CSS rule

If that doesn't work for you, I'll post the relevant CSS code below from my site and you can see the differences between your own.

the DW comments are included, when there are two comments above a rule the second is my own.

cheers and good luck!

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; cursor: default; position: absolute; bottom: 18px; width: 640px; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 10px; line-height: 10px; position: relative; text-align: left; cursor: pointer; width: auto; float: left; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ /* 640px is the width of the site, not sure if the float left is doing anything */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; z-index: 1020; cursor: default; width: 640px; position: absolute; left: -1000em; float: left; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ /* left positioning set to have the first of two submenues align to the left margin but the second to be more or less centred below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: -60px; top: 20px; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: auto; float: left; font-size: 8px; line-height: 8px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ /* To make the submenus appear a few pixels below the main menu, giving it some space */ ul.MenuBarHorizontal ul ul { position: absolute; margin: 20% 0 0 0; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; }

all4u
Offline
newbie
Oklahoma
Last seen: 5 years 14 weeks ago
Oklahoma
Timezone: GMT-6
Joined: 2009-01-10
Posts: 1
Points: 0

Here is the code for the menu bar

I somehow created a menu bar that you are looking for by mistake and am trying to get the drop down menu with the submenus underneath each other. Here is the SpryMenuBarHorizontal.css code

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: auto;
padding: 0;
list-style-type: none;
font-size: 80%;
width: 60em;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1020;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
width: auto;
float: left;
border: 1px solid #c3ceae;
}
/* Submenus should appear below their parent (top: Innocent with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
display: none;
position: absolute;
left: 0;
top: 1em;
}
ul.MenuBarHorizontal li > ul
{
top: auto;
left: auto;
}
ul.MenuBarHorizontal li:hover ul, li.over ul
{
display: block;
position: fixed;
visibility: visible;
overflow: hidden;
z-index: 1020;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/*Size of Sub Menu Container */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}

/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: 0% 0 0 75%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: 0;
top: 0;
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 0px solid #c3ceae;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
background-color: #6d544f;
padding: 0.5em 0.75em;
color: #c3ceae;
text-decoration: none;

}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #c3ceae;
color: #FF0000;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #c3ceae;
color: #fefbe9;
}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: fixed;
z-index: 1010;
filter: alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #c3ceae;
}
}

shadowmuseum
shadowmuseum's picture
Offline
newbie
London
Last seen: 5 years 13 weeks ago
London
Joined: 2009-01-15
Posts: 3
Points: 0

Hi everyone. I actually

Hi everyone.

I actually experience the opposite problem - my Spry Horizontal Menu Bar displays fine in Firefox & Safari, but in IE, the sub-menu items displays 2 in a row, like this:

item 1
sub-menu item 1 sub-menu item 2
sub-menu item 3 sub-menu item 4
sub-menu item 5

This is the current test link:

varico.co.uk/mockup/bone1.html

I've tried setting various CSS rules to 'display: block' but nothing seems to work. I am just baffled. I can't get the job done at all if this bugger doesn't behave... please help... many, many thanks in advance.

Below is the Spry CSS file:

@charset "UTF-8";
 
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
/*******************************************************************************
 
 LAYOUT INFORMATION: describes box model, positioning, z-order
 
 *******************************************************************************/
 
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 900px;
	padding-right: 0;
	padding-left: 0;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: <a href="http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html" rel="nofollow">http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html</a> */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: auto;
	float: left;
}
/* Submenus should appear below their parent (top: <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: auto;
	position: absolute;
	left: -1000em;
	margin-top: -5px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	display: block;
	float: left;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: auto;
	display: block;
	float: left;
	position: relative;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	display: block;
	clear: both;
	float: left;
	margin-top: -5%;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}
 
/*******************************************************************************
 
 DESIGN INFORMATION: describes color scheme, borders, fonts
 
 *******************************************************************************/
 
/* Submenu containers have borders on all sides 
ul.MenuBarHorizontal ul
{
}*/
 
 
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #D9E7E8;
	color: #747474;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	color: #7AB7C2;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	color: #FFFFFF;
}
 
/*******************************************************************************
 
 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
 *******************************************************************************/
 
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%)*/
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	display: block;
}
 
/*Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%)*/
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
 
}
 
 
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%)*/
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
 
}
/*Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%)*/
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
 
}
 
 
/*******************************************************************************
 
 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 
 *******************************************************************************/
 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
 
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing (changed from inline)*/
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
	display: block;
	f\loat: left;
	}
}

dassa09
Offline
newbie
Last seen: 5 years 9 weeks ago
Joined: 2009-02-12
Posts: 1
Points: 0

need the horizontal submenu links to position correctly

hi all
thanks for the solution its taken me a step further...
I have followed benbenben instructions to achieve a horizontal submenu which has worked well. but my problem is I wish for the horizontal bar to stretch across the whole span of the menu not just from the column menu it belongs to.
it works on the first column fine but all other primary links the submenu starts at this position.
for example:

the current active link is highlighted in bold
home content links topic
link1 link2 link3 link4 link5

home content links topic
link1 link2 link3 Link4 link5

I want to the submenu to display like this ( i.e. the submenu block starts from the left side under home and not start under the highlighted active link)
i will be using different colour blocks which will highlight the submenu with that colour on hover: see for a working example of what i wish to achieve: [url]http://visitbristol.co.uk/ [/url]

home content Links topic
link1 link2 link3 link4 link5

CSSelgreco1965
CSSelgreco1965's picture
Offline
Enthusiast
Greece
Last seen: 2 years 51 weeks ago
Greece
Timezone: GMT+3
Joined: 2004-06-13
Posts: 51
Points: 28

I've been doing all these

I've been doing all these elements and it works to have the submenu horizontal, but it appears too far from the main menu, so when you move to it, it disappears.
Also, I'd like it to be aligned to the left edge. I have tried everything and nothing works.
Any help on these two matters?

Thanks in advance

The web becomes a tangled mess when Microsoft gets involved!

CSSelgreco1965
CSSelgreco1965's picture
Offline
Enthusiast
Greece
Last seen: 2 years 51 weeks ago
Greece
Timezone: GMT+3
Joined: 2004-06-13
Posts: 51
Points: 28

I found this tutorial. Looks

I found this tutorial.
Looks nice
I'm sure it can be adapted
link

The web becomes a tangled mess when Microsoft gets involved!

CSSelgreco1965
CSSelgreco1965's picture
Offline
Enthusiast
Greece
Last seen: 2 years 51 weeks ago
Greece
Timezone: GMT+3
Joined: 2004-06-13
Posts: 51
Points: 28

Found a different tutorial

Found a different tutorial that allowed better control and so I finally made this.
Test site!

The web becomes a tangled mess when Microsoft gets involved!