CSS/HTML dropdown navi - change height and width

XarQuid

New Member
i have this CSS code for a nav menu:\[code\]ul#css3menu_top,ul#css3menu_top ul { margin:0; list-style:none; padding:0;}ul#css3menu_top,ul#css3menu_top .submenu { background-color:#EEEEEE; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}ul#css3menu_top .submenu { visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s; -moz-box-shadow:3.5px 3.5px 5px #000000; -webkit-box-shadow:3.5px 3.5px 5px #000000; box-shadow:3.5px 3.5px 5px #000000; float:left; background-color:#EEEEEE; border-width:2px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-color:#FFF; padding:0 10px 10px;}ul#css3menu_top li:hover>.submenu { visibility:visible; opacity:1;}ul#css3menu_top li { position:relative; display:block; white-space:nowrap; font-size:0; float:left;}ul#css3menu_top li:hover { z-index:1;}ul#css3menu_top ul .submenu { z-index:2; position:absolute; left:100%; top:0;}ul#css3menu_top { font-size:0; width:100%; z-index:999; position:relative; display:inline-block; zoom:1; padding:0 0%; margin:0 0%; *display:inline;}ul#css3menu_top .column { float:left;}* html ul#css3menu_top li a{ display:inline-block;}ul#css3menu_top>li { margin:0; width:17%;}ul#css3menu_top li.toplast{ width:15%;}ul#css3menu_top a:active, ul#css3menu_top a:focus { outline-style:none;}ul#css3menu_top a{ display:block; vertical-align:middle; text-align:left; text-decoration:none; font:bold 14px Calibri; color:#EEEEEE; text-shadow:#FFF 0 0 1px; cursor:pointer; padding:6px 15px 6px 3px; background-color:#666666; background-image:url("mainbk.png"); background-repeat:repeat; background-position:0 0; border-width:0 0 0 1px; border-style:solid; border-color:#c0c0c0;}ul#css3menu_top ul li { float:none; margin:10px 0 0;}ul#css3menu_top ul a { text-align:left; padding:4px; background-color:#EEEEEE; background-image:none; border-width:0; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; font:14px Calibri; color:#666666; text-decoration:none;}ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed { background-color:#EEEEEE; color:#666666; background-position:0 100px; text-decoration:none;}ul#css3menu_top img { border:none; vertical-align:middle; margin-right:6px;}ul#css3menu_top span { display:block; overflow:visible; background-position:right center; background-repeat:no-repeat; padding-right:0px;}ul#css3menu_top ul span { padding-right:8px;}ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed { background-color:#EEEEEE; background-image:none; color:#666666; text-decoration:none;}ul#css3menu_top li.topfirst>a { padding-left: 7px; border-width:0; border-radius:4px 0 0 4px; -moz-border-radius:4px 0 0 4px; -webkit-border-radius:4px; -webkit-border-top-right-radius:0; -webkit-border-bottom-right-radius:0;}ul#css3menu_top li.toplast>a { padding-right: 7px; border-radius:0 4px 4px 0; -moz-border-radius:0 4px 4px 0; -webkit-border-radius:0; -webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px;}@media only screen and (max-width:900px),only screen and (max-device-width:900px){ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}}@media only screen and (max-width:600px),only screen and (max-device-width:600px){ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}}@media only screen and (max-width:450px),only screen and (max-device-width:450px){ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}}/*opera hack*/@media only screen and (min-width:900px){ html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top{ display:table; } html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top>li{ width:auto; float:none; display:table-cell; } html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top li.toplast{ width:auto; display:table-cell; }}\[/code\]i need a way to work out how to change the height and width of the main links, i.e: DEMO / DOWNLOAD / CONTACT linksHere is a fiddle: http://jsfiddle.net/EZh85/any ideas what i can do?
 
Back
Top