2013-05-21 100 views
0

我有一个site我试图解决悬停菜单,你可以看到不正确的悬停和翻转的每个菜单的边界。以及最后一个菜单“CONTACT”在盘旋时不适合整个空间,或者我们可以说它在盘旋时没有翻转满的空间。CSS菜单悬停在WordPress的网站

问题的图片:

http://i.stack.imgur.com/uP8US.png

如何解决这个问题?

+0

你能告诉我们的代码?看起来像它有一个固定的宽度悬停 – DiederikEEn

+0

确定的事情队友,在这里你去:http://aaron.wordpresstiger.com/wp-content/themes/custom_theme/style.css –

+0

你应该编辑你的问题来添加你的代码。 – pzin

回答

0

您好疗法是新的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; 
} 

的一部分。在http://aaron.wordpresstiger.com/wp-content/themes/custom_theme/style.css上线601是您的问题:宽度:24%(从你的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 :

加入您的css:

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

Barkek,是的,这工作。第二个问题解决了,但第一个问题仍然存在。当盘旋时它代替了菜单的右边界。我只是想菜单悬停看起来像完全像http://officialfacebooklikes.com - 我真的很欣赏你的时间和回应。谢啦! –