[CSS 3] Menu dérouant horizontal avec le sous menu en largeur à 100% dans la page

Bonjour,

J'utilise un CSS et une liste (ul, li, ul,...) assez simple pour gérer un menu horizontal déroulant qui n'a qu'un seul sous menu.
Il y a donc la première ligne horizontale qui propose les menus, puis quand on passe dessus le sous menu apparait.
On me demande d'avoir une chose assez simple, au lieu d'avoir le sous menu juste sous le texte, avoir un sous menu qui s'ouvre à 100% dans la page (avec une image de fond) mais pour autant le texte doit rester sous le menu et là je ne vois pas comment faire...

Voila mon CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
#nav {
	position:absolute;
	padding: 0;
	margin:0;
	width: 1025px;
	top:0;
}
#nav li {
	margin:0;
	padding: 0;
	float: left;
	position: relative;
	list-style: none;
	text-align:left;
}
/* main level link */
#nav a {
	font-size: 14px;
	color: #e7e5e5;
	line-height: 35px;
	text-decoration: none;
	display: block;
	padding: 0;
	margin:0;	
	padding: 0 10px 0 10px;	
}
#nav a:hover {
	color: #fff;
}
/* Lien dans le menu en haut */
#nav .current a {
	color:#F00;
}
/* gere la premiere ligne */
#nav li:hover > a {
 	color: #FFF;
}
/* sub levels link hover */
#nav ul li:hover a {
	border: none;
	color: #FFFFFF;
	width: 100%; 	
}
/* gere fond du sous menu */
 #nav li:hover li a {
	background-color:rgba(8, 35, 10, 0.8);
	border: none;
	color: #FFFFFF;
}
/* gere le survol sur sous menu  */
#nav ul a:hover {
	background:#305639 !important;
	color: #00AFF0; 
}
 
/* dropdown */
#nav li:hover > ul {
	/* background-color:#836D56 !important; */
	display: block;
}
 
/* level 2 list */
#nav ul {
	position:absolute;
	display: none;
	padding: 0;
	width: 200px;
	border:#FFF 1px solid;	
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
 
#nav ul a {
	font-weight: normal;
}
 
/* level 3+ list */
#nav ul ul {
	left: 200px;
	top: 5px;
}
 
 
/* clearfix */
#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#nav {
	display: inline-block;
} 
html[xmlns] #nav {
	display: block;
}
 
* html #nav {
	height: 1%;
}