CAA: Christian Anime Alliance

I'm trying to make a drop down menu using html and css and I looked up a tutorial online that I followed exactly but when I apply it to my own menu nothing happens. I have my menu set up as an unordered list and I'm guessing the problem is that I'm trying to use two different styles in the list at the same time? Can anyone help?

I know some stuff about HTML and CSS, but we'll need some specific code excerpts if we're gonna be able to help you. Can you attach, link, or quote your HTML and CSS?

If you are using in-line HTML statements, those will overwrite and cause problems when mixed with CSS. Either do it all in CSS, or do it all inline (CSS would be my suggestion).

Give us a few excerpts please!

For the moment, my guess is that either you have embedded CSS conflicting with the CSS file, or in-line HTML that is overriding the CSS. I'm a fan of copying and pasting HTML and CSS when I can, it just makes things easier for me. XD in-line is easier for me, but it's not for everyone. But yes, we need some excerpts to figure out what the problem is. Sometimes using W3C's HTML and CSS validation thing helps.

Ok, I'm using css to style it and then linking to it in the html sheet. the css is like this:
#memorytrigger ul{

margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1 px solid #fff;
}

#memorytrigger ul li{

position: relative;

}

#memorytrigger li ul{

position: absolute;
left: 149px;
top: 0;
display: none;

}

#memorytrigger ul li a{

display: block;
text-decoration:none;
color: #777;
background:#999999;
padding: 5px;
border: 1 px solid #666666;
border-bottom: 0;


}

#memorytrigger li:hover ul{
display: block;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */



and the html ul looks like this:

<div id="navcontainer">
<ul id="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="book info.html">Book Information</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="speaking schedule.html">Speaking Schedule</a></li>
<li><a href="http://www.mymemoriesforyou.net/blog">Blog</a></li>
<li><a href="memory triggers.html">Memory Triggers</a></li>
<ul id="memorytrigger">
<li><a href="military.html">Military</a></li>
<li><a href="holidays">Holidays</a></li>
<li><a href="school">School</a></li>
<li><a href="romance">Romance</a></li>
<li><a href="1950s">1950's</a></li>
<li><a href="1960s">1960's</a></li>
</ul>
</ul>
</div>

Chibi0saka (post: 1495077) wrote:Ok, I'm using css to style it and then
<li><a href="memory triggers.html">Memory Triggers</

for starters you aren't supposed to have spaces in the names of html files

also. when you want any functionality just html and css wont do it. you need javascript or something like that

Okay, let's see what we can do about this.
First of all, when you write "#memorytrigger ul" you're telling it to look for a 'ul' element inside the object with the 'memorytrigger' id, which is not what you want. To look instead for a ul with that id, you should write "ul#memorytrigger" or, better yet, since ids are supposed to be unique, just '#memorytrigger'. So just remove all those extraneous 'ul' words from your CSS.

Next, if you intend to have the list pop up when you hover the mouse over the memorytrigger element, your selector "#memorytrigger li:hover" should be "#memorytrigger:hover li". What the first one says is "An li being hovered over inside #memorytrigger". What the second one says is "An li inside #memorytrigger if #memorytrigger is being hovered over". Word order is important in CSS, just as it is in English.

So, see if those two changes make it work.

armeckthefirst (post: 1495436) wrote:for starters you aren't supposed to have spaces in the names of html files

I'm not sure if that's necessarily true. It is considered bad practice according to some experts, but if it works, it works.

also. when you want any functionality just html and css wont do it. you need javascript or something like that

Actually if all you're doing is checking if an element is being hovered over or activated with the mouse, CSS is just fine for that. More modern versions of CSS even allow you to change things based on whether a checkbox is checked, and things like that. Actual programming or loading of content has to be done with Javascript, but things that are just presentation changes are better done with CSS these days.

I agree with what Midori said! The 'ul's just complicate everything. The more code you have, the easier it is to have things go wrong... or so is my opinion. XD

Javascript is great! I don't know it very well, otherwise I'd write a bit of code to help you out. In the future, if you really want to get fancy I'd advise that you learn Java.

Midori (post: 1495503) wrote:
Actually if all you're doing is checking if an element is being hovered over or activated with the mouse, CSS is just fine for that. More modern versions of CSS even allow you to change things based on whether a checkbox is checked, and things like that. Actual programming or loading of content has to be done with Javascript, but things that are just presentation changes are better done with CSS these days.

yeah your right. perhaps i misunderstood what he meant by "drop down list"

Arya Raiin (post: 1495599) wrote:I agree with what Midori said! The 'ul's just complicate everything. The more code you have, the easier it is to have things go wrong... or so is my opinion. XD

In this case it's not that they make it too complicated]Javascript is great! I don't know it very well, otherwise I'd write a bit of code to help you out. In the future, if you really want to get fancy I'd advise that you learn Java. [/QUOTE]Despite their unfortunate naming similarities, Java and Javascript are entirely different languages for entirely different purposes. Javascript is a high-level language you use to do browser programming, whereas Java is a multi-purpose low-level langauge. Java can be used to create applets to embed in webpages, just like Flash, but it can't interact with the whole page the way Javascript can.

Otherwise, I agree entirely.

Midori (post: 1495503) wrote:I'm not sure if that's necessarily true. It is considered bad practice according to some experts, but if it works, it works.

There are some browsers and servers where that space will cause the page to not work.

armeckthefirst (post: 1495436) wrote:also. when you want any functionality just html and css wont do it. you need javascript or something like that

This is entirely dependent on what you mean by "functionality." For example, the new reviews system uses no javascript at all. The chat server, however, is riddled with it.

This sounds like a great opportunity to learn jQuery

Menus such as these are a breeze, requiring just the markup and a handful of javascript statements to do the magic.

http://jquery.com/

You'd probably be interested in show() and hide().

Midori (post: 1495708) wrote:Despite their unfortunate naming similarities, Java and Javascript are entirely different languages for entirely different purposes. Javascript is a high-level language you use to do browser programming, whereas Java is a multi-purpose low-level langauge. Java can be used to create applets to embed in webpages, just like Flash, but it can't interact with the whole page the way Javascript can.

Otherwise, I agree entirely.

LOL! I said Java instead of Javascript?? Guess that's because I had been messing around with a java related project earlier. Yea, I meant Javascript. ^.^

Never had any friends that used jQuery... maybe I should try it. Looks like it could save me some time.

Anyway, I'll get back on topic. I thought this would be handy:

http://javascript-array.com/scripts/simple_drop_down_menu/

I think this is what you're looking for, so if you wanted you could just copy, paste, and customize.

jQuery will definitely save you time; that's what it's made for!

We've been using jQuery Mobile at work recently for one of our projects. It's still in Beta but it's no less awesome for speeding up development. Presentation details and Ajax are a breeze with it. Some of the jQuery Mobile events are a bit poopy ('click' vs 'vclick', ugh), but it's far better than taking the time to do it from scratch with plain-old javascript.

Nonsense! Nothing beats an ASP.NET webpage, where you just drag the drop-down list onto the page and edit the items in the properties bar. Then, after you click the button you can write the server-side logic in C#. Double click the button and huzzah! It creates the event for you. You just have to write the logic that is changed by the drop-down list!

Of course, I am a bit biased.

Here's the HTML code for my site's menu:

<div id="logo">
<a href="http://www.theotakuhq.com" title="The Otaku HQ" style="background: none;"><img src="/images/logo.png" alt="The Otaku HQ" border="0" /></a>
</div><!-- /logo -->

<div id="header">

<div id="menu-left">
</div><!-- /menu-left -->

<div class="menu-middle">
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="/index.php">Home</a></li>
<li class="dir">About
<ul>
<li><a href="/about/author.php">The Author</a></li>
<li><a href="/about/history.php">History</a></li>
<li><a href="/about/faqs.php">FAQs</a></li>
<li><a href="/about/affiliates.php">Affiliates</a></li>
</ul>
</li>

<li><a href="/shop/shop.php">Shop</a></li>

<li class="dir">Freebies
<ul>
<li><a href="/resources/reviews/genrelist.php">Genre List</a></li>
<li><a href="/resources/events.php">Event Calendar</a></li>
<li><a href="/resources/dictionary.php">Otaku Dictionary</a></li>
<li><a href="/resources/rec.php">Recommended Sites</a></li>
<li><a href="/resources/lyrics/lyrics.php">Anime Song Lyrics</a></li>
<li><a href="/resources/wallpapers.php">Wallpapers</a></li>
<li><a href="/resources/fanart.php">My Fan Art</a></li>
</ul>
</li>

<li><a href="http://www.theotakuhq.wordpress.com" target="_ " style="background: none;">Blog</a></li>

<li><a href="/community/poll/poll.php">Poll</a></li>
</ul>

</div><!-- /menu-middle -->

<div id="menu-right">
</div><!-- /menu-right -->
</div><!-- /header -->

And here's the CSS that styles it:

#menu-left {
background: url(../images/menu-left.gif);
height: 27px;
width: 34px;
float: left;
}

#menu-right {
background: url(../images/menu-right.gif);
height: 27px;
width: 34px;
float: right;
}

ul.dropdown { font-weight: bold; }


.menu-middle ul.dropdown LI {
background: url(../images/menu.gif) repeat-x center;
PADDING-BOTTOM: 5px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
COLOR: #fff;
PADDING-TOP: 6px;
}

.menu-middle UL.dropdown LI:hover {
BACKGROUND-COLOR: #7a7a7a;
COLOR: #fff;
}

.menu-middle UL.dropdown A:link {
COLOR: #fff;
TEXT-DECORATION: none;
}

.menu-middle UL.dropdown A:visited {
COLOR: #fff;
TEXT-DECORATION: none;
}

.menu-middle UL.dropdown A:hover { COLOR: #fff }

.menu-middle UL.dropdown A:active { COLOR: #fff; }

.menu-middle UL.dropdown A { display: block; }

.menu-middle UL.dropdown UL {
MARGIN-TOP: 0px !important;
WIDTH: 122px;
}

.menu-middle UL.dropdown UL LI {
FONT-WEIGHT: normal;
background-color: #333;
background-image: none;
}

ul.dropdown {
PADDING-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
LIST-STYLE-IMAGE: none;
PADDING-TOP: 0px;
}

UL.dropdown LI {
width: 122px;
PADDING-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
LIST-STYLE-IMAGE: none;
PADDING-TOP: 0px;
}

UL.dropdown UL {
PADDING-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
LIST-STYLE-IMAGE: none;
PADDING-TOP: 0px;
}

UL.dropdown {
Z-INDEX: 597;
POSITION: relative;
FLOAT: left;
}

UL.dropdown LI {
LINE-HEIGHT: 1.3em;
ZOOM: 1;
FLOAT: left;
VERTICAL-ALIGN: middle;
}

UL.dropdown LI.hover {
Z-INDEX: 599;
POSITION: relative;
CURSOR: default;
}

UL.dropdown LI:hover {
Z-INDEX: 599;
POSITION: relative;
CURSOR: default;
}

UL.dropdown UL {
Z-INDEX: 598;
POSITION: absolute;
WIDTH: 100%;
VISIBILITY: hidden;
TOP: 100%;
LEFT: 0px
}

UL.dropdown UL LI { FLOAT: none }

UL.dropdown UL UL {
TOP: 1px;
LEFT: 99%
}

UL.dropdown LI:hover > UL { VISIBILITY: visible }

Let me know if this doesn't work and I'll see if I can help you.

Well, with the relative links to images in there, it's probably not gonna look to great if we test it locally XD

Anyhow, it appears you're using CSS to do dropdown effects. Yes, it's possible to do it that way, but that's not what CSS is meant to do. For visual effects that are part of the user's interaction and experience in the page, the correct way to go is Javascript. CSS interactive states are good for styling buttons (eg, using sprites... it can be argued that not using sprites is the wrong way to do this) and the like, but not for dynamically hiding and showing elements that the user is to interact with based on their input's state.

Slater (post: 1498259) wrote:Well, with the relative links to images in there, it's probably not gonna look to great if we test it locally XD

Well, yes, you're going to have to create you own graphics. I put too much time into making the graphics for my site to just let everybody use them.

Considering you link to the site in question directly in your sig, it would be trivial for anyone to just go grab them. XD

But we're getting a bit off topic.

Is the OP still having any issues?