Jump to content

CSS Drop Down Menus

Guest itrobb

By Guest itrobb
in Skinning

 Share

Recommended Posts

Guest itrobb

Guest itrobb

Posted
Posted

Here is my CSS code for the menu:

ul#css3menu,ul#css3menu ul{
       margin:0;list-style:none;padding:0;background-color:#FFFFFF;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
ul#css3menu ul{
       display:none;position:absolute;left:0;top:100%;-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;padding:0 10px 10px;background-color:#05A2EA;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-color:#d4d4d4;}
ul#css3menu li:hover>*{
       display:block;}
ul#css3menu li:hover{
       position:relative;}
ul#css3menu ul ul{
       position:absolute;left:100%;top:0;}
ul#css3menu{
       display:block;font-size:0;float:left;}
ul#css3menu li{
       display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
       margin:0;}
ul#css3menu a:active, ul#css3menu a:focus{
       outline-style:none;}
ul#css3menu a{
       display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 13px Verdana;color:#FFFFFF;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#05A2EA;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu ul li{
       float:none;margin:10px 0 0;}
ul#css3menu ul a{
       text-align:left;padding:4px;background-color:#05A2EA;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Verdana;color:#000000;text-decoration:none;}
ul#css3menu li:hover>a{
       background-color:#05A2EA;border-color:#C0C0C0;border-style:solid;font:bold 13px Verdana;color:#FFFFFF;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-position:0 100px;}
ul#css3menu img{
       border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu img.over{
       display:none;}
ul#css3menu li:hover > a img.def{
       display:none;}
ul#css3menu li:hover > a img.over{
       display:inline;}
ul#css3menu span{
       display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu ul li:hover>a{
       background-color:#05A2EA;background-image:none;font:14px Verdana;color:#EFEFEF;text-decoration:none;}
ul#css3menu li.topfirst>a{
       height:21px;line-height:21px;border-radius:0px 0 0 0px;-moz-border-radius:0px 0 0 0px;-webkit-border-radius:0px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu li.topfirst:hover>a{
       line-height:21px;}
ul#css3menu li.topmenu>a{
       height:21px;line-height:21px;}
ul#css3menu li.topmenu:hover>a{
       line-height:21px;}
ul#css3menu li.toplast>a{
       height:21px;line-height:21px;border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
ul#css3menu li.toplast:hover>a{
       line-height:21px;}

As you'll see on my site, The navbar doesn't fill the gap. I have an image called 'navbar_bg.png', which is the correct size for that gap. I want the same navbar, but with the background image to fill the space. Anyone?

Link to comment
Share on other sites
Tom Newbie

Tom

Posted
Posted

Try this:

ul#css3menu{
       background-color:#05A2EA;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-repeat:repeat;background-position:0 0;
}

Link to comment
Share on other sites
Guest itrobb

Guest itrobb

Posted
Posted

Try this:

ul#css3menu{
       background-color:#05A2EA;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-repeat:repeat;background-position:0 0;
}

Where? So far I've got this...

Link to comment
Share on other sites
Tom Newbie

Tom

Posted
Posted 
ul#css3menu,ul#css3menu ul{
       margin:0;list-style:none;padding:0;background-color:#FFFFFF;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
ul#css3menu ul{
       display:none;position:absolute;left:0;top:100%;-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;padding:0 10px 10px;background-color:#05A2EA;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-color:#d4d4d4;}
ul#css3menu li:hover>*{
       display:block;}
ul#css3menu li:hover{
       position:relative;}
ul#css3menu ul ul{
       position:absolute;left:100%;top:0;}
ul#css3menu{
       display:block;font-size:0;float:left;background-color:#05A2EA;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-repeat:repeat;background-position:0 0;
}
ul#css3menu li{
       display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
       margin:0;}
ul#css3menu a:active, ul#css3menu a:focus{
       outline-style:none;}
ul#css3menu a{
       display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 13px Verdana;color:#FFFFFF;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#05A2EA;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu ul li{
       float:none;margin:10px 0 0;}
ul#css3menu ul a{
       text-align:left;padding:4px;background-color:#05A2EA;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Verdana;color:#000000;text-decoration:none;}
ul#css3menu li:hover>a{
       background-color:#05A2EA;border-color:#C0C0C0;border-style:solid;font:bold 13px Verdana;color:#FFFFFF;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-position:0 100px;}
ul#css3menu img{
       border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu img.over{
       display:none;}
ul#css3menu li:hover > a img.def{
       display:none;}
ul#css3menu li:hover > a img.over{
       display:inline;}
ul#css3menu span{
       display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu ul li:hover>a{
       background-color:#05A2EA;background-image:none;font:14px Verdana;color:#EFEFEF;text-decoration:none;}
ul#css3menu li.topfirst>a{
       height:21px;line-height:21px;border-radius:0px 0 0 0px;-moz-border-radius:0px 0 0 0px;-webkit-border-radius:0px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu li.topfirst:hover>a{
       line-height:21px;}
ul#css3menu li.topmenu>a{
       height:21px;line-height:21px;}
ul#css3menu li.topmenu:hover>a{
       line-height:21px;}
ul#css3menu li.toplast>a{
       height:21px;line-height:21px;border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
ul#css3menu li.toplast:hover>a{
       line-height:21px;}

Link to comment
Share on other sites
Guest itrobb

Guest itrobb

Posted
Posted 

ul#css3menu,ul#css3menu ul{
       margin:0;list-style:none;padding:0;background-color:#FFFFFF;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
ul#css3menu ul{
       display:none;position:absolute;left:0;top:100%;-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;padding:0 10px 10px;background-color:#05A2EA;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-color:#d4d4d4;}
ul#css3menu li:hover>*{
       display:block;}
ul#css3menu li:hover{
       position:relative;}
ul#css3menu ul ul{
       position:absolute;left:100%;top:0;}
ul#css3menu{
       display:block;font-size:0;float:left;background-color:#05A2EA;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-repeat:repeat;background-position:0 0;
}
ul#css3menu li{
       display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
       margin:0;}
ul#css3menu a:active, ul#css3menu a:focus{
       outline-style:none;}
ul#css3menu a{
       display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 13px Verdana;color:#FFFFFF;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#05A2EA;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu ul li{
       float:none;margin:10px 0 0;}
ul#css3menu ul a{
       text-align:left;padding:4px;background-color:#05A2EA;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Verdana;color:#000000;text-decoration:none;}
ul#css3menu li:hover>a{
       background-color:#05A2EA;border-color:#C0C0C0;border-style:solid;font:bold 13px Verdana;color:#FFFFFF;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-position:0 100px;}
ul#css3menu img{
       border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu img.over{
       display:none;}
ul#css3menu li:hover > a img.def{
       display:none;}
ul#css3menu li:hover > a img.over{
       display:inline;}
ul#css3menu span{
       display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu ul li:hover>a{
       background-color:#05A2EA;background-image:none;font:14px Verdana;color:#EFEFEF;text-decoration:none;}
ul#css3menu li.topfirst>a{
       height:21px;line-height:21px;border-radius:0px 0 0 0px;-moz-border-radius:0px 0 0 0px;-webkit-border-radius:0px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu li.topfirst:hover>a{
       line-height:21px;}
ul#css3menu li.topmenu>a{
       height:21px;line-height:21px;}
ul#css3menu li.topmenu:hover>a{
       line-height:21px;}
ul#css3menu li.toplast>a{
       height:21px;line-height:21px;border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
ul#css3menu li.toplast:hover>a{
       line-height:21px;}

Wow, Thanks! :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...