Horizontal dropdown menu…

I’m currently trying to adapt the default wordpress theme into a simple site located at https://www.fisker-kokk.no , however I’m having trouble getting the look of wp_jquery_dropdownmenu plugin to fit into the rest og my site. The width and colours are all wrong. I’ve tried fiddeling with the css but I’m not able to figure it out. (i’m a newcomer to css…) Anybody able to help?

Here is the CSS from the plugin:

#nav
{
	width: 100%;
}

#nav ul {
	width: 100%;
	list-style: none;
	font-weight: normal;
	font-size: 14px;
	background-color: #828282;
	padding: 0;
	margin: 0;
	border: none;
	border-width: 0;
	float: left;
	line-height:12px;

}

#nav a {
	display : block;
	text-decoration : none;
}

#nav ul li a {
	color: #ffffff;
	padding: 0px;
	margin:0px;

}

#nav ul li a.dropdownarrow
{
	padding-right:14px;
	background-image: url("images/arrow-dropdown-white.gif");
	background-repeat: no-repeat;
	background-position: right ;

}

#nav li {
	color: #ffffff;
	float: left;
	padding: 0;
	padding: 4px 16px 4px 16px;
	border-right: 1px solid #CCCCCC;

}

#nav li img{
margin:0px 0px 0px 4px;
padding:0px;
vertical-align: middle; 

}

#nav li ul {

	position : absolute;
	left : -999em;
	background-color: #828282;
	left : -111em;
	height : auto;
	font-weight : normal;
	border-width : 0.25em;
	margin : 2px 0px 0px 0px;
}

#nav li ul
{
	display:none;
	left: auto;
	margin-top:4px;
	margin-left:-16px;
	width:auto;
}

#nav li li {
	border-right: none;
}

#nav li ul li
{
	float: none;
	clear:both;
	border-top: 1px solid #FFFFFF;
	width:auto;
	display:block;
	list-style-type: circle;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

#nav ul li:hover {
	color: #333333;
	background-image:  none;
	background-color: #A5E58F;
	border-right: 1px solid #CCCCCC;
}

#nav ul li:hover ul.nj{
	color: #333333;
	background-image:  none;
	background-color: #A5E58F;
	border-right: 1px solid #CCCCCC;
	display:block;
	background-color: #828282;

}

#nav a:hover {
	color: #333333;
	background-image:  none;
	background-color: #A5E58F;
}

.current_page_item
{
	background-image:  none;
	background-color: #A5E58F;
}

#nav ul li.current_page_item a {
	color: #333333;
}

#nav ul li.current_page_item  ul li{
	border-right: 1px solid #CCCCCC;
	color: #000000;
}

#nav ul li.current_page_item  ul li a{
	color: #ffffff;
}

#nav ul li.current_page_item  ul li a:hover{
	color: #333333;
	background-image:  none;
	background-color: #A5E58F;
}

My site uses the default css (kubrick)

Another thing, I removed the sidebar, but when I type a page/post I do get the same linebreaks, so that the text ony uses 75% of the available space, the rest is unused. How do I work around that? (in other words, the space allocated to the sidebar is unusable, it’s just white. No text, nothing)