将下拉菜单项与其他站点菜单对齐时遇到问题

Question

我在本网站上的菜单出现问题。下面是对违规菜单的所有css编码。你可以在这里看到它。 website我想要做的就是让Futsal这个词与其他菜单对齐。

在此先感谢任何愿意花时间帮助我解决此问题的人。

PAGES NAVIGATION 
#pages { width: 922px; background-image: url(images/nav-bg.png); height: 55px; float: left; font-size: 12px; font-weight: bold; display: block; color: #FFF !important;} 

#pages ul li:hover a:link, #pages ul li:hover a:visited { background-color: #5a5a59; color: #FFF !important;} 

#pages ul { margin-top: 5px; list-style-image: none; position:relative; } 

#pages li a:link, #pages li a:visited { height:35px; background-image: url(images/nav-line.png); background-repeat: no-repeat; background-position: right; display: block; float: left; padding: 15px 20px 0px 20px; color: #FFF; font-size: 12px; font-weight: bold;} 

#pages li a:hover { background-image: url(images/nav-bg2.png); background-repeat: repeat-x; color: #FFF;} 

DROPDOWN MENU 

.nav, .nav * {margin:0; padding:0; list-style:none;} 

.nav ul { position:absolute; top:-999em; } 

.nav li { float:left; position:relative; z-index:99; font-size:12px; height: 44px !important; border: none !important;} 

.nav a { display:block;} 

.nav ul li { width: 100%;} 

.nav li:hover ul, ul.nav li.sfHover ul { left:0px; top:45px;} 

.nav li:hover li ul, .nav li.sfHover li ul { top:-999em;} 

.nav li li:hover ul, ul.nav li li.sfHover ul { left:240px; top:-5px;} 

.nav li:hover ul, .nav li li:hover ul { top: -999em; } 

.nav li li { display: block; padding: 0px; background-image: url(images/pages-bg2.png); float: left; height: auto !important;} 

.nav li:hover { height: auto !important; padding: 0px !important; margin: 0px !important;} 

.nav li li a:link, .nav li li a:visited { width: 180px; display: block; padding: 10px 30px 10px 30px !important; margin: 0px 0px 0px 0px !important; height: auto !important; color: #FFF !important; float: left; background-color: #5a5a59; background-image: none !important; } 

.nav li li a:hover { background-color: #5a5a59; color: #FFF !important; background-image: url(images/nav-bg.png) !important;} 

CURRENT PAGE 

.current_page_item a:link { color: #555555 !important; } 

.current_page_item a:hover { color: #FFFFFF !important; } 

.current_page_item { color: #555555 !important; } 



CATEGORIES NAVIGATION 

#categories { height: 37px; background-image: url(images/categories-bg.gif); width: 950px; display:none; } 

#categories ul { float: left; margin: 0px 0px 0px 0px; margin-top: 10px; height: 27px; padding-left: 10px; } 

#categories li { float: left; display: block; list-style-image: none; list-style: none; height: 27px !important; } 

#categories li:hover, #categories li.sfHover { background-color: #FFF; background-image: url(images/categories-button-right.gif); background-repeat: no-repeat; background-position: right; } 

#categories li a:link, #categories li a:visited { color: #FFF; padding-left: 10px; padding-right: 10px; display: block; height: 25px; padding-top: 2px; font-size: 11px; float: left; } 

#categories li a:hover, #categories li:hover a:link, #categories li.sfHover a { background-image: url(images/categories-button-left.gif); background-repeat: no-repeat; background-position: left; color: #585858; } 

DROPDOWN MENU 

#nav2 li { z-index: 98; } 

#nav2 li:hover ul, ul#nav2 li.sfHover ul { top:17px; left: -10px; } 

#nav2 li li a:link, #nav2 li li a:visited { color: #585858 !important; background-color: #FFF; padding: 10px 30px 10px 30px !important; } 

#nav2 li li { height: 38px !important; } 

#nav2 li li a:hover { background-color: #f4f4f4; background-image: none !important; color: #585858 !important; } 

#nav2 li li:hover ul, ul#nav2 li li.sfHover ul { left:230px !important; top:-6px !important; } 

Answer 1

首先给第二个li锚标签添加href =“”。那么做到这一点：

#navigation ul.sub-menu { 
    position: absolute; 
} 

你是压倒一切的绝对位置#pages UL {位置：相对}

编辑：

.nav li > ul { 
    display: none; 
} 
#pages ul { 
    float: right; 
} 
#navigation ul.sub-menu { 
    position: absolute; 
    top: 45px; 
} 
.nav li:hover > ul { 
    display: block; 
} 

而且不要忘了与<a href="">Futsal</a>取代<a>Futsal</a>，这是它走到最前面的原因。如果你不想那个“a”被点击添加<a href="javascript:void(0)">Futsal</a>