纯CSS下拉动态大小调整？

Question

我创建了以下纯CSS drodpown菜单：

http://codepen.io/sontek/pen/akPaWK

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  margin-top: 15px;
}

.dropdown {
  display: block;
  position: relative;
  width: 200px;
}
.small {
  width: 50px;
}
.right {
  float: right;
}

.dropdown input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

.dropdown label {
  display: block;
  cursor: pointer;
  background-color: #FFF;
  padding: 7px;
  border: solid 1px;
}

.dropdown label a {
  text-decoration: none;
  color: #555;
}

.dropdown label:after {
  font-family: 'FontAwesome';
  padding-left: 10px;
  content: '\F0D7';
}

.dropdown ul {
  position: absolute;
  top: 100%;
  background-color: #FFF;
  border-left: solid 1px;
  border-right: solid 1px;
  border-bottom: solid 1px;
  
  display: none;
  margin-top: 0px;
  padding: 0px;
  width: 99%;
  list-style: none;
}

.dropdown ul a {
  display: block;
  padding: 5px;
  text-decoration: none;
}

.dropdown ul a:hover {   
    background-color: #CCC;
}

.dropdown input[type=checkbox]:checked ~ ul {
  display: block;
}

<div class="dropdown small right">
  <input id="toggle2" type="checkbox" />
  <label for="toggle2">(S)</label>
  <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Account Settings</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>
</div>

<div class="dropdown">
  <input id="toggle" type="checkbox">
  <label for="toggle">sontek@gmail.com</label>
  <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Account Settings</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>
</div>
<div>
  Hello there, How are you?
</div>

左边的菜单工作正常，因为它与菜单大小相同，但右边的浮动菜单有两个问题：

• 标签很短，因此菜单显示不正确。
• 一旦它需要更长时间，我需要确保它不会离开屏幕，它的右侧不应越过屏幕的右侧。

是否有一种简单的方法可以使UL扩展到其内容但不会脱离屏幕？

我不依赖于任何HTML / CSS ......任何有效的东西对我都有好处。

Answer 1

第一

li {
white-space: nowrap;
}

第二

.right ul {
  right: 0;
  width: auto;
  min-width: 100%;
}

第三

.dropdown ul {
  width: auto;
  min-width: 100%;
  box-sizing: border-box;
}

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  margin-top: 15px;
}

.dropdown {
  display: block;
  position: relative;
  width: 200px;
}
.small {
  width: 50px;
}
.right {
  float: right;
}

.dropdown input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

.dropdown label {
  display: block;
  cursor: pointer;
  background-color: #FFF;
  padding: 7px;
  border: solid 1px;
}

.dropdown label a {
  text-decoration: none;
  color: #555;
}

.dropdown label:after {
  font-family: 'FontAwesome';
  padding-left: 10px;
  content: '\F0D7';
}

.dropdown ul {
  position: absolute;
  top: 100%;
  background-color: #FFF;
  border-left: solid 1px;
  border-right: solid 1px;
  border-bottom: solid 1px;
  
  display: none;
  margin-top: 0px;
  padding: 0px;
  width: auto;
  min-width: 100%;
  box-sizing: border-box;
  list-style: none;
}

.right ul {
  right: 0;
  margin-top: -1px; /* border compensation */
  border-top: 1px solid;
}

.dropdown ul a {
  display: block;
  padding: 5px;
  text-decoration: none;
  white-space: nowrap
}

.dropdown ul a:hover {   
    background-color: #CCC;
}

.dropdown input[type=checkbox]:checked ~ ul {
  display: block;
}

<div class="dropdown small right">
  <input id="toggle2" type="checkbox" />
  <label for="toggle2">(S)</label>
  <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Account Settings</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>
</div>

<div class="dropdown">
  <input id="toggle" type="checkbox">
  <label for="toggle">sontek@gmail.com</label>
  <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Account Settings</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>
</div>
<div>
  Hello there, How are you?
</div>

Answer 2

使用.right {min-width: 200px;}下拉列表似乎没问题。

   @import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  margin-top: 15px;
}

.dropdown {
  display: block;
  position: relative;
  width: 200px;
}
.small {
  width: 50px;
}
.right {
  float: right;
  min-width: 200px;
}
.right>ul {
  right:0;
}
.dropdown input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

.dropdown label {
  display: block;
  cursor: pointer;
  background-color: #FFF;
  padding: 7px;
  border: solid 1px;
}

.dropdown label a {
  text-decoration: none;
  color: #555;
}

.dropdown label:after {
  font-family: 'FontAwesome';
  padding-left: 10px;
  content: '\F0D7';
  float: right;
}

.dropdown ul {
  position: absolute;
  top: 100%;
  background-color: #FFF;
  border-left: solid 1px;
  border-right: solid 1px;
  border-bottom: solid 1px;
  
  display: none;
  margin-top: 0px;
  padding: 0px;
  width: 99%;
  list-style: none;
}

.dropdown ul a {
  display: block;
  padding: 5px;
  text-decoration: none;
}

.dropdown ul a:hover {   
background-color: #CCC;
}

.dropdown input[type=checkbox]:checked ~ ul {
  display: block;
}

<div class="dropdown small right">
  <input id="toggle2" type="checkbox" />
  <label for="toggle2">(S)</label>
  <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Account Settings</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>
</div>

<div class="dropdown">
  <input id="toggle" type="checkbox">
  <label for="toggle">sontek@gmail.com</label>
  <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Account Settings</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>
</div>
<div>
  Hello there, How are you?
</div>