Jump to content

Problems aligning dropdown menu


Recommended Posts

Hello. I have some problems aligning a new dropdown menu here: http://byvejen.dk/lb/transport The dropdown menu will show if you hover your mouse over the name in the top right corner.. Here's the code: Header:

#header {width:100%; height:45px; background-color:#20558a; margin:0; padding:0;}			#header .container {width:960px; height:45px; padding:0; margin:0px auto 0px auto;}			#header .container .columns {height:45px; text-align:left; padding:0; margin:0;}					#header .container .columns .logo {float:left; width:210px;}					#header .container .columns .nav {float:left; width:200px; height:45px;}							#header .container .columns .search {float:left; width:380px;}					#header .container .columns .profile {float:left; width:168px; height:45px; border-right:1px #f7f8f9 solid; border-right:1px #f7f8f9 solid;}		

Dropdown menu:

#jsddm {width:auto; padding:0; margin:0px auto 0px auto; text-align:center;} 	#jsddm li {list-style:none; font-size:14px; margin:0; padding:0;}		#jsddm li a {background:#20558a; text-decoration:none; color:#FFF; font-weight:bolder; white-space:nowrap; margin:0; padding:0;}		#jsddm li ul {float:right; width:168px; position:absolute; margin:9px 0px 0px 770px; padding:10px; visibility:hidden; border-right:1px #1b4875 solid; border-bottom:1px #1b4875 solid; border-left:1px #1b4875 solid; z-index:2; text-align:left; background: #9bafc2;}				#jsddm li ul li	{display:inline; float:none; z-index:2; font-size:14px; font-weight:lighter; background-repeat:no-repeat; padding-left:22px; background-color:#9bafc2;}				#jsddm li ul li a {background-color:inherit;}				#jsddm li ul li a:hover {color:#20558a;}				#jsddm li ul li.min_profil {float:left; font-size:18px; background-image:url(../images/16x16_icons/user.png); background-position:0px 3px; padding-bottom:10px;}				#jsddm li ul li.rediger_profil {background-image:url(../images/16x16_icons/user_edit.png);}				#jsddm li ul li.rediger_annoncer {background-image:url(../images/16x16_icons/application_edit.png);}				#jsddm li ul li.mine_udlejninger {background-image:url(../images/16x16_icons/application_side_expand.png);}				#jsddm li ul li.mine_bookinger {background-image:url(../images/16x16_icons/application_side_contract.png);}

And the HTML:

<div id="header">	<div class="container">		<div class="columns">			<div class="logo">				<h1><a href="http://byvejen.dk/lb/">LejeBasen.dk</a></h1>			</div>			<div class="nav">				<--content-->			</div>			<div class="search">				<--content-->			</div>			<div class="profile">				<ul id="jsddm">					<li><a href="#">Casper Strømgren</a>						<ul>							<li class="min_profil"><a href="#">Min profil</a></li>							<li class="rediger_profil"><a href="#">Rediger profil</a></li>							<li class="rediger_annoncer"><a href="#">Rediger annoncer</a></li>							<li class="mine_udlejninger"><a href="#">Mine udlejninger</a></li>							<li class="mine_bookinger"><a href="#">Mine bookinger</a></li>						</ul>					</li>				</ul>				</div>		</div>	</div></div>

Now theres two problems.. First of all the two borders to the right and the left on the "profile" div wont show up in the header. And secondly, the name (Here its Casper Strømgren) isn't centered right in the div. I really hope someone can help, this has been driving me crazy for hours now..

Link to comment
Share on other sites

(1)The short-hand declaration for border should be in this order:

  • width
  • type
  • color

The .profile selecector should be:

.profile{border-right: width type color} //There are even two border declarations there, remove one 

(2) add


to '#jsddm li a' selector. Give those a shot!

Edited by eTianbun
Link to comment
Share on other sites

Thanks eTianbun It seems the name i centered right now.. But the border still wont show.I changed the .profile selector properties to this:

#header .container .columns .profile {float:left; width:168px; height:45px; border-right:1px solid #f7f8f9; border-left:1px solid #f7f8f9;} 

I need a border on both sides.

Link to comment
Share on other sites

The profile container is in a different location compared to website location, and remove jquery script from top of page and place between <head>...</head>, placing it there forces it into Quirks mode, causing IE especially to freak out, and go all over the place, more than it normal does. Now you have corrected declaration, and set it for RIGHT and LEFT it should work, clear cache and reload.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...