TheresNoSolution.com

Ok so I'm working on my website and I want to have a drop down menu for each album so I can have "vinyl", "casettes", "CD's" and "miscellaneous". I really have no idea how to do it at all, I've googled around a bit but they don't appear to speak English on tech forums.

So when you hover on "cheshire cat" for example, it has the menu drop down below it and then each button links to it's page. Sounds simple but I dunno how to do it... Here's the website if you need to look.
http://tyler1942gd.com/

The menu is made out of this:

Spoiler: show

<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="pre1994.html">Pre-Cheshire</a></li>
<li><a href="cheshirecat.html">Cheshire Cat</a></li>
<li><a href="duderanch.html">Dude Ranch</a></li>
<li><a href="eots.html">E.O.T.S</a></li>
<li><a href="toypaj.html">T.O.Y.P.A.J.</a></li>
<li><a href="untitled.html">Untitled</a></li>
<li><a href="sideprojects.html">Side Projects</a></li>
</ul>

This is the style stuff:

Spoiler: show

ul#menu a {
padding-top: 7px;
display: block;
width: 106.6px;
height: 28px;
text-decoration: none;
color: white;
margin-top: -21px;
background: #6e6d6d;
background: -moz-linear-gradient(top, #6e6d6d, #101010);
font-size: 14;
}

ul#menu {
text-align: center;
list-style: none;
width: 891px;
margin: auto;
}

ul#menu li {
float: left;
}

ul#menu a:hover {
background: black;
color: white;
background: #6e6d6d;
background: -moz-linear-gradient(top, #101010, #49494a);
}

ul#menu a:active {
color: black;
background: black;
}

Sorry if I have bad coding or anything lol. Not sure how many people here are good with HTML or CSS. But even if you could point me in the right direction, not necessarily just feeding me code it would be nice. Thanks.

I reaallyy have no experience with html/css , but ill try to help you find whatever.. hows this?

http://www.echoecho.com/htmlforms11.htm

I sorta figured out a way so you can lock the topic if you want. It's still fucked but I think I can just mess around with it till it's right by myself now

Use JavaScript.

As Bobby said, Javascript is the way to go

Here you go a quick sample of how to run it down
http://javascript-array.com/scripts/sim ... down_menu/

I put the Javascript in the head and it's just appearing as text at the top of the page. Do you know why it would do that?

Javascript is not the way to go.

CSS is much better.

Tyler. wrote:I put the Javascript in the head and it's just appearing as text at the top of the page. Do you know why it would do that?

Oops forgot to put <script></script>

Jake! wrote:Javascript is not the way to go.

CSS is much better.

Oh man now what do I do

Jake! wrote:Javascript is not the way to go.

CSS is much better.

JavaScript is much easier though considering he is not a pro-web developer. He can more of less just Google JavaScript menu and tweak the code to his liking. Although, I've got to ask why you didn't just use a CMS?

HugoDisasters wrote:As Bobby said, Javascript is the way to go

Here you go a quick sample of how to run it down
http://javascript-array.com/scripts/sim ... down_menu/

Bobby? Plus, I never said it was the way to good, I simply said use it because it's easier for beginners.

Thanks guys. I can get the javascript to work how I want pretty much so I'm gone with that for the moment.

One problem I have is when you go into the drop down menu options, the top menu bit becomes un-highlighted

Like you can see on here http://tyler1942gd.com/ . If you go to 'Cheshire Cat' it becomes black, but if you go down to Cassettes then it doesn't stay black since it isn't hovered on any more. Do you know how I can make it still have the black hover property while the mouse is on something else?

Tyler. wrote:Thanks guys. I can get the javascript to work how I want pretty much so I'm gone with that for the moment.

One problem I have is when you go into the drop down menu options, the top menu bit becomes un-highlighted

Like you can see on here http://tyler1942gd.com/ . If you go to 'Cheshire Cat' it becomes black, but if you go down to Cassettes then it doesn't stay black since it isn't hovered on any more. Do you know how I can make it still have the black hover property while the mouse is on something else?

Since it's a hover function it doesn't stay black, as you said yourself. I do know one solution, but I don't know if it's what you seek. Anyway, I suppose you have something like this in your CSS;

div.something:hover {background: black;}

Now add this to your code;

div.something:visited {background: black;}

This way the links you click will stay black once you have clicked (or visited) them once. So if you click on "Cassettes" under "Cheshire Cat", it will be black the next time you "open" the drop down menu.

No. Don't do that. It will stay black all the time once you visit it.

Yeah it'll keep it black but then I need it to go back to the gradient after I take the mouse off that drop down. I'll keep looking around for an answer if there is one

use some javascript.

if dropdown menu is open
link background colour = black
else <whatever colour it was>

Jake! wrote:use some javascript.

if dropdown menu is open
link background colour = black
else <whatever colour it was>

I've never used Javascript before besides copy pasting, but I'll try figure it

Tyler. wrote:

Jake! wrote:use some javascript.

if dropdown menu is open
link background colour = black
else <whatever colour it was>

I've never used Javascript before besides copy pasting, but I'll try figure it

Now is the best time to learn then.
http://www.w3schools.com/js/default.asp