fluid width drop down menu - html

Question

I'm having great difficultly designing a drop down menu with pure css, that has fluid width. The examples I've found all have a fixed width top menu. As soon as I make the top menu fluid width, the drop down doesn't work. Can anyone help me complete the code? I basically have 7 menu items including a blank middle one. Over the middle one I have an absolute positioned logo.
HTML
<div style="position:relative;">
<img style="position:absolute; width:14.28%; max-height:80px; margin-left: auto;margin-right: auto;left: 0;right: 0;" src="\adrenicon.jpg"/>
<nav>
<ul>
<li>Start Here</li>
<li>Destinations
<ul>
<li>Africa</li>
<li>Europe</li>
<li>America</li>
</ul>
</li>
<li>Features</li>
<li>&nbsp</li>
<li>Activities</li>
<li>Planner</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
width:14.28%;
text-align: center;
line-height: 50px;
display: inline-block;
position: relative;
}
nav li a {
font-weight: bold;
color: hotpink;
text-align: center;
padding: 0px;
text-decoration: none;
-webkit-transition: color 1s;
transition: color 1s;
}
nav li a:hover {
color: #111;
}
nav ul li ul {
position: absolute;
display: none;
background-color: #f9f9f9;
min-width: 160px;
}
Thanks for any help.

Answer 1

first you need to set overflow:visible to the main ul ( nav ul )
then, because you set a width of 14.28% on the nav ul li you need to set a width of 100% to the second level of li ( nav ul li ul li ) so they don't get on top of eachoter and each stays on a separate row
and because the li has float:left; you need to set float:left;width:100% on the nav ul also.
then on hover on li change display:none to display:block on the second ul
see below snippet. let me know if it works
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #333;
float:left;
width:100%;
}
nav li {
float:left;
width:14.28%;
text-align: center;
line-height: 50px;
position: relative;
}
nav li a {
font-weight: bold;
color: hotpink;
text-align: center;
padding: 0px;
text-decoration: none;
-webkit-transition: color 1s;
transition: color 1s;
}
nav li a:hover {
color: #111;
}
nav ul li ul {
position: absolute;
display: none;
background-color: #f9f9f9;
min-width: 160px;
}
nav ul li ul li {
width:100%;}
nav ul li:hover > ul{
display:block;
}
nav ul ul ul {
right:-100%;
top:0
}
<div style="position:relative;">
<img style="position:absolute; width:14.28%; max-height:80px; margin-left: auto;margin-right: auto;left: 0;right: 0;" src="http://placehold.it/100x100.jpg"/>
<nav>
<ul>
<li>Start Here</li>
<li>Destinations
<ul>
<li>Africa
<ul>
<li>Kenya</li>
<li>Tanzania</li>
</ul>
</li>
<li>Europe
<ul>
<li>Spain</li>
<li>France</li>
</ul>
</li>
<li>America</li>
</ul>
</li>
<li>Features</li>
<li>&nbsp</li>
<li>Activities</li>
<li>Planner</li>
<li>Contact</li>
</ul>
</nav>
</div>
Edited also for 3rd level of ul .
code : ul ul ul { right:-100%;top:0;}