Custom navigation menu

• 

  daisychainsanddreamers · Member · Jan 22, 2015 at 6:21 pm

  • Copy link
  • Add topic to favorites

  Got a bit of a complex one!

  I am working on a new design for my blog (not currently deployed) and have a nice long sheet of CSS to implement.

  I have replaced my navigation menu items with images – including the drop down menu items. However when I hover over the drop down menu and it is activated there is a large amount of black space around my new images (like in my current drop down menu), this looks very odd. How do I get rid of it?

  My new code for the nag bar/menu items looks like this. This isn’t the full code so may look a bit odd but you’ll get the jist):

  #access li {
  background:#B8DCE6;
  margin-top:10px;
  height:23px;
  width: 100px;
  }
  
  #menu-item-4572:before, #menu-item-4590:after {
  content:"";
  position:absolute;
  display:block;
  border:21px solid #B8DCE6;
  top:0.2px;
  }
  
  #menu-item-4572:before {
  left:-28.71em;
  border-right-width:0.4em;
  border-left-color:transparent;
  }
  
  #menu-item-4590:after {
  right:-28.71em;
  border-left-width:0.4em;
  border-right-color:transparent;
  top: 0.2px;
  }
  
  #menu-item-4572 a {
  text-align: left;
  text-indent: -9999px;
  background: url("https://daisychainsanddreamers.files.wordpress.com/2015/01/home200x80px.jpg") no-repeat;
  background-size: 65%;
  width: 162px;
  height: 57px;
  margin-top: -8.9px;
  margin-left: -60px;
  }
  
  #menu-item-4574 a {
  text-align: left;
  text-indent: -9999px;
  background: url("https://daisychainsanddreamers.files.wordpress.com/2015/01/about200x80px.jpg") no-repeat;
  background-size: 65%;
  width: 162px;
  height: 57px;
  margin-top: -8.9px;
  margin-left: -30px;
  }
  
  #menu-item-4590 a {
  text-align: left;
  text-indent: -9999px;
  background: url("https://daisychainsanddreamers.files.wordpress.com/2015/01/categories200x80px.jpg") no-repeat;
  background-size: 65%;
  width: 255px;
  height: 57px;
  margin-top: -8.9px;
  margin-left: -0px;
  }
  
  #menu-item-4581 a {
  text-align: left;
  text-indent: -9999px;
  background: url("https://daisychainsanddreamers.files.wordpress.com/2015/01/lifestylemenu.jpg") no-repeat;
  background-size: 50%;
  width: 164px;
  height: 57px;
  }
  
  #menu-item-4580 a {
  text-align: left;
  text-indent: -9999px;
  background: url("https://daisychainsanddreamers.files.wordpress.com/2015/01/beautymenu.jpg") no-repeat;
  background-size: 40%;
  width: 128px;
  height: 57px;
  }
  
  #menu-item-4579 a {
  text-align: left;
  text-indent: -9999px;
  background: url("https://daisychainsanddreamers.files.wordpress.com/2015/01/diymenu.jpg") no-repeat;
  background-size: 15%;
  }
  
  #menu-item-4582 a {
  text-align: left;
  text-indent: -9999px;
  background: url("https://daisychainsanddreamers.files.wordpress.com/2015/01/fashionmenu.jpg") no-repeat;
  background-size: 40%;
  }

  The blog I need help with is daisychainsanddreamers.com.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 24, 2015 at 12:26 am

  • Copy link

  Hi, is this on a test site here that I could look at or is it going to be on daisychainsanddreamers.com? If not, what theme are you using?

• 

  designsimply · Member · Feb 15, 2015 at 9:56 pm

  • Copy link

  It looks like you posted the same question in the forums a few different times and the answer was provided at https://en.forums.wordpress.com/topic/how-to-get-rid-of-black-hover-over-menu-items?replies=10#post-2230979