Navbar deconnexion button hover on two lines not wanted - html

Question

I would like a deconnexion button to appear when hovering on the menu "Bonjour Toi".
But it's showed on 2 lines instead of 1.
As "Toi" can be changed according to user name, when the name is longer the menu deconnexion is correctly showed on 1 line.
Here is what i have now:
Here is my html code:
.nav-top {
background-color: #475162;
height: 70px;
width: 100%;
text-align:center;
padding:10px;
}
.nav-top nav .logo{
float:left;
}
.nav-top nav .logo{
margin-left:20px;
}
.nav-top nav ul {
padding: 0px;
margin: 0px;
float: right;
}
.nav-top nav ul {
margin-right: 50px;
}
.nav-top nav li {
display: inline;
}
.nav-top nav li a {
color: white;
font-size: 1em;
line-height: 70px;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
}
.nav-top ul li a.active {
border: solid 1px #FF307E;
}
.nav-top ul li a:hover:not(.active) {
border: solid 1px #FF307E;
}
/* BUTTON DECONNEXION */
.nav-top nav ul li{
display:inline-block;
position:relative;
}
.nav-top nav ul li ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
}
.nav-top nav ul li:hover ul{
max-height:15em;
}
.nav-top nav ul li ul a{
padding:8px 5px;
text-decoration: none;
}
.nav-top nav ul li ul a img{
vertical-align:middle;
}
.nav-top nav ul li:hover li a{
background-color: #FF307E;
color:white;
text-transform:inherit;
}
<div class="nav-top">
<nav>
<div>
<div>
<a routerLink='./'><img class="logo" src="./assets/img/logo.png" height="70px"></a>
<ul>
<li><a>BLOG</a></li>
<li><a>CONTACT</a></li>
<li><a>SUPPORT</a></li>
<li ><a class="active ">Bonjour {{nameUserConnected}}</a>
<ul>
<li><a (click)="confirmLogout()"><img src="./assets/img/logout.png" width="17px" /> Déconnexion</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
How can I get the deconnexion + icon on the same line ?

Answer 1

You have a few problems here. The ul that is positioned absolute will have the width of the element it's relative to. Which is the li containing Bonjour Toi . That's why when it's longer, it will fit. If the text is smaller , the ul won't fit. You also set overflow:hidden on it , you need to remove that
I changed a bit your code ( the image i've set it like a background-image and padding-left of a is equal to the width of image, change it as you like )
All new/changed code is at the top of the CSS styles
see below
.nav-top nav ul li ul {
position: absolute;
z-index: 1000;
max-height: 0;
left: 0;
top: 100%;
display: none;
}
.nav-top nav ul li ul li a {
padding-left: 30px;
background: url('https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico') no-repeat scroll left center #FF307E;
}
.nav-top nav ul li ul {
width: 100%;
display: none;
}
.nav-top nav ul li:hover > ul {
display: block;
overflow: visible;
}
.nav-top {
background-color: #475162;
height: 70px;
width: 100%;
text-align: center;
padding: 10px;
}
.nav-top nav .logo {
float: left;
}
.nav-top nav .logo {
margin-left: 20px;
}
.nav-top nav ul {
padding: 0px;
margin: 0px;
float: right;
}
.nav-top nav ul {
margin-right: 50px;
}
.nav-top nav li {
display: inline;
}
.nav-top nav li a {
color: white;
font-size: 1em;
line-height: 70px;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
}
.nav-top ul li a.active {
border: solid 1px #FF307E;
}
.nav-top ul li a:hover:not(.active) {
border: solid 1px #FF307E;
}
/* BUTTON DECONNEXION */
.nav-top nav ul li {
display: inline-block;
position: relative;
}
.nav-top nav ul li:hover ul {
max-height: 15em;
}
.nav-top nav ul li ul a {
padding: 8px 5px;
text-decoration: none;
}
.nav-top nav ul li ul a img {
vertical-align: middle;
}
.nav-top nav ul li:hover li a {
background-color: #FF307E;
color: white;
text-transform: inherit;
}
<div class="nav-top">
<nav>
<div>
<a routerLink='./'><img class="logo" src="./assets/img/logo.png" height="70px"></a>
<ul>
<li><a>BLOG</a></li>
<li><a>CONTACT</a></li>
<li><a>SUPPORT</a></li>
<li><a class="active ">Bonjour Toi</a>
<ul>
<li><a (click)="confirmLogout()">Déconnexion</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>