CODEWITHSUNDEEP
htmlcss
userORTXD97HS
userORTXD97HS

Reputation: 81

css not setting the sub-menu line item to a specific width

I am trying to make the submenu look uniform, something like thi

| MENU |
|SUB MENU 1|
|SUB 2     |
|ANOTHER   |

the problem is that it is displaying like this

| MENU |
|SUB MENU 1|
|SUB 2|
|ANOTHER|

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>li {   
        display:block; 
        position:relative;
        float:left;
        list-style:none;
    }

 div#tabs>ul>li ul{
            position:absolute; display:none;
            list-style:none;    
        }

 div#tabs>ul>li>a{
                display:block;
        }

  div#tabs>ul>li:hover ul{
      display:block;  
      z-index:500; 
      width:50%;
      margin:28px 0px 0px -20px;    
      width:100%;
      }

Here is my HTML

<div id="tabs">
    <ul>
        <li><a href="#"><span>HOME</span></a></li>
        <li><a href="#"><span>MENU</span></a>
            <ul>
                <li><a href="#"><span>Desserts</span></a></li>
                <li><a href="#"><span>Meats</span></a></li>          
            </ul>
        </li>
        <li><a href="#"><span>ABOUT US</span></a></li>
        <li><a href="#"><span>CONTACT US</span></a></li>
    </ul>
</div>

Upvotes: 2

Views: 889

Answers (3)

mohana rao
mohana rao

Reputation: 429

Use "min-width" for li. which li is biggest, then you use that width as a min-width. Then menu's are look similar width.

Upvotes: 2

Cubed Eye
Cubed Eye

Reputation: 5631

just add width to this

#tabs a {
    width:100%;
}

Upvotes: 1

Josh Allen
Josh Allen

Reputation: 997

You don't need to have spans inside the list items (they're inline and serve no purpose in this scenario).

Also, to set them to a specific uniform width, you need to set the submenu to a specific width, like so:

div#tabs ul li ul a{
    display:block;
    width: 225px;
}

Keep in mind that you don't need so many direct child selectors (>). This will throw IE6 off. While there is a specific time to use these selectors, your CSS is specific enough to leave most of them out.

Upvotes: 0

Related Questions