html - Navbar deconnexion button hover on two lines not wanted -


i deconnexion button appear when hovering on menu "bonjour toi".

but it's showed on 2 lines instead of 1.

as "toi" can changed according user name, when name longer menu deconnexion correctly showed on 1 line.

here have now:

enter image description here

here 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  {    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 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" />&nbsp;déconnexion</a></li>            </ul>          </li>        </ul>      </div>    </nav>    </div>
how can deconnexion + icon on same line ?

you have few problems here. ul positioned absolute have width of element it's relative to. li containing bonjour toi . that's why when it's longer, fit. if text smaller , ul won't fit. set overflow:hidden on , need remove that

i changed bit code ( image i've set background-image , padding-left of a equal width of image, change )

all new/changed code @ top of 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 {    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 {    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 {    padding: 8px 5px;    text-decoration: none;  }    .nav-top nav ul li ul img {    vertical-align: middle;  }    .nav-top nav ul li:hover li {    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>


Comments

Post a Comment

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

while performing simple hover test on firefox through selenium (3.4.0) python bindings (3.4.3) using of available os in saucelabs (except linux, latest available firefox version old), performing following actionchain: hover = actionchains(driver) hover.move_to_element(elm_men_menu).perform() it throws following error: taceback: file [...] in testhover hover.perform() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 80, in perform action() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 290, in <lambda> command.move_to, {'element': to_element.id})) file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 256, in execute self.error_handler.check_response(response) file "/usr/local/lib/python2.7/...
Read more

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

transpose - Maple isnt executing function but prints function term -

im using maple im in worksheetmode tried using maple input , 2d input , want transpose matrix a: := `<|>`(`<,>`(1, .5, -2), `<,>`(.5, 9/4+b, 5+3*b), `<,>`(-2, 5+3*b, 18+9*b+4*a)); b:= transpose(a); when exectute sheet dont translated values, there same input. matrix looks same input matrix plus function term. you can see picture in following link: why arent functions executed? meanwhile b:=a^+ doing right way , transposed matrix. other functions return function body instead needed values... if using 2d input mode (the default) space you've got between transpose , bracketed (b) interpreted multiplcation. rid of such space. also, either load package @ start of document like, with(linearalgebra): before calling transpose command package, or call it's full name like, linearalgebra:-transpose(b);
Read more