Implementation quality of my afterthought jQuery drop-down menu?

I have a web layout that I created and then later wanted to add a dropdown menu to it. I found that my html was not quite optimum for that, so I wrote some jQuery that is now working quite nicely but I need this to be critiqued to see if and where I could have changed some things here.

My dropdown menu is the class "drop" which is an absolutely positioned div nested within the div main_right. I felt this was the best place to put it because I could simply position it right under the li item above it and hopefully avoid too many cross browser display issues. It is set to display:none via CSS.

HTML:

      
          1
          2
          3
          4
          5
      
  
  
        
        
        
          who
          what
          when
          where
        
        
        
        
        
            
                
                  this
                  that
                  then
                  things
                
            
        
        
  

And now the CSS just for my menu, to kind of justify why I went the route I did:

```
#menu{
height:50px;
width:100%;
background:url(example);
background-repeat:repeat-x;
color:#FFF;
}
#menu ul{
display:table;
table-layout:fixed;
padding:0;
margin:0 auto;
width:980px;
height:50px;
}
#menu ul li{
border-right:1px solid #CCCCCC;
display:table-cell;
float:none;
list-style:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
line-height:50px;
text-align:center;
}
#menu ul li a{
display:block;
width:100%;
height:100%;
}
#menu ul li:first-child{
border-left:1px solid #CCCCCC;
}
#menu ul li:hover{
cursor:pointer;
background-image:url(example);
}
#menu ul li:first-child:hover{
text-decoration:underline;
}
#menu ul li:nth-child(2){
width:177px;
}
#menu ul li:nth-child(3){
width:168px;
}
#menu ul li:nth-child(4){
width:180px;
}
#menu ul li:nth-child(5){

I've made a JS Bin from your posted code.

Initialization

When the pages is loaded, the dropdown menu starts in its expanded state. Is that what you want?

Usability, Positioning, and Semantic HTML

It's impossible to move from the "5" menu item to click on one of the items in the dropdown menu before it collapses. Perhaps it could work if the dropdown were positioned directly underneath "5", but you shouldn't rely on such fragile coincidences. The underlying problem is that semantically, the "this-that-then-things" dropdown menu should be a child of item "5" in the HTML.

  
    1
    2
    3
    4
    5
      
        this
        that
        then
        things
      
    
  

CSS

You've hard-coded the width of menu items "2", "3", "4", "5" individually. If you need different widths, it would be easier to maintain if you specified the padding, so that each item's width scaled automatically according to the size of its content.

StackExchange Code Review Q#29052, answer score: 7