CODEWITHSUNDEEP
jqueryhtmlcssdrop-down-menucss-float
Rob Mcg
Rob Mcg

Reputation: 59

Trouble with aligning drop down parent menu item with the rest of the site menu

I am having trouble with the menu on this site. Below is all css coding to the offending menu. You can see it live here. website All I am trying to do is get the word Futsal to align with the rest of menu.

Thanks in advance to anyone willing to spend time helping me to resolve this issue.

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; }

Upvotes: 0

Views: 370

Answers (1)

Vladislav Stanic
Vladislav Stanic

Reputation: 795

First of all add href="" to second li anchor tag. Then do this:

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

You were overriding your absolute position with #pages ul {position: relative}

EDIT:

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

And don't forget to replace <a>Futsal</a> with <a href="">Futsal</a>, that is the reason it went to the top. If you don't want that "a" to be clicked add <a href="javascript:void(0)">Futsal</a>

Upvotes: 1

Related Questions