help with css menu with drop downs

Question

I am new to css, and have tried to make this work for a while with no luck

basically i want to display a drop down when "MENU" is selected but nothing seems to happen here is my css:

#tabs {
    margin-top:-12ex;
    float:left;
    width:100%;
    font-size:100%;
    line-height:10px;
    vertical-align:top;
    margin-left:20px;
    position:static;
    }

#tabs ul {
    margin:0;
    padding:1px 1px 0 20px;
    list-style:none;
    }

#tabs li {
    display:inline;
    margin:0;
    padding:5;
    }

#tabs a {
    float:left;
    background:url("../images/tableft.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 3px;
    text-decoration:none;
    }

#tabs a span {
    float:left;
    display:block;
    background:url("../images/tabright.gif") no-repeat right top;
    padding:10px 10px 10px 10px;
    color:#FFF;
    }

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
    color:#FFF;
    }

#tabs a:hover{
    background-position:0% -42px;
    }

#tabs a:hover span {
    background-position:100% -42px;
    }

div#tabs ul ul,
div#tabs ul li:hover ul ul,
div#tabs ul ul li:hover ul ul
{display: none;}

div#tabs ul li:hover ul,
div#tabs ul ul li:hover ul,
div#tabs ul ul ul li:hover ul
{display: block;}

Here is my html

<body>
<div id="wrapper">
  <table height="860px">
   <tr>
        <td colspan="2" width="710px" height="150px">
        </td>
   </tr>
      <tr>
        <td colspan="2" width="710px" height="50px" valign="bottom">
        <div id="tabs">
      <ul>
        <li><a href="#"><span>HOME</span></a></li>
        <li><a href="#"><span>CATERING</span></a></li>
        <li><a href="#"><span>MENU</span></a></li>
         <ul>
           <li>
           <a href="#"><span>hey</span></a> //i want this to pop when hovering menu
           <li>
         </ul>
        <li><a href="#"><span>RESERVATIONS</span></a></li>
        <li><a href="#"><span>EVENTS</span></a></li>
        <li><a href="#"><span>ABOUT US</span></a></li>
        <li><a href="#"><span>CONTACT US</span></a></li>
     </ul>
       </div>

        </td>
   </tr>
</table>
</body>

Cubed Eye · Accepted Answer · 2011-09-12 02:52:36Z

1

Well once I fixed the few typos. I realised that you hadn't put the sub menu inside the <li> of the MENU.

here's the new list html, the css is fine for now:

<div id="tabs">
    <ul>
        <li><a href="#"><span>HOME</span></a></li>
        <li><a href="#"><span>CATERING</span></a></li>
        <li><a href="#"><span>MENU</span></a>
            <ul>
                <li>
                    <a href="#"><span>hey</span></a>
                </li>
            </ul>
        </li>
        <li><a href="#"><span>RESERVATIONS</span></a></li>
        <li><a href="#"><span>EVENTS</span></a></li>
        <li><a href="#"><span>ABOUT US</span></a></li>
        <li><a href="#"><span>CONTACT US</span></a></li>
    </ul>
</div>

Edit:

You need to make the inside <ul> appear absolute in the css, something like this:

#tabs {
    width:100%;
}
    #tabs>ul>li {   
        display:block; position:relative;
            float:left;
        list-style:none outside;
            margin:0 10px;
    }
        #tabs>ul>li:hover ul{display:block}
        #tabs>ul>li>a{
                display:block;
        }
        #tabs>ul>li ul{
            position:absolute; display:none;
            list-style:none;    
        }

edited Sep 12, 2011 at 2:52

answered Sep 12, 2011 at 2:05

Cubed Eye

5,6314 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

userORTXD97HS Over a year ago

Hi thank you, the hey comes out between the MENU and RESERVATIONS menu item.. how can i make it display below.. like a drop down?

userORTXD97HS Over a year ago

Great this is working nice, just one last question.. the hey is showing right on top of the MENU now, is there a way to move it a bit below? like margin-top or something.. i tried margin top in the #tabs>ul>li but it moves the whole menu down

Cubed Eye Over a year ago

@userORTXD97HS yeah you need to use #tabs>ul>li>ul instead, then margin-top should work

userORTXD97HS Over a year ago

Great,, thank you very much... before you go.. (and i am giving you the answer now, i am sorry so many questions) the drop down comes out well on hover.. but the width of the li's is unequal.. is there a way to make them uniform?

Cubed Eye Over a year ago

@userORTXD97HS which ones? For the main ones just add width property to #tabs>ul>li if its the submenu you can use #tabs>ul>li>ul>li.

|

v42 · Accepted Answer · 2011-09-12 02:28:50Z

0

You need to put that secondary list inside your menu, like this:

<li>
    <a href="#"><span>MENU</span></a></li>
    <ul>
       <li>
           <a href="#"><span>hey</span></a>
       </li>
    </ul>
</li>

Also, remember to use the css selector > when you want to put rules on the first list only:

#tabs>ul>li{
    /* css */
}

answered Sep 12, 2011 at 2:28

v42

1,42514 silver badges23 bronze badges

1 Comment

userORTXD97HS Over a year ago

hi thank you, its comming out next to MENU, is there anyway i can make it display below?

Collectives™ on Stack Overflow

help with css menu with drop downs

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related