Web Design Discussion - create a drop down menu ???

Print Page | Close Window

create a drop down menu ???

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: Web Design Discussion
Forum Description: Discussion on web design and development subjects.
URL: https://forums.webwiz.net/forum_posts.asp?TID=24876
Printed Date: 28 March 2026 at 1:23am
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: create a drop down menu ???

Posted By: miladanimator
Subject: create a drop down menu ???
Date Posted: 22 November 2007 at 8:54pm

hi all ...
I need to dsign a drop down menu just like web wiz drop down menu :

I need to design a drop down menu without using javascript ...

the webwiz drop down menu, dont load in IE 6 - I neeed a to my menu load in fire fox and IE and opera and ....

any one can give me the code for drop down menu ???? Cry

Replies:

Posted By: StarDust
Date Posted: 22 November 2007 at 10:06pm

http://www.cssplay.co.uk

loads of free menus with CSS

-------------
http://board.ebizbd.net/">

Tips, mods and skins for WWF v9.x

Posted By: WebWiz-Bruce
Date Posted: 23 November 2007 at 8:25am

It does load in IE 6 and IE 5.

The one on the Web Wiz Guide site uses CSS only. It's based on 'Son of SuckerFish' found at:-

http://www.htmldog.com/articles/suckerfish/dropdowns/ - http://www.htmldog.com/articles/suckerfish/dropdowns/

-------------
https://www.webwiz.net/web-wiz-forums/forum-hosting.htm" rel="nofollow - Web Wiz Forums Hosting
https://www.webwiz.net/web-hosting/windows-web-hosting.htm" rel="nofollow - ASP.NET Web Hosting

Posted By: miladanimator
Date Posted: 23 November 2007 at 2:36pm

thanx a lot borg ...
I use this method too design my drop down menu :
http://www.htmldog.com/articles/suckerfish/dropdowns/ - http://www.htmldog.com/articles/suckerfish/dropdowns/

this is my menu and work correctly in firefox ...

my menu load in IE too and all drop downs work correctly ...
but in IE, my menu create a scroll bar in my page :

and when I scroll the page to the left and left, I see that all drop downs located in the left and left side on my page :

any one can help me and solve my problem in IE ???

Posted By: miladanimator
Date Posted: 23 November 2007 at 2:39pm

this is my .css code that use for this drop down menu :




/*Drop-down menu*/


#nav, #nav ul {

    padding: 0;
    margin: 0;
    list-style: none;    
}

#nav a {
display: block;
width: 95%;
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 2px;
PADDING-TOP: 2px;
}

#nav A:hover 
{
COLOR: #cc0000;
text-decoration: none;
}


#nav li {
    float: right;
    width: 100%;
}

#nav li ul {
BORDER-RIGHT: #e7e7e7 0px solid;
PADDING-RIGHT: 6px;
BORDER-TOP: #e7e7e7 1px solid;
PADDING-LEFT: 0px;
BACKGROUND: url(../../images/menu_shadow.gif) no-repeat right bottom;
PADDING-BOTTOM: 5px;
MARGIN: 0px; BORDER-LEFT: #e7e7e7 1px solid;
PADDING-TOP: 0px;
BORDER-BOTTOM: #e7e7e7 0px solid;
HEIGHT: auto;
    position: absolute;
    width: 220px;
    left: -999em;    
}

#nav li:hover ul {
    left: auto;    
}

#nav li:hover 
{
    border: 1px dotted #FF6D0D;
    background-color: #FFFFB0;
    }


#nav li:hover ul, #nav li.iehover ul {
left: auto;
}

#nav LI.ieHover {
border:1px dotted #F5C41C; background-color: #FFFFB0;
    }
    
.menu
{
    background-color: #D3E2FE;
}

and this is m .JS file :

ieHover = function() {
    var menuElement = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i < menuElement.length; i++) {
        menuElement.onmouseover = function() {
            this.className = 'ieHover';
        }
        menuElement.onmouseout = function() {
            this.className = '';
        }
    }
}
if (window.attachEvent) window.attachEvent('onload', ieHover);

what is the problem ?????

Posted By: miladanimator
Date Posted: 23 November 2007 at 2:50pm

Posted By: WebWiz-Bruce
Date Posted: 23 November 2007 at 3:30pm

I found it was a case of just spending some time playing with the CSS till you get the drop downs where you want them to appear.

It took me a good day of messing around with the CSS to get it right for the Web Wiz Guide web site.

-------------
https://www.webwiz.net/web-wiz-forums/forum-hosting.htm" rel="nofollow - Web Wiz Forums Hosting
https://www.webwiz.net/web-hosting/windows-web-hosting.htm" rel="nofollow - ASP.NET Web Hosting

Posted By: miladanimator
Date Posted: 23 November 2007 at 6:06pm

Thanx ...
I found the problem ...
My css and .js file doesn't have any problem ...
---------
my site direction is : Right to Left ... and I use <html dir="rtl"> in my page ....

so open http://www.webwiz.net/ in IE and change page direction to "right to left" by : right click > encoding > right to left ...

ow in the webwiz home page a scroll bar like this created :

is there a way to use this drop down menu in "right to left" pages ???

Posted By: miladanimator
Date Posted: 26 November 2007 at 4:06am

any one can help me ????
I want to use this menu in right to left page ...
in IE this menu has a problem in right to left pages ....
please help me ...

I have time limit to do this project ...