close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Level 2 Hover width / Level 3 position

Thread began 2/12/2010 8:50 pm by bjgarner241692 | Last modified 8/28/2012 4:09 pm by Jason Byrnes | 1058 views | 7 replies |

bjgarner241692

Level 2 Hover width / Level 3 position

index.asp

Level 2 is 180 pixels wide
When I hover over my Level 2 items with a Level 3, the Level 3 link appears at 100 pixels. I can only see the first one, the others are buried.

I think there are 2 problems.
1, Level 3 is not starting at 180 pixels, it is starting a 100
2, Level 3 may have a Z-index problem because the 2'nd through 3'rd items in this menu are appearing behind the level 2 items.

I cannot find what to change.

Sign in to reply to this post

neilo

I can't seem to get the z-index to make any difference. You could add a left margin to your ( isi2010/CSSMenuWriter/cssmw2/menu.css ) 'ul#cssmw2 ul.level-2 > li > a {' rule:

ul#cssmw2 ul.level-2 > li > a {
background-image: url("../cssmw2_images/alpha80.png");
border-bottom: solid 1px #fff;
border-right: solid 1px #fff;
color: #173232;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
margin: 0 0 0 81px; // Changed from 0 0 0 0;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-transform: uppercase;
width: 100px;
z-index:999;
}

Hopefully someone will advise re the z-index.

Sign in to reply to this post

anonymous

Neilo,

Z-Index ONLY works on positioned elements... so you have to define the position attribute (position:absolute, position:relative, or position:fixed) in your css rule for that particular element or the Z-Index is rendered useless.

Brian

Sign in to reply to this post

neilo

Cheers Brian,

I think I have been reminded about this a couple of times already, this seems to be one of my numerous blind spots, many thanks for the info. This place is brilliant.

Sign in to reply to this post

bjgarner241692

Works fine neilo, thanks.
I don't understand why the hack is necessary though. This should happen automatically.

Sign in to reply to this post

bjgarner241692

I have a similar issue again with a vertical menu.
residential-hvac.php

The level 2 needs to start at 213 pixels and it is starting at 150, but level-2 does not appear in the CSS.

Also, only 3 of these menu items have sub items so I don't understand why I am getting the arrow on each level.

Please advise,

Sign in to reply to this post

bjgarner241692

Sorted the image width, but still not sure about the arrows.

Sign in to reply to this post

Jason ByrnesWebAssist

the arrows will be added to all menu levels, not just the ones that include sub menus.

you can edit the css and the menu so that only the ones that have submenus include the arrow.

in the menu.css file, look all instances of the following line:
background-image: url("../cssmw0_images/arrow.gif");


and comment it out;
/*background-image: url("../cssmw0_images/arrow.gif");*/


then in the menu, add an inline style to the menu items that you want to include the arrow on, for example:
<li class="parent"><a href="Products.php" style="background-image: url('plugins/CSSMenuWriter/cssmw0_images/arrow.gif'););">Products</a>

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...