Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

CSS Menu Help WordPress

  • SOLVED

I've been unfortunate to be asked a favor from a friend and just do not have time to do this. They are working on http://webhost-solutions.net/rdc/ and the menu needs to be tabbed. It was originally an Artisteer layout (meaning it was built on top of kubrick) and I put in WP 3.0 menu.

Each top menu item is a tab and has a hover effect. Image is - http://webhost-solutions.net/rdc/wp-content/themes/Real_Deal_Blue/images/menuitem.png

The submenu is a simple drop-down.

However, I have another project that is priority and I need at the least parent (top level) menu items put in the tabs via CSS correctly.

Thanks!

Answers (1)

2011-08-12

Christianto answers:

Hello,

Please add this on your style.css

#menu-art-menu li{
margin-right:5px;
line-height:47px;
vertical-align: middle;
text-shadow: #323232 1px 1px 1px;
background:url('images/menuitem.png') no-repeat left top!important
}

#menu-art-menu li:hover{
margin-right:5px;
background:url('images/menuitem.png') no-repeat left -47px!important
}

#menu-art-menu li.current-menu-item{
margin-right:5px;
background:url('images/menuitem.png') no-repeat left -94px!important
}

#menu-art-menu li li,
#menu-art-menu li li:hover{
background-image:none!important;
}

#menu-art-menu li a{
margin-left:5px;
padding-right:10px;
color:#3798CB;
background:url('images/menuitem.png') no-repeat right top;
left:5px;
}

#menu-art-menu li a:hover,#menu-art-menu li:hover a{
margin-left:5px;
padding-right:10px;
background:url('images/menuitem.png') no-repeat right -47px;
left:5px;
}

#menu-art-menu li.current-menu-item a{
margin-left:5px;
padding-right:10px;
background:url('images/menuitem.png') no-repeat right -94px;
left:5px;
}

#menu-art-menu .sub-menu li {
height:35px;
line-height:35px;
width:180px;
border-top:1px solid #26688C;
border-bottom:1px solid #1884BA;
background-color:#2C7AA3!important
}

#menu-art-menu .sub-menu li a,
#menu-art-menu .sub-menu li a:hover{
background-image:none!important
}

#menu-art-menu .sub-menu li a{
height:35px;
line-height:35px;
vertical-align:middle;
}

I hope this is what you are looking for..