Hi everybody; I'm trying to make a pretty basic horizontal drop down menu in dreamweaver. I have Eric Meyer's css reset v2.0. The problem i have is when i start styling the <li> tags inside the <ul>, the changes appear in dreamweaver's design window, but don't appear at all inside my browsers (firefox, opera, internet explorer, chrome). I've tried of course emptying the internet caches of each browser and removing the css reset, but still no changes appear in the browsers, while they clearly appear in dreamweaver. I just can't wrap my head around this thing.
It would help if you could post some code or a link to your site. My mystic ball isn't working today.
Hi, that is drop down menu creation code use this.. <ul id="menu"> <li><a href="">Home</a></li> <li><a href="">About Us</a> <ul> <li><a href="">The Team</a></li> <li><a href="">History</a></li> <li><a href="">Vision</a></li> </ul> </li> <li><a href="">Products</a> <ul> <li><a href="">Cozy Couch</a></li> <li><a href="">Great Table</a></li> <li><a href="">Small Chair</a></li> <li><a href="">Shiny Shelf</a></li> <li><a href="">Invisible Nothing</a></li> </ul> </li> <li><a href="">Contact</a> <ul> <li><a href="">Online</a></li> <li><a href="">Right Here</a></li> <li><a href="">Somewhere Else</a></li> </ul> </li> </ul> Code (markup): Another one: <html> <head> <title>Example of HTML Menu</title> <style type="text/css" media="screen"> #horizontalmenu ul { padding:1; margin:1; list-style:none; } #horizontalmenu li { float:left; position:relative; padding-right:100; display:block; border:4px solid #CC55FF; border-style:inset; } #horizontalmenu li ul { display:none; position:absolute; } #horizontalmenu li:hover ul{ display:block;background:red; height:auto; width:8em; } #horizontalmenu li ul li{ clear:both; border-style:none;} </style> </head> <body> <div id="horizontalmenu"> <ul> <li><a href="#">News</a><ul> <li><a href="#">National</a></li> <li><a href="#">International</a></li> <li><a href="#">Sport</a></li> <li><a href="#">Hollybood</a></li> </ul></li><li><a href="#">Technology</a> <ul> <li><a href="#">IT/Software</a></li> <li><a href="#">Hardware</a></li> <li><a href="#">Iphone</a></li> <li><a href="#">Neuro-Science</a></li> </ul> </li> <li> <a href="#">Sports</a> <ul> <li><a href="#">Cricket</a></li> <li><a href="#">Tenis</a></li> <li><a href="#">Badminton</a></li> <li><a href="#">Hockey</a></li> </ul> </li> <li> <a href="#">Country</a> <ul> <li><a href="#">India</a></li> <li><a href="#">America</a></li> <li><a href="#">France</a></li> <li><a href="#">Pakistaan</a></li> </ul> </li> </ul> </div> </body> </html> Code (markup):
OUCH... Even worse, the reset that gives them a bad name. You might want to switch to something leaner. If I were to GUESS, I'd say @sarahk probably hit it on the head in that you failed to upload the accompanying CSS files to wherever you are testing it from; though on the whole that steaming pile of crap known as Dreamweaver could be working against you. I think you missed her meaning since you uploaded the code you're trying to use ... though that could help diagnose your problem too. Really you might want to do yourself a favor and pitch the fat bloated overpriced pile of nube predation known as Dreamweaver in the trash, get yourself a plain text editor to work with the code (flo's notepad2, notepad++, editPlus, etc), and test in the ACTUAL browsers instead of some goof-assed halfwit preview pane that doesn't render like the actual browsers do anyways (a laugh since it's based on actual browsers -- new versions being webkit, old versions being Presto)