help creating some nice drop down menus in css

gschoenhofen

New Member
Okay, so I found some drop downs that I like and I modified it to fit my scheme I had going on my page.. Everything works except when I put my mouse over the link for the drop down menu, the submenus wont appear anywhere else but on the way left hand side of the screen.. I changed everything I needed to change or atleast so I thought to get the submenus to come in on the right but the only way I can do it is by changing their position to be relative, but then when they come down they conflict with everything I have right below my menu navigation bar...


Would someone be willing to let me send them a message on some sort of chat and help me out a little bit? or anyone know of a more simple code cause the one I'm using now for my drop downs has a little javascript in it and I wasn't really planning on using java...
 

jnjc

New Member
I went to your website but I can't see any drop down menus. Post a link to the problem and we can have a look at what you are using.


my drop downs has a little javascript in it and I wasn't really planning on using java...

There is a big difference between javascript and java...
 

gschoenhofen

New Member
Here's a copy of my website with the half-installed drop down menus..


and sorry.. I meant javascript :)

default.css is where all the css is except for the menu navigation.
jqueryslidemenu,js and .css is the slidemenu I downloaded that isn't working properly.

So here's the situation... I had to take my logo off too because this new menu navigation was messing up the position of that as well... so If there's any way you could position it back to how it's positioned on my live website at www.potent-pc.com/ that'd be great..

It'd also help me if you told me where you made changes, otherwise I suppose I can just compare, that way hopefully I learn a thing or two out of this.

Thank you very much for the help guys, it's appreciated.
 

gschoenhofen

New Member
Sorry cmjvulavala, but I already have the style and everything I want.. I'm just having trouble with the positioning of the hidden menus that pop out when the mouse hovers over the text...


Anyone figure anything out with what I had wrong in the code?
 

gschoenhofen

New Member
Okay so since nobody was helping me out I went ahead and tried a different menu...

Which only gave me a whole bunch of new issues that I'm trying to deal with now...

So my site works in my google chrome browser when it's on my computer, however when I uploaded it to my host it doesn't want to display the css.

It works perfect in Internet Explorer 7, but google chrome = no go.. I don't have firefox installed or I'd test it on there too..

http://www.potent-pc.com/

Also, with my new menu, no matter where I put the styling to try and get the text to change color on a hover, nothing works.


Any suggestions? please? I'm just trying to get this simple menu to work but I guess I'm too much of a noob to create a simple black drop down menu with white text and #23b9ff text on mouse hover, keep my logo in there, and have it all positioned right at the top of the screen with no bugs in any browsers.
 

jnjc

New Member
Make the following change to yous css to fix the hover issue:

line 146 in default.css

Code:
.menu ul li:hover ul li a:hover {
background:#000000; 
color:#23B9FF[B] !important[/B];
}

To fix the gap problem look around line 165 of default.css the height of the header div is specified as 200px, change it to 100px and it should solve that problem.


As for google chrome as far as I'm concerned you shouldn't be worry about it, it's still in beta so in my opinion there is no need to support a beta product.


HTH,
JC
 

gschoenhofen

New Member
Thank you jnjc! Simple yet great advice, I made the changes you suggested.. and well...

The hover change is great.. works perfect :)

However, the change I made on line 162 or whatever making the height 100px instead of 200.. well... that didn't fix the problem of the giant gap in any browser, not firefox, or google chrome... not only that, but now in IE7 my drop down menu overlaps down onto the rest of my page...


there must be something else I've got wrong with my code or something that's causing this bug.. anyone have any solution?
 

jnjc

New Member
I mustn't have had my coffee when I posted the second part of that fix:)

Undo it and try adding a height to your #logo style (around line 173 of your css file):

Code:
#logo {
float:left;
[B]height:180px;[/B]
}


(You might also need to tweak the header height to 180px instead of 200px to move the content up).

HTH,
JC
 

gschoenhofen

New Member
One last question, about my dropdown.. http://www.potent-pc.com/

It's kind of buggy in a sense that sometimes it's hard to get the submenu hidden block to stay visible after you hover your mouse over the main link.. must be another bug in my code.. any suggestion?
 

jnjc

New Member
Don't automatically assume this is a bug in your stuff. Go back to the page where you got the code for your menu and test it, it is possible that the original script is a bit buggy.

If the original script is OK then first thing I would do is put the original CSS file for the menu in place of your .css. The site will be all over the place but the menu should still function. If the menu is OK then from there start adding back in your .css changes, testing as you go. If the problem is with your .css you should find it this way.

If you don't find it that way then remove all the elements from your page and starting adding them back in .....

Let me know how you get on.

HTH,
JC
 
Top