Justified layout for blocks

**gemzilla** · 07-29-2014, 01:04 PM

For my navigation bar I am trying to get it so the links are equal distance apart like a justified layout. Each time I try this it mucks up the drop downs.

My website: http://familyfostering.ismywebsite.co.uk/

CSS

Code:

#menu {
	height:30px;
	width:810px;
	background-color:#0576BF;
	margin-left:auto;
	margin-right:auto;	
}


/*---------------Menu---------------*/

#menu ul {
	height:30px;
	width:810px;
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:justified;
}

#menu ul li {
	height:30px;
	width:auto;
	line-height:30px;
	margin-left:20px;
	margin-right:20px;
	display:inline-block;
}

#menu ul:after {
	content:' ';
	width:100%;
	display:inline-block;
}

#menu ul ul {
	display:none;
}

#menu ul li:hover > ul {
	display:block;
}

#menu ul li ul {
	width:135px;
	text-align:center;
	background-color:#87E1FC;
}

#menu ul li ul li ul {
	margin-top:-30px;
	list-style-type:none;
	margin-left:135px;
	width:135px;
	text-align:center;
}

#menu ul li ul li, #menu ul li ul li a  {
	height:auto;
	padding-bottom:3px;
	padding-top:3px;
	line-height:25px;
	width:135px;
	background-image:none;
	background-color:#87E1FC;
	color:#000;
	border:#000;
	font-size:14px; 
}

#menu ul li ul li a:hover  {
	background-image:none;
	background-color:#0576BF;
	color:#000;
	border:#000 thin;
	font-size:14px
}

#menu ul li a {
	height:30px;
	cursor:pointer;
	font-size:18px;
	text-decoration:none;
	color:#FFFFFF;
}

#menu ul li a:hover {
	color:#27C8F9;
}

/*---------------Menu---------------*/

HTML

Code:

<div id="menu">

<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php">About Us</a>
      <ul>
          <li><a href="#">sublink</a></li>
          <li><a href="#">sublink</a></li>
          <li><a href="#">sublink</a></li>
          <li><a href="#">sublink</a></li>
      </ul>
    </li>
    <li><a href="carers.php">Foster Carers</a></li>
    <li><a href="young.php">Young People</a></li>
    <li><a href="authorities.php">Local Athorities</a></li>
    <li><a href="Join.php">Join Us</a></li>
</ul>

</div>

**Deadweight** · 07-31-2014, 03:02 AM

css:

Code:

.spacer {clear:both}
/*
#menu { width: 96%; padding: 0; margin: 0 auto; background-color:#0576BF; height:30px; line-height: 30px; position:relative; z-index:5;}
#menu li, #menu ul { list-style:none;}
#menu>li { display:inline-block; width:16%; text-align:center;}
#menu>li>ul {
	float: left;
	position:absolute;
	margin-top:-1px;
	z-index:6;
	border:1px solid black;
	left:0;
}
#menu>li>ul>li {
	border-bottom: 1px solid black;
}

#menu>li>a { color:white; text-decoration:none; font-weight:bold;}
#menu>li>a:hover { color:#87E1FC;}

#menu>li:hover>ul { display:block;}
*/

/* Main Nav Menu */
#menu{
    list-style:none;
    font-weight:bold;
	height:30;
	line-height:30px;
    float:left; /* Clear floats */
    width:96%;
    /* Bring the nav above everything else--uncomment if needed.*/
    position:relative;
    z-index:5;
}
#menu>li{
    float:left;
    width:16%;
    position:relative;
	text-align:center;
}
#menu>li>a{
    display:block;
    padding:0px;
    color:#fff;
    background-color:#0576BF;
    text-decoration:none;
}
#menu>li>a:hover{
    color:#87E1FC;
    text-decoration:underline;
}

/*  DROP DOWN MENU  */
#menu>li:hover>ul{
	display:block;
}

#menu>li>ul {
	font-weight:500; /* Normal Font Weight */
	list-style: none;
	text-align:center;
	padding:0px;
	margin:0px;
	background-color:#87E1FC;
	display:none;
	position:absolute;
	width:100%;
}

#menu>li>ul>li>a:hover{
	color:black;
	text-decoration:underline;
}

#menu>li>ul>li>a {
	color:black;
	text-decoration:none;
}

HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<link rel="stylesheet" href="main.css" />

<body>

<div>

<ul id="menu">
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php">About Us</a>
      <ul>
          <li><a href="#">sublink</a></li>
          <li><a href="#">sublink</a></li>
          <li><a href="#">sublink</a></li>
          <li><a href="#">sublink</a></li>
      </ul>
    </li>
    <li><a href="carers.php">Foster Carers</a></li>
    <li><a href="young.php">Young People</a></li>
    <li><a href="authorities.php">Local Athorities</a></li>
    <li><a href="Join.php">Join Us</a></li>
</ul>
<div class="spacer"></div>
</div>
Something
</body>
</html>