Here is my CSS coding for my Vertical Menu: #navMenu ul { list-style: none; margin: 0; padding: 0; } #navMenu { width: 175px; } #navMenu li { display: inline; } /* menu */ #navMenu li a.b4sub:link { text-align: center; margin-left: auto; margin-right: auto; font-family: Arial; font-size: 15px; text-decoration: none; color: purple; font-weight: bold; font-variant: small-caps; } #navMenu li.bgimg { background-image: url(/img/bgbuttons.gif); } #navMenu li a.b4sub:hover { text-decoration: line-through; } #navMenu li a.b4sub:active { display: ([COLOR="Red"]I WANT TO DISPLAY THE "#navMenu li li"[/COLOR]); } /* subMenu */ #navMenu li li { display: none; #navMenu li li a:link { font-family: Century Gothic; text-decoration: none; text-align: left; font-size: 12px; font-weight: normal; display: block; } #navMenu li li a:hover { font-weight: bold; text-decoration: underline; } Code (markup): And this is my HTML code for the menu: <div id="navMenu"> <ul> <li class="bgimg"><a class="b4sub">Home Page</a> <ul> <li><a href="special.html">Monthly Special</a></li> <li><a href="faq.html">FAQ</a></li> </ul> </li> <li class="bgimg"><a class="b4sub">Services & Prices</a> <ul> <li><a href="webdev.html">Website Development</a></li> <li><a href="design.html">Layouts / Designs / Logos</a></li> <li><a href="advert.html">Business Cards / Panflets</a></li> </ul> </li> <li class="bgimg"><a class="b4sub">Customers</a> <ul> <li><a href="pastproj.html">Past Projects</a></li> <li><a href="comments.html">Comments</a></li> </ul> </li> <li class="bgimg"><a class="b4sub">To Apply</a> <ul> <li><a href="fan.html">For a Fan Site</a></li> <li><a href="pers.html">Personnal Site</a></li> <li><a href="biz.html">Business Website</a></li> </ul> </li> <li class="bgimg"><a class="b4sub">Contact Us</a> <ul> <li><a href="address.html">Phone & Address</a></li> <li><a href="email.html">By Email</a></li> </ul> </li> </ul> </div> Code (markup): Three problems: 1. my "bgimg" class doesnt function so how do I add the background-image? 2. i know Firefox doenst function with text-align: center tho in IE it does; so I also set "margin-left" and "margin-right" to "auto", but even that doesnt work! (Yes I tried: "text-align: -moz-center;" as well) All I want to do is center the main menu text (class="b4sub")? 3. How do I set the main menu "onclick" so that the submenu displays? Any takers? I'm all out of ideas and I've been working on this for these past two weeks!
Hey man, First off - a:link is not necessary. just a, a:hover, a:active, and a:visited are necessary. text-align: center; does work fine in firefox. You can't use CSS to make dynamic menus like that. There is a way, but it's haxxor if you ask me. Google Suckerfish, and you'll find it at the top. I recommend a little js. Try this. .js file: var dropdown = function($id) { var thetag = document.getElementByID($id); if(thetag.className == "hidden"){ thetag.className = "show"; }else{ thetag.className ="hidden"; } } You get the idea, the hidden class would have a style of display: none; and the show would be display: block; then you just have to worry about positioning so that when it's block, it shows up in the right spot.
P.S. I forgot the html: <li><a href="javascript:dropdown('subMenu');">The top LI</a> <ul id="subMenu" class="hidden"> <li><a>Sub Links</a></li> </ul> </li>
Thx for the quick reply! Only problem tho: I've never used Javascript, so lets say I say that little file under this name: 'menu.js', does my html page link to it directly? (I don't think so) So how do I link to it? Is this correct: <link rel="javascript" href="/menu.js" type="text/javascript"> ??? Forgot to mention: it doesnt function in IE. I just noticed that... I'd like my menu to function for both IE and Firefox, seeing as they are to two most basic browser that people function with.
hmmm well I have a menu working in all browser including IE6 and below, without gaps etc on my own site. It expands the menus in an onclick fashion -click to open, click to close. Thing is, I have state Hover etc images showing aswell. This one is with NO java, (suckerfish or 'whatever hover'). Without looking at yours, testing it etc I will dump the code here and the live example to see if it is of any use to you. Actual snippet of the html markup - pretty STANDARD ul id="sidem" class="noprint"> <li> <a href="#" class="menu1" onclick="showHide('mymenu1')">WELCOME</a> <ul id="mymenu1" class="hide"> <li><a href="/index.php" class="submenu">Index</a></li> <li><a href="/core/About-Symsys.php" class="submenu">About</a></li> <li><a href="/dl/introduction.pdf" class="submenu">Newsletter</a></li> <li><a href="#" class="submenuoff">Downloads</a></li> </ul> </li> HTML: etc etc.... CSS that works it: #sidem { font-size: 0; } #sidem .menu1{ padding-left:14px; padding-top:2px; padding-bottom:2px; margin:0; display:block; width: 136px; height: 17px; background-color:#28a3c5; font: bold 12px Arial, Helvetica, sans-serif; text-decoration: none; color:#FFF; vertical-align:bottom;/*-----Fixes ie7 gaps------*/ } #sidem a.menu1:hover{ background:#666 url(/images/menus/orangedot.gif) no-repeat; height:17px; position:relative; background-position: 0% 50%; } #sidem .hide{ display: none; } #sidem .show{ display: block; } #sidem .submenu{ display: block; padding-left:15px; padding-top:2px; padding-bottom:2px; width: 135px; height: 17px; background-color:#28a3c5; font: bold 12px Arial, Helvetica, sans-serif; text-decoration: none; color:#000; vertical-align:bottom; } .submenuoff{ background-color:#28a3c5; display: block; padding-top:2px; padding-bottom:2px; padding-left:15px; width: 135px; height: 17px; font: bold 12px Arial, Helvetica, sans-serif; text-decoration: none; color:#666; vertical-align:bottom; } #sidem a.submenu:hover{ background:#666 url(/images/menus/orangedot.gif) no-repeat; height:17px; position:relative; background-position: 0% 50%; color: #FFF; } #sidem, #sidem ul, #sidem li{ list-style-type: none; margin:0px; padding:0px; } HTML: Hopefully there is something that may sort your image problem - best to work off working models I think - not just theory because in a lot of theory/tutorial fashioned 'help' It doesnt usually work for purpose. If you're wanting hovers etc to work in IE6 and further ancient (and shouldnt be supported) browsers then yes you will probably need a JS addon aswell..... but not needed for onlock fashion as proved. see live menu on symsysit.com
No javascript? And you will need either JS or the .htc hack for IE6 to work, no matter which way you go
Goodness... I tried all of the above and my menu still doesn't function. Maybe there is something wrong with my coding...??? Anyone wanna take a look? HTML: <div id="navMenu" class="noprint"> <ul> <li class="bgimg"><a class="b4sub" onclick="showHide('submenu1');">Home Page</a> <ul id="submenu1" class="hide"> <li class="submenu"><a href="special.html">Monthly Special</a></li> <li class="submenu"><a href="faq.html">FAQ</a></li> </ul> </li> <li class="bgimg"><a class="b4sub" onclick="showHide('submenu2');">Services & Prices</a> <ul id="submenu2" class="hide"> <li class="submenu"><a href="webdev.html">Website Development</a></li> <li class="submenu"><a href="design.html">Layouts / Designs / Logos</a></li> <li class="submenu"><a href="advert.html">Business Cards / Panflets</a></li> </ul> </li> <li class="bgimg"><a class="b4sub" onclick="showHide('submenu3');">Customers</a> <ul id="submenu3" class="hide"> <li class="submenu"><a href="pastproj.html">Past Projects</a></li> <li class="submenu"><a href="comments.html">Comments</a></li> </ul> </li> <li class="bgimg"><a class="b4sub" onclick="showHide('submenu4');">To Apply</a> <ul id="submenu4" class="hide"> <li class="submenu"><a href="fan.html">For a Fan Site</a></li> <li class="submenu"><a href="pers.html">Personnal Site</a></li> <li class="submenu"><a href="biz.html">Business Website</a></li> </ul> </li> <li class="bgimg"><a class="b4sub" onclick="showHide('submenu5');">Contact Us</a> <ul id="submenu5" class="hide"> <li class="submenu"><a href="address.html">Phone & Address</a></li> <li class="submenu"><a href="email.html">By Email</a></li> </ul> </li> </ul> </div> Code (markup): CSS: #navMenu { font-size: 0; width: 175px; } /* menu */ #navMenu li a.b4sub { text-decoration: none; color: #ccccff; } #navMenu li.bgimg { width: 175px; height: 50px; font-family: Arial; font-size: 15px; color: #ccccff; font-weight: bold; font-variant: small-caps; text-align: center; margin-left: auto; margin-right: auto; padding-top: 16px; margin-top: -10; margin-bottom: -10; background-image: url(/img/bgbuttons.gif); background-repeat: no-repeat; } #navMenu li a.b4sub:hover { font-family: Arial; font-size: 15px; color: purple; font-weight: bold; font-variant: small-caps; text-decoration: none; } #navMenu li a.b4sub:active { font-family: Arial; font-size: 15px; color: purple; font-weight: bold; font-variant: small-caps; text-decoration: none; } #navMenu li a.b4sub:visited { text-decoration: none; color: pink; } /* subMenu */ #navMenu .submenu { display: block; padding-left: 5px; padding-top: 2px; padding bottom: 2px; width: 170px; height: 15px; font-family: Century Gothic; text-decoration: none; text-align: left; font-size: 12px; font-weight: normal; color: black; font-variant: normal; vertical-align: middle; position: relative; } #navMenu .submenuoff { background-color: white; display: block; padding-top:2px; padding-bottom:2px; padding-left:15px; width: 170px; height: 15px; text-decoration: none; vertical-align: middle; } #navMenu .hide { display: none; } #navMenu .show { display: block; } #navMenu a.submenu:hover { color: black; font-weight: bold; text-decoration: underline; } #navMenu a.submenu:active { color: black; font-weight: bold; text-decoration: underline; } #navMenu a.submenu:visited { color: black; font-weight: normal; text-decoration: line-through; } #navMenu, #navMenu ul, #navMenu li{ list-style-type: none; margin:0px; padding:0px; } Code (markup): If I absolutely have to use javascript, it would be nice to be directed step by step cuz I have no idea how to use it in the least. THX!
http://htmldog.com/articles/suckerfish/dropdowns/ Just copy+paste the code and it'll work. It has explanations as you go along to make it easier to understand.