Align the size according to the larger text

Question

Align the size according to the larger text

Navigation

#1 by (4 votes)

0

I have a menu and some submenus, I need the submenu to align the width of it according to the larger text, because there are texts that can contain only 5 words but texts in the submenu that can contain 15 , then it needs to be aligned according to 15 so there is no such line break. I have the following CSS

nav > ul > li{display:inline;margin-left:57px;position:relative;}
nav > ul > li > a.active{color:#e6007e;border-bottom:3px #e6007e solid;padding-bottom:5px;}
nav > ul > li > a:hover{color:#e6007e;border-bottom:3px #e6007e solid;padding-bottom:5px;}
nav > ul > li > a{text-decoration: none;color:#a1a3a5;font-family: 'Quicksand', sans-serif;}

nav > ul > li > ul{
visibility: hidden;
position: absolute;
left: 0;
top: 23px;
padding: 4px 7px;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
-moz-opacity: 0.00;
opacity: 0.00;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
font-family: 'Quicksand', sans-serif;
}

nav > ul > li:hover > ul{
visibility: visible;
text-align: left;
background: #e6007e;
color:#fff;
font-family: 'Quicksand', sans-serif;
-moz-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
font-family: 'Quicksand', sans-serif;
}

nav > ul > li > ul > li > a{color:#fff;text-decoration:none;font-family: 'Quicksand', sans-serif;}
nav > ul > li > ul > li > a:hover{text-decoration: underline;}

nav > ul > li > ul > li{
display: block;
font-size: 12px;
margin-bottom: 5px;
width: 200px;
}

html css menu dropdown submenu

asked by anonymous 23.01.2015 / 13:13

1 answer

Doubt modifying HTML tags with AngularJS Problem with function that generates friendly url

score 4 · Accepted Answer

Just make use of the white-space: nowrap; property that prevents line breaks unless there is a <br> in your code, you can read more about this in Maujor's article here .

Then just apply the property min-width instead of width as you had done to not cut the text if it exceeds the size of the defined element getting min-width: 200px; .

Example (Based on the style sheet quoted in the question, I only applied the code organization of the SOPT tool):

nav > ul > li {
  display: inline;
  margin-left: 57px;
  position: relative;
}
nav > ul > li > a.active {
  color: #e6007e;
  border-bottom: 3px #e6007e solid;
  padding-bottom: 5px;
}
nav > ul > li > a:hover {
  color: #e6007e;
  border-bottom: 3px #e6007e solid;
  padding-bottom: 5px;
}
nav > ul > li > a {
  text-decoration: none;
  color: #a1a3a5;
  font-family: 'Quicksand', sans-serif;
  display: inline-block;
}
nav > ul > li > ul {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 23px;
  padding: 4px 7px;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  -moz-opacity: 0.00;
  opacity: 0.00;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
  font-family: 'Quicksand', sans-serif;
}
nav > ul > li:hover > ul {
  visibility: visible;
  text-align: left;
  background: #e6007e;
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  -moz-opacity: 1;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
  font-family: 'Quicksand', sans-serif;
}
nav > ul > li > ul > li > a {
  color: #fff;
  text-decoration: none;
  font-family: 'Quicksand', sans-serif;
}
nav > ul > li > ul > li > a:hover {
  text-decoration: underline;
}
nav > ul > li > ul > li {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  min-width: 200px; /* Para o texto não cortar o texto */
  white-space: nowrap; /* Para não haver quebra de linha */
}

<nav>
  <ul>
    <li><a href="#">Lorem</a>
      <ul>
        <li><a href="#">Sub Lorem Sub Lorem Sub Lorem Sub Lorem Sub Lorem Sub Lorem Sub Lorem</a>
        </li>
        <li><a href="#">Sub Lorem</a>
        </li>
        <li><a href="#">Sub Lorem</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Lorem</a>
    </li>
    <li><a href="#">Lorem</a>
    </li>
    <li><a href="#">Lorem</a>
    </li>
  </ul>
</nav>

OBS: I applied comments in the sections where I applied the properties mentioned for easy visualization.