[英]CSS menu: width of dropdown items limited by div
自從將下拉菜單從表格移至div以來,下拉菜單一直存在問題。 在表格中,子菜單顯示得非常好,但是現在它們位於div中,更寬的子菜單項被包裹在最右邊的菜單項下。
這是小提琴 ,請看一下第2項和第3項之間的子菜單之間的區別。相同的項占第4項和第5項的最右邊。 如何設置div的寬度,以便將子菜單的寬度考慮在內?
HTML:
<div id="headerimg">
<div id="header">
<div id="headercontent">
<div style="float: left; padding: 25px 50px 0 0;"><a href="home"><img src="" alt=""></a></div>
<div style="float: left; padding-top: 48px">
<nav>
<ul style="font-weight: bold; font-size: 18px;"><!--
--><li style="background-image: url(images/MenuBGres.png);"><a class="MenuLinks1" href="">MENU ITEM 1</a><!--
--><ul><!--
--><li><a href="">Option 1</a></li><!--
--><li><a href="">Much longer option 2</a></li><!-- --><li><a href="">Longer option 3</a></li><!--
--></ul><!--
--></li><!--
--><li style="background-image: url(images/MenuBGind.png);"><a class="MenuLinks1" href="">MENU ITEM 2</a><!--
--><ul><!--
--><li><a href="">Option 1</a></li><!--
--><li><a href="">Much longer option 2</a></li><!-- --><li><a href="">Longer option 3</a></li><!--
--></ul><!--
--></li><!--
--><li style="background-image: url(images/MenuBGres.png);"><a class="MenuLinks1" href="">MENU ITEM 1</a><!--
--><ul><!--
--><li><a href="">Option 1</a></li><!--
--><li><a href="">Much longer option 2</a></li><!-- --><li><a href="">Longer option 3</a></li><!--
--></ul><!--
--></li><!--
--></ul>
</nav>
</div>
<div style="float: right; clear: right; margin-right: 8px;" id="language">
<form name="languagelist">
<select name="translate" size="1" onChange="go()">
<option value="main" selected>English</option>
<option value="es/main">Español</option>
</select>
</form>
</div>
<a href="login"><div style="float: right; clear: right; margin-top: 24px; margin-right: 16px;" id="button">LOGIN</div></a>
<div style="float: right; clear: right; padding-top: 10px;">
<nav>
<ul><!--
--><li><a class="MenuLinks2" href="">MENU 4</a><!--
--><ul><!--
--><li><a href="">Option 1</a></li><!--
--><li><a href="">Much longer option 2</a></li><!-- --><li><a href="">Longer option 3</a></li><!--
--></ul><!--
--></li><!--
--><li><a class="MenuLinks2" href="support/contactus">MENU 5</a><!--
--><ul><!--
--><li><a href="">Option 1</a></li><!--
--><li><a href="">Much longer option 2</a></li><!-- --><li><a href="">Longer option 3</a></li><!--
--></ul><!--
--></li><!--
--></ul>
</nav>
</div>
</div>
</div>
</div>
CSS:
nav ul {
position: relative;
list-style: none;
padding: 0;
margin: 0;
font-size: 16px;
white-space: nowrap;
}
nav ul:after {
content: "";
clear: both;
}
nav > ul > li {
display: inline-block;
margin-right: 10px;
background-repeat: no-repeat;
background-position: center top;
}
nav > ul > li > a {
display: block;
padding: 10px 5px 10px 5px;
color: #ffffff;
text-decoration: none;
}
nav ul li:hover ul li a{
color: #ffffff;
}
/* Set properties for hiding/unhiding dropdown items */
nav ul > li:hover ul, nav > ul > li a:hover ul{
height: auto;
max-height: 250px;
margin-left: -10px;
margin-top: 5px;
padding-right: 10px;
border: 2px solid rgb(233,255,175);
border-top: none;
border-radius: 0 0 10px 10px;
-webkit-box-shadow: 0px 3px 5px 3px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0px 3px 5px 3px rgba(100, 100, 100, 0.5);
box-shadow: 0px 3px 5px 3px rgba(100, 100, 100, 0.5);
}
/* Set general properties for dropdown menu items */
nav ul ul {
position: absolute;
max-height: 0;
overflow: hidden;
background: #018c3b;
border: 2px solid rgb(233,255,175);
border-bottom: none;
border-top: none;
border-radius: 0 0 10px 10px;
margin-top: 5px;
margin-left: -10px;
padding-right: 10px;
-webkit-transition: max-height 0.4s ease-in;
-moz-transition: max-height 0.4s ease-in;
-o-transition: max-height 0.4s ease-in;
-ms-transition: max-height 0.4s ease-in;
transition: max-height 0.4s ease-in;
}
nav ul ul li {
border: 0;
position: relative;
display: block;
padding: 0;
width: auto;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-o-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
nav ul ul li + li a{
border-top: 1px solid #C9CCCF;
}
nav ul ul li a {
display: block;
margin-left: 8px;
padding: 8px 5px 8px 5px;
text-decoration: none;
font-size: 14px;
font-weight: normal;
color: #ffffff;
white-space: normal;
}
nav ul li:hover ul li a:hover {
background: #a0c94c;
color: #ffffff;
}
nav ul {
position: relative;
list-style: none;
padding: 0;
margin: 0;
font-size: 16px;
white-space: nowrap;
}
nav ul:after {
content: "";
clear: both;
}
nav > ul > li {
display: inline-block;
margin-right: 10px;
background-repeat: no-repeat;
background-position: center top;
}
nav > ul > li > a {
display: block;
padding: 10px 5px 10px 5px;
color: #ffffff;
text-decoration: none;
}
nav ul li:hover ul li a{
color: #ffffff;
}
/* Set properties for hiding/unhiding dropdown items */
nav ul > li:hover ul, nav > ul > li a:hover ul{
height: auto;
max-height: 250px;
margin-left: -10px;
margin-top: 5px;
padding-right: 10px;
border: 2px solid rgb(233,255,175);
border-top: none;
border-radius: 0 0 10px 10px;
-webkit-box-shadow: 0px 3px 5px 3px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0px 3px 5px 3px rgba(100, 100, 100, 0.5);
box-shadow: 0px 3px 5px 3px rgba(100, 100, 100, 0.5);
}
/* Set general properties for dropdown menu items */
nav ul ul {
position: absolute;
max-height: 0;
overflow: hidden;
background: #018c3b;
border: 2px solid rgb(233,255,175);
border-bottom: none;
border-top: none;
border-radius: 0 0 10px 10px;
margin-top: 5px;
margin-left: -10px;
padding-right: 10px;
-webkit-transition: max-height 0.4s ease-in;
-moz-transition: max-height 0.4s ease-in;
-o-transition: max-height 0.4s ease-in;
-ms-transition: max-height 0.4s ease-in;
transition: max-height 0.4s ease-in;
}
nav ul ul li {
border: 0;
position: relative;
display: block;
padding: 0;
width: auto;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-o-transition: background-color 0.4s ease;
-ms-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
nav ul ul li + li a{
border-top: 1px solid #C9CCCF;
}
nav ul ul li a {
display: block;
margin-left: 8px;
padding: 8px 5px 8px 5px;
text-decoration: none;
font-size: 14px;
font-weight: normal;
color: #ffffff;
white-space: normal;
}
nav ul li:hover ul li a:hover {
background: #a0c94c;
color: #ffffff;
}
找到了解決方案。 在nav ul ul li a
,我只是將white-space: nowrap
放在white-space: nowrap
(從normal
更改white-space: nowrap
,忘記了為什么我首先將其放在那里...)。 希望對任何人都有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.