CSS菜单悬停在Wordpress网站 [英] CSS Menu Hover in a Wordpress site

问题描述

我有一个在第601行，这是你的问题：width：24％（从您的css中删除此行）

  #access li：last-of-type，li＃ -item-31 {
 border-right：none！important; 
 width：24％！important; 
 background-image：none; 
} 
 
 #access li：hover：last-of-type，li＃menu-item-31 {
 border-right：none！important; 
 width：24％！important; 
 background-image：none; 
} 
  

EDIT： b

添加到您的css：

 ＃menu-item-31 a {
 width ：100％; 
} 
  

I have a site where I'm trying to fix the hover menu, which you can see doesn't hovers correctly and rollover's the border of each menu. as well as the last menu "CONTACT" when hovered doesn't fits the whole space or we can say it doesn't roll over with full space when hovered.

Image of the problem :

How to solve this?

解决方案

Hi ther is your new part of css

#access {
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 90%;
margin-left: 40px;
height: 55px;
border-radius: 8px;
}

#access ul {
font-size: 21px;
list-style: none;
margin: 0 0 0 -0.5em;
padding-left: 0;
border-radius: 8px;
text-shadow: 1px 1px #000;
padding: 0;
height: 55px;
display: block;
width: 100%;
margin: 0;
background-image: url('background-image.png');
}
#access li {
float: left;
position: relative;
border-style: solid;
width: 25% !important;
background-image: url('border-left-image.png');
background-position: right;
background-repeat: no-repeat;
display: block;
}

In http://aaron.wordpresstiger.com/wp-content/themes/custom_theme/style.css on line 601 that is your problem: width: 24% (remove this line from your css)

#access li:last-of-type, li#menu-item-31{
    border-right: none !important;
    width:24% !important;
    background-image:none;
}

#access li:hover:last-of-type, li#menu-item-31{
    border-right: none !important;
    width:24% !important;
    background-image:none;
}

EDIT:

Add to your css:

#menu-item-31 a {
    width: 100%;
}

这篇关于CSS菜单悬停在Wordpress网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！