Ik heb een php script met een dropdown menu. Nu heb ik het probleem dat ze niet allemaal gelijk zijn en het ziet er heel rommelig uit. Hoe kan ik hem recht krijgen?
stukje van dropdown menu:
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="index.php"> Index </a></li>
<li class="navigation"><a href="./">Criminalitijd </a></li>
<ul>
<li><a href="crime.php"> Misdaad </a></li>
<li><a href="work.php"> Werken </a></li>
<li><a href="drugs.php?drugs=kopen"> Drugs  </a></li>
</ul>
Style.css
/*
Template name: Natural Essence
Template URI: http://templates.arcsin.se/natural-essence-website-template/
Release date: 2007-02-20
Description: Soft and natural single/two-column template.
Author: Viktor Persson
Author URI: http://arcsin.se/
This template is licensed under a Creative Commons Attribution 2.5 License:
http://templates.arcsin.se/license/
*/
/* default elements */
* {margin: 0; padding: 0;}
body {
background: #7C6F5C url(img/bg.jpg);
color: #222;
font: normal 62.5% sans-serif;
padding: 2% 0;
}
a {color: #642;}
a:hover {color: #963;}
big {font-size: 1.1em;}
h1,h2,h3 {color: #442; padding: 8px 0 2px;}
h1 {font: normal 2.4em serif,sans-serif;}
h1 a {text-decoration: none;}
h1 a:hover {text-decoration: underline;}
h2 {font: normal 1.6em serif,sans-serif;}
h3 {font: bold 1.2em serif,sans-serif;}
blockquote {
background: url('img/quote.gif') no-repeat;
display: block;
font: normal 1.1em Georgia,serif;
padding-left: 26px
}
form,table {margin-bottom: 1.2em;}
img {border: none;}
label {display: block;}
li {line-height: 1.5em;}
p {padding: 2px 0 10px;}
small,.small {font: normal 0.9em sans-serif;}
ul {padding: 0 2em 1.2em;}
/* structure */
#wrapper {
background: #332 url(img/wrapper.gif) no-repeat left bottom;
margin: 0 auto;
width: 762px;
}
#container {
background: #FBF9F4;
border-top: 6px solid #332;
font-size: 1.3em;
line-height: 1.3em;
margin: 0 auto;
width: 750px;
}
/* header */
.title {
background: #E2DED4;
border-top: 1px solid #996;
}
.title h1 {
color: #441;
font: normal 2.2em Georgia,"Trebuchet MS",sans-serif;
padding: 10px 0 10px 18px;
}
.header {
border-top: 2px solid #663;
background: #DAD7C5 url(img/header.jpg) no-repeat left bottom;
height: 220px;
}
/* navigation */
.navigation {
background: #DED9D0 url(img/nav.gif) repeat-x; height: 41px;
border-top: 1px solid #996;
}
.navigation a {
background: #FFF url(img/nav.gif) no-repeat;
border-right: 1px solid #C9C6B3;
color: #553;
float: left;
font: bold 1em Tahoma,sans-serif;
padding: 0 14px;
line-height: 41px;
text-align: center;
text-decoration: none;
}
.navigation a:hover,.navigation a#active {background-position: left bottom; color: #331;}
/* main */
.main#two-columns {background: #FFF url(img/two-columns.gif) repeat-y;}
/* bottom */
.bottom {
background: #DCDAC9 url(img/bottom.gif) no-repeat left bottom;
border-top: 1px solid #AA8;
color: #444;
padding: 14px 20px;
}
.bottom .left,.bottom .right {width: 49%;}
/* footer */
.footer {
background: #332;
color: #EED;
padding: 10px;
}
.footer .left {width: 66%;}
.footer .right {
width: 33%;
text-align: right;
}
.footer a {
color: #FFF;
text-decoration: none;
}
.footer a:hover, .footer .right a:hover {
color: #FFF;
text-decoration: underline;
}
.footer .right, .footer .right a {color: #7D7D75;}
/* gallery */
.gallery td {
vertical-align: top;
text-align: center;
}
.gallery em {display: block;}
/* misc */
.clear,.clearer {clear: both;}
.clearer {font-size: 0;}
.col2 .left {width: 64%;}
.col2 .right .content {background: #FFF;}
.col2 .right {width: 33%;}
.content {padding: 18px 20px;}
.left {float: left;}
.right {float: right;}
.right .content {padding: 18px 12px 12px;}
/* block list */
ul.block {
border-top: 1px dashed #BCBAAC;
margin: 4px 0;
padding: 0;
width: 90%;
}
.block li {
border-bottom: 1px dashed #BCBAAC;
list-style: none;
}
.block li a,.block li em {
color: #553;
display: block;
}
.block li em {
font-size: 0.9em;
font-style: normal;
}
.block li a {
padding: 4px 3%;
text-decoration: none;
width: 94%;
}
.block li a span {font-weight: bold;}
.block li a:hover {
background: #D2D0C0;
color: #553;
}
.right .block,.right .block li {border-color: #DCDACC;}
.right .block li a:hover {background: #F2F0EA;}