Home/ Questions/Q 6550819
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:15:44+00:00

I am new to css, and have tried to make this work for a

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;    
        }
    • 0