I'm using csshover.htc to create a drop down menu, however I want the drop down part of the menus to have a larger width area to fit longer links in. Currently the top level menu items have a width of 97px, and the drop downs are using the same width - just need to know which element of the css to amend to give more room to the drop down items!
Here is the css:
and here's a link to see what I'm trying to amend: http://dyffryntraining.org.uk/index-new.phpCode:#menu { float: none; } #menu ul { list-style: none; margin: 0; padding: 0; width: 97px; float: left; line-height: 32px; } #menu a, #menu h3 { display: block; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: small; border-right-width: 1px; border-right-style: solid; border-right-color: #FFFFFF; font-weight: normal; background-image: url(images/menubkgd-mid.gif); background-repeat: repeat-x; } #menu h3 { color: #fff!important; text-align: center; } #menu a { color: #FFFFFF!important; text-decoration: none; } #menu a:focus, #menu a:hover { color: #FFFFFF!important; background-image: url(/images/menu-on.jpg); background-repeat: repeat-x; } #menu li { position: relative; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } #menu ul ul { position: absolute; z-index: 500; } div#menu ul ul { display: none; } div#menu ul li:focus, div#menu ul li:hover ul { display: block; } div#menu ul ul, div#menu ul li:focus, div#menu ul li:hover ul ul, div#menu ul ul li:focus, div#menu ul ul li:hover ul ul { display: none; } div#menu ul li:focus, div#menu ul li:hover ul, div#menu ul ul li:focus, div#menu ul ul li:hover ul, div#menu ul ul ul li:focus, div#menu ul ul li:hover ul { display: block; } body { behavior: url(/csshover.htc); }


Reply With Quote

Bookmarks