css - Drop down width same as parent -


i'm creating drop down menu, top level list item display username.

i have bit of issue because want dropdown menu same width @ top level list item being hovered over.

however, if set ul li ul li width 100%, takes 100% of overall container, not of ul above it. think because ul ul's position absolute?

any ideas how can make drop down menu's same width parent list item?

the page can seen here.

and here's html

<ul>     <li><a href="#"><span aria-hidden="true" data-icon="a"> long name here</a>     <ul>         <li><a href="#">view profile</a></li>         <li><a href="#">edit profile</a></li>         <li><a href="#">settings</a></li>         <li><a href="#">my payments</a></li>     </ul>     </li>      <li><a href=""> <span aria-hidden="true" data-icon="c"> online</a></li>     <li><a href="#"> log out</a></li>  </ul>

css

.head-link ul ul {     display: none; }  .head-link ul li:hover > ul {     display: block; }  .head-link ul {       list-style: none;     position: relative;     display: inline-table; }      .head-link ul li {     float: left;     border-top-left-radius: 0.5em;     border-top-right-radius: 0.5em;     height: 2em;     width: auto;     padding: 0.5em 0.98em; }  .head-link ul li:hover {     background: #ffffff; }  .head-link ul li:hover {     color: #434343;     border-bottom: none; }  .head-link ul li {     display: block;      color: #ffffff;      text-decoration: none; }  .head-link ul ul {     background: #ffffff;      border-radius: 0px;      padding: 0;     position: absolute;      top: 99%;     left: 0;     text-align: left;     border-bottom-left-radius: 0.5em;     border-bottom-right-radius: 0.5em;     padding-bottom: 0.8em;     padding-top: 0.5em;     box-shadow: 0px 0.3em 0.4em rgba(0,0,0,0.3); }  .head-link ul ul li {     float: none;      position: relative;     padding: 0em; }  .head-link ul ul li {     padding: 0.5em 1.24em;     color: #434343;     border-bottom-left-radius: 0.5em;     border-bottom-right-radius: 0.5em; }     .head-link ul ul li a:hover {     background: #ffffff;     text-decoration: underline; }  .head-link ul ul ul {     position: absolute;      left: 100%;      top:0; }

here's how made this:

enter image description here

just modify these rules:

.head-link ul li {     position: relative;     ... /* keep current rules */ } .head-link ul li ul {     width: 100%;     ... /* keep current rules */ }

Comments

Post a Comment

Popular posts from this blog

matlab - Deleting rows with specific rules -

i got 20*3 cell array , need delete rows contains "137", "2" , "n:t" origin data: 't' '' '' 'np(*)' '' '' [ 137] '' '' [ 2] '' '' 'are' 'and' 'np(fcc_a1#1)' '' '' '1:t' [ 1200] [0.7052] '' [1.2051e+03] [0.7076] '' 'are' 'and' 'np(fcc_a1#3)' '' '' '2:t' [ 1200] [0.0673] '' [1.2051e+03] [0.0671] '' 'are' 'and' 'np(m23c6)' '' '' '3:t' [ 1200] [0.227...
Read more

php - MySQLi multi_query results for later use -

i using mysqli multi_query work several select statemets @ time. know how handle results, able use them later in code. example: <?php //connection stuff $query = "select name, surname database1;"; $query.= "select car, year, type database2 carid='1';"; $query.= "select product, price database3;"; if ($mysqli->multi_query($query)) { if($result = $mysqli->store_result()) { while($row = $result->fetch_row()) { --> here? } } } ?> <html> <div id='persona'> <?php foreach() { --> print name + surname } ?> </div> <div id='cars'> <?php foreach() { --> print car + year + type } ?> </div> <div id='product'> <?php foreach() { --> print product + price } ?> </div> </html> one more thing, prepared statements not possible when using multiple_query, right? there no benefit in putting unrelated queries in 1 multi ...
Read more