CODEWITHSUNDEEP
htmlcss
userORTXD97HS
userORTXD97HS

Reputation: 81

help with css menu with drop downs

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>

Upvotes: 3

Views: 164

Answers (2)

Cubed Eye
Cubed Eye

Reputation: 5631

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

Upvotes: 1

v42
v42

Reputation: 1425

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 */
}

Upvotes: 0

Related Questions