Jump to content

Table Drop-down Menu Help


Galen
 Share

Recommended Posts

I thought I had this one figured out but ran into a new problem. I'm trying to get a CSS drop-down using tables, which I thought would make it easier to get the borders implemented. I've tried two techniques:1. Using diplay: none / block. This works, but in any browser but IE the revealed TDs are only the length of the text, not the entire row. I might be able to fix this cosmetically but the whole row is no longer clickable, which is what the .navlink class is meant for. Putting width: 100% for the td has no effect. Using pixels does work, but I want to keep the width of the bars relative.2. Using visibility: hidden / visible (this was my fix). This looks fine on all browsers, but the hover works for the invisible portion as well. This is presumbably because I have hover on the table instead of the first row, but when I get the first row a class name and hover on that (note "h2" for the first menu", it doesn't work. I'm really not sure why that is.would appreciate any help, I suppose I could always scrap the table and trying again with ULs, but hoping to avoid that.thanks<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><style type="text/css" media="all">body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: auto;}#navbar { width: 100%; height: 30px; font-size: 16px !important; border: thin blue; background-color: #497FBF; position: relative; z-index: 1;}.menu { background-color: #497FBF;/* visibility: hidden;*/ display: none;}.heading { text-align: center; float: left; width: 15%; border: none;}.heading tr td { padding: 4px 0px 5px 0px;}.heading tr td{ border-right: 1px solid blue; border-bottom: 1px solid blue;}.menu td{ border-left: 1px solid blue; border-top: 0; border-right: 1px solid blue; border-bottom: 1px solid blue;}.heading:hover .menu { /* visibility: visible; */ display: block;}.heading:hover { background-color: #00B5EF;}.navlink { display: block; width: 100%; color: black; text-decoration: none;}</style></head><body><div id="navbar"><table class="heading" cellspacing="0"><tr class="h2"><td>Screen Size</td></tr><tr class="menu"><td><a class="navlink" href="#" >Small</a></td></tr><tr class="menu"><td><a class="navlink" href="#" >Medium</a></td></tr><tr class="menu"><td><a class="navlink" href="#" >Large</a></td></tr></table><table class="heading" cellspacing="0"><tr><td>Font Size</td></tr><tr class="menu"><td><a class="navlink" href="#">Small</a></td></tr><tr class="menu"><td><a class="navlink" href="#">Medium</a></td></tr><tr class="menu"><td><a class="navlink" href="#">Large</a></td></tr><tr class="menu"><td><a class="navlink" href="#">X-Large</a></td></tr></table></div></body></html>

Link to comment
Share on other sites

That's because tables, table rows and table cells aren't displayed as blocks like other elements are.When using visibility: hidden, the element is still there takes up space, and you can still hover over it even if it can't be seen.

Edited by Ingolme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...