html drop down issues

Question

ok so here goes. Im working on expanding my html, css, and javascript knowledge. To do this i began writing a few basic website designs (on a live server, but all made up and fake). On my most recent one, I've decided to go for dropdown menu's. To space this all properly i decided to go with a table element, and use some very basic (which is all i know right now) javascript. I am currently using a .dropdown and a .dropdown:hover to make my menus work. However since i used the table element, each time i "dropdown" my menu on my test page, the other menus titles resize to the size of the dropdown window. Any ideas how to combat this? heres my code....

CSS

    .dropdown ul {
        display: none
    }
    .dropdown:hover ul {
        display: block;
        background-color: white;
    }
    body {
        margin: 0;
        padding: 0;
        background: -moz-linear-gradient(AliceBlue, White);
        background: -webkit-linear-gradient(AliceBlue, White);
        background: linear-gradient(AliceBlue, White);
    }
    table {
        align: center;
        font-family: cursive;
        font-decoration: underline;
    }
    td {
        border: solid 1px Lavender;
        padding: 4px;
        margin-left: 6px;
        margin-right: 6px;
        cell-spacing: 6px;
    }
    h1 {
        font-size: 14px;
    }

HTML

<div style="text-align: center">
    <img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
</div>
<table>
    <td class="dropdown">
        <h1>
        Search By Department
        <ul>
        <li><a href="FILLER">Computers and Laptops</a>
        <li><a href="FILLER">Computer Components</a>
        <li><a href="FILLER">Office Supplies</a>
        <li><a href="FILLER">Phones and PDAs</a>
        <li><a href="FILLER">Speakers and Audio</a>
        <li><a href="FILLER">Tablets and Ipads</a>
        </h1>
    </td>
    <td class="dropdown">
        <h1>
        Search by Company
        <ul>
        <li><a href="FILLER">ACER</a></li>
        <li><a href="FILLER">AMD</a></li>
        <li><a href="FILLER">APPLE</a></li>
        <li><a href="FILLER">BELKIN</a></li>
        <li><a href="FILLER">BOSE</a></li>
        <li><a href="FILLER">COBY</a></li>
        <li><a href="FILLER">DELL</a></li>
        <li><a href="FILLER">HP</a></li>
        <li><a href="FILLER">HTC</a></li>
        <li><a href="FILLER">JVC</a></li>
        <li><a href="FILLER">LG</a></li>
        <li><a href="FILLER">PANASONIC</a></li>
        <li><a href="FILLER">SAMSUNG</a></li>
        <li><a href="FILLER">SONY</a></li>
        </h1>
    </td>

`.dropdown ul { position:absolute; }` However, I wouldnt recommend doing anything absolute or relative in table elements, it causes problems on some browsers. — gskema, Jul 14 '14 at 18:16
Read up on this: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html It's nothing to worry about as you start up but something to try to get used to down the road. — BuddhistBeast, Jul 14 '14 at 18:19
Created a [fiddle](http://jsfiddle.net/rsHk4/) for you. What do you want to achieve? — A1rPun, Jul 14 '14 at 18:19
Bluntly: Get rid of the tables. Google for a method to create a menu using css and you'll find some easy ones. They'll use the list method (ul and li), which is set up in a way that will overlap the rest of the html page. Your method (using the table) will resize each table field. and keep everything on the same 'level', which will resize your html page every time you're using the menu... — Malachi, Jul 14 '14 at 18:20
You have errors in your html; correct those first. See the W3C validator at http://validator.w3.org — Mr Lister, Jul 14 '14 at 18:21
thank you all for the help! theres so many great options here! and too those of you who actually fully rewrote it for me.... damn you fast!!! lol All of these answers will help me throughout my learning. — L8NIT3TR0UBL3, Jul 14 '14 at 18:35
Here is a pretty good, basic example to follow: http://jsfiddle.net/eyelyn/4TmDu/ — BuddhistBeast, Jul 14 '14 at 18:41

score 5 · Answer 1 · answered Jul 14 '14 at 18:21

You seem to have guessed it already: don't use table, besides being semantically incorrect (<table> is meant for tables with data) it gives you all kinds of other issues because of their default styling.

Use a straightforward (embedded) ul and position the sub menus absolute, make sure to make the top level menu items (li) position: relative; and display: inline-block; and it should be pretty straightforward from there.

score 2 · Answer 2 · answered Jul 14 '14 at 18:19

2

One way to accomplish this is in you td {} style give a specific height such as 'height: 50px' and the float them 'float: left'. might not be the best option but it seems to accomplish it.

answered Jul 14 '14 at 18:19

DasBeasto

2,082
5
25
65

thank you for the response, i will give it a try immediately. i assume without using a table i would div and float? – L8NIT3TR0UBL3 Jul 14 '14 at 18:21
1

Here is an example I just fished from the internet for you... It will give you an idea of how to use a div/list system for your navigation bar: http://jsfiddle.net/stsZn/10/ – BuddhistBeast Jul 14 '14 at 18:27
^^His answer is pretty much what you should be doing without tables (which is the correct way). My solution was just a work around for the exact situation. – DasBeasto Jul 14 '14 at 18:31

score -1 · Accepted Answer · answered Jul 14 '14 at 18:29

If you wish to use plain javascript. That should work fine.

<html>
<head>    
    <style type="text/css">


    body {
            margin: 0;
            padding: 0;
            background: -moz-linear-gradient(AliceBlue, White);
            background: -webkit-linear-gradient(AliceBlue, White);
            background: linear-gradient(AliceBlue, White);
        }

    table {
            align: center;
            font-family: cursive;
            font-decoration: underline;
        }

    td {
        border: solid 1px Lavender;
        padding: 4px;
        margin-left: 6px;
        margin-right: 6px;
        cell-spacing: 6px;
        }

    h1 {
        font-size: 14px;
        }   
.dd1,.dd2{display:none;}

    </style>

    <title>Discount Electronics</title>

</head>

<body>

    <div style="text-align: center">
    <img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
    </div>

    <table>
<tr>
    <td onmouseover="fun('dd1')">    Search By Department</td>

    <td  onmouseover="fun('dd2')">    Search by Company</td>
</tr>
<tr><td>
<div class='dd1 dropdown'>
<h1>

    <ul>
    <li><a href="FILLER">Computers and Laptops</a>
    <li><a href="FILLER">Computer Components</a>
    <li><a href="FILLER">Office Supplies</a>
    <li><a href="FILLER">Phones and PDAs</a>
    <li><a href="FILLER">Speakers and Audio</a>
    <li><a href="FILLER">Tablets and Ipads</a>
    </h1>
</div>
</td>
<td>
<div class='dd2 dropdown'>
<h1>

    <ul>
    <li><a href="FILLER">ACER</a></li>
    <li><a href="FILLER">AMD</a></li>
    <li><a href="FILLER">APPLE</a></li>
    <li><a href="FILLER">BELKIN</a></li>
    <li><a href="FILLER">BOSE</a></li>
    <li><a href="FILLER">COBY</a></li>
    <li><a href="FILLER">DELL</a></li>
    <li><a href="FILLER">HP</a></li>
    <li><a href="FILLER">HTC</a></li>
    <li><a href="FILLER">JVC</a></li>
    <li><a href="FILLER">LG</a></li>
    <li><a href="FILLER">PANASONIC</a></li>
    <li><a href="FILLER">SAMSUNG</a></li>
    <li><a href="FILLER">SONY</a></li>
    </h1>
</div>
</td></tr>
</table>
<script type='text/javascript'>
function fun(cls){
var arr=document.getElementsByClassName('dropdown');
for(i=0;i<arr.length;i++)
{
arr[i].style.display='none';
}
document.getElementsByClassName(cls)[0].style.display='block'

}
</script>
</body>
</html>

It's 2014, we shouldn't be using tables anymore except for displaying list of data... — Jan Misker, Jul 14 '14 at 18:36
I suggest you don't use JavaScript for a simple task and stick to the use of easy CSS. — BuddhistBeast, Jul 14 '14 at 18:37
@JanMisker What, using a table for a list? That would be abuse of the table! If you want to display a list, use a list! — Mr Lister, Jul 16 '14 at 06:02
@MrLister you're right, I typed too hastily. What I meant is of course tables of data, see my answer below. — Jan Misker, Jul 17 '14 at 12:46

html drop down issues

3 Answers3