Здравейте, искам на оградените места да сложа картинки пред тескта, но нещо не ми се получава. С таблица успях да издокарам нещо, но не ми допада. Може ли да ми дадете примерен код, съвет или нещо друго, което ще ми помогне да го направя ?
Код:
<table style="margin-top: -20px;">
<tr>
<td>
<nav>
<ul>
<li><a href="#">Начало</a></li>
<li><a href="#">Хранителни режими</a>
<ul>
<li><a href="#">Ниско въгрелидратни</a></li>
<li><a href="#">Нещо тука</a></li>
<li><a href="#">Да не е като да няма</a></li>
</ul>
</li>
<li><a href="#">Рецепти</a>
<ul>
<li><a href="#">Закуска</a></li>
<li><a href="#">Вечеря</a></li>
<li><a href="#">Обяд</a></li>
</ul>
</li>
<li><a href="#">Контакти</a></li>
</ul>
</nav>
</td>
<td><div class="vertical_dotted_line"></div></td>
<td>
<nav>
<ul>
<li><table><tr><td><img src="images/male.png"/></td><td><a href="#">'.$_SESSION['username'].'</a></td></tr></table> //// Това тук е картинката и името
<ul>
<li><a href="#">Настройки</a></li>
<li><a href="#">Съобщения</a></li>
<li><a href="#">Изход</a></li>
</ul>
</li>
</ul>
</nav>
</td>
</tr>
</table>
Код:
/* Nav styles */
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #1f1b12;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 20px 40px;
color: #FFFFFF; text-decoration: none;
}
nav ul ul {
background: #1f1b12; border-radius: 0px; padding: 0;
position: absolute;
width: auto;
}
nav ul ul li {
float: none;
border-top: 1px solid #252016;
border-bottom: 1px solid #252016;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #302b1f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/* Nav styles */
:?: :?: