I want to make a dropdown menu with HTML/CSS and some javascript. I am stuck with the width of the li element. It has to have the width of the content inside instead of a static width.
The problem is when I hover with my mouse over the li element (To show the dropdown menu) it is changing his width.
I created a jsfiddle file that you can find here.
CSS:
#nav{
background-color: #1da8d8;
width: 100%;
max-width: 960px;
margin: 0;
padding: 0;
float: left;
}
#nav li a i {
text-align: right;
}
#nav ul {
padding: 0;
margin:0;
list-style: none;
width:12em;
z-index:99;
position:relative;
overflow:visible;
}
#nav li {
background-color: #1b9cc9;
position: relative;
line-height: 39px;
height: 40px;
width: auto;
margin: 0 5px 0 0;
float:left;
display:block;
}
#nav ul li{
background-color:#1b9cc9;
top: 20px;
width: 12em;
float: left;
}
#nav a {
color: #ffffff;
text-decoration:none;
display:block;
padding: 0.1em;
margin: 0 0.2em 0 0;
height:1.05em;
width: auto;
}
#nav ul li:hover, #nav ul li a:hover{ background-color:#1da8d8;}
#nav ul{
display:none;
}
/*all see this */
#nav ul ul, #nav ul ul ul{
display:none;
position:absolute;
margin-left:12em;
}
/* non-IE browsers see this */
#nav ul li>ul, #nav ul ul li>ul{
margin-top:-1.8em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{
display:block;
}
li>ul {
top: auto;
left: auto;
}
The width is now automaticaly adjusted to the complete width of the child. Setting the position of the child to absolute will ignore this.
Change postition:relative;
on #nav ul
to position:absolute;
#nav ul {
padding: 0;
margin:0;
list-style: none;
width:12em;
min-width:100%;
z-index:99;
position:absolute;
overflow:visible;
}
You need to explicitly set the width and max-width here too - in your css try this
#nav li {
background-color: #1b9cc9;
position: relative;
line-height: 39px;
height: 40px;
width: 12em;
max-width: 12em;
margin: 0 5px 0 0;
float:left;
display:block;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.