CODEWITHSUNDEEP
htmlcssdrop-down-menumenu
msb
msb

Reputation: 157

How do I keep dropdown menus the same width of top level categories with auto width

I've got a navigation menu that is made of nested ul lists like this: 

<ul id="menu">
    <li class="category top_level">
         <a href="#" class="category_name top_level_link">top level 1</a>
        <ul class="dropdown">
            <li class="item " >
                <a href="">item 1</a>
            </li>
            <li class="item ">
                <a href="">very long name of item 2</a>
            </li>
        </ul>   
    </li>
    <li class="category top_level">
        <a href="#" class="category_name top_level_link">longer top level name 2</a>
        <ul class="dropdown">
            <li class="item " >
                <a href="">very long name of item 3</a>
            </li>
            <li class="item ">
                <a href="">item 4</a>
            </li>
        </ul>   
    </li>                  
</ul>

Current css is: 

    #menu ul{list-style-type:none;}
#menu li.top_level{vertical-align:top;zoom:1;display:inline;margin:2px;padding:0 1px 0 0;}
#menu .dropdown{float:none;z-index:100;position:absolute;width:180px;height:0;overflow:hidden;-webkit-transition:height 700ms;-moz-transition:height 700ms;}
#menu .category:hover .dropdown,#menu .category:focus .dropdown{-webkit-transition:height 940ms;-moz-transition:height 940ms;}
#menu .item a,#menu .category a,#menu .category a:visited,#menu .item a:visited{-webkit-transition:background-color 940ms;-moz-transition:background-color 940ms;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1em;text-decoration:none;display:block;font-family:ColaborateLightRegular;color:#555;padding:.6em;}
#menu a.top_level_link{color:#555;background:none;padding:.4em .6em;}
#menu .dropdown a{text-align:left;}
#menu .item a:hover,#menu .category a:hover,#menu .item a:focus,#menu .category a:focus{text-decoration:none;-webkit-transition:all 0;-moz-transition:all 0;background:#d9d2d2;}
#menu .selected a{background:#d4d2d2!important;}

The top level categories and the list different lengths. I would like the dropdown items to the same width as the top level categories. The top level categories have 'width: auto' in the css. When the widths inherit to the dropdowns, they inherit width as 'auto' rather that inheriting the actual width of the top level. How can I fix this? Here's a picture of what I want versus what I have:

example

What do I need to do?

Upvotes: 3

Views: 13246

Answers (3)

Kiirani
Kiirani

Reputation: 1080

1: Format your css please.
2: That code seems to be missing the bits that actually make it work?

Now as for the answer:
General concept: you should set the child elements (.dropdown) to width:100%, and your parent elements (.top_level) should have position:relative; set.
This means that the absoute positioning of the children will be done relative to the parents (This is to do with the weirdness about how positioning interprets your wishes.), and then their width will be set to be the same as the parents' width. Yay!

Then of course, that doesn't actually work - I believe because of your display:inline on your top levels there. I've changed your parent elements to display:block;, then made them float to bring them back up next to each other again.

[You could also do this with display:inline-block; instead of the float, depending on what kind of behaviour you actually want]

See revised (indented) css:

#menu li.top_level{
  vertical-align:top;
  zoom:1;
  display:block;
  float:left;
  width:auto;
  position:relative;
  margin:2px;padding:0 1px 0;
}

#menu .dropdown{
  float:none;  
  z-index:100;
  position:absolute;
  width:100%;
  height:0;
  overflow:hidden;
  -webkit-transition:height 700ms;-moz-transition:height 700ms;
}

#menu .category:hover .dropdown,#menu .category:focus .dropdown{
  -webkit-transition:height 940ms;
  -moz-transition:height 940ms;
  height:auto;
}

I've also thrown up a demo on jsfiddle to work on this, if you want to take a look: http://jsfiddle.net/UPRAc/1/

Upvotes: 10

Damodar Bashyal
Damodar Bashyal

Reputation: 941

i guess i am getting result whatever you wanted when i do this:

add

margin:0;
padding:0;

remove

position:absolute;
width:180px;

on this: #menu .dropdown

Upvotes: 2

daniel.tosaba
daniel.tosaba

Reputation: 2563

I don't think this is possible with pure css.

I've tried inherit but it didn't work.

Upvotes: 0

Related Questions