How do I increase the width of the drop down menu

How do I increase the width of the topmenu’s drop down submenu (hot_ecommerce template)?

Administration
-Extensions->Template Manager
-Then click on template
-Go to Edit CSS
-Select Layout.css and click Edit

To increase height of item,add thin entity:
#topmenu_pad ul li ul li
{
padding: 5px;
}

or

To increase height of list that drops down:
#topmenu_pad ul li ul
{
height: 300px;
}


Read values are examples you should change that to get what you desire.

Thanks for the help but I probably did not explain what I want correctly.

My question was how to change the width (or length if you prefer) of the drop down menu column. Not the height of each drop down menu line.

If you send me some new code to add to it, please be specific about where to enter it.

This is the CSS code for the top menu:

/* top menu */

#nav,#nav ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:absolute;
z-index:120;
}

#nav ul {
display:none;
}

#nav a {
display:block;
padding:0px 8px;
margin:0;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:17px;
text-transform:uppercase;
}

#nav > li.active {
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav > li:hover {
-moz-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav li:hover ul li a {
margin:0px 5px;
text-transform:none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

#nav li:hover ul {
-moz-border-radius:0 6px 6px 6px;
-webkit-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
}

#nav li:hover ul li a:hover {
margin:0px 5px;
}

#nav li {
float:left;
margin:0 5px;
position:relative;
line-height:27px;
}

#nav li ul li,#nav li ul li ul {
margin:0;
padding:0;
float:none;
cursor:pointer;
}

#nav li ul, #nav li ul ul {
padding-bottom:10px !important;
}

#nav li ul a {
width:145px;
line-height:normal;
padding:5px 10px;
border-bottom:1px solid #6e829a;
}

#nav li ul ul {
left:170px;
top:0;
margin:0;
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul {
display:none;
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul {
display:block;
}

#nav ul ul {
top:0;
z-index:200;
}

Hi,
try this - added property is marked red (change value to what you need).

/* top menu */

#nav,#nav ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:absolute;
z-index:120;
}

#nav ul {
display:none;
}

#nav a {
display:block;
padding:0px 8px;
margin:0;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:17px;
text-transform:uppercase;
}

#nav > li.active {
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav > li:hover {
-moz-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav li:hover ul li a {
margin:0px 5px;
text-transform:none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

#nav li:hover ul {
-moz-border-radius:0 6px 6px 6px;
-webkit-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
width:400px;
}

#nav li:hover ul li a:hover {
margin:0px 5px;
}

#nav li {
float:left;
margin:0 5px;
position:relative;
line-height:27px;
}

#nav li ul li,#nav li ul li ul {
margin:0;
padding:0;
float:none;
cursor:pointer;
}

#nav li ul, #nav li ul ul {
padding-bottom:10px !important;
}

#nav li ul a {
width:145px;
line-height:normal;
padding:5px 10px;
border-bottom:1px solid #6e829a;
}

#nav li ul ul {
left:170px;
top:0;
margin:0;
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul {
display:none;
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul {
display:block;
}

#nav ul ul {
top:0;
z-index:200;
}

thanks for the help but there is just one more problem.

The column width increased but the extra width cannot take text nor is underlined – check attachment. Can we also fix this?

also how can i center my logo on the middle of the page (i have to change the margins or something?)?

thanks again

Try by adding this to the bottom of that css file:

#nav li ul li {
width:100%;
}