Recently, I've been working on creating a horizontal menu bar and I have condensed the CSS as much as possible. However, I am facing an issue where I do not want the ul li element to adjust its size based on the content of the ul ul. Any suggestions on how to prevent this behavior?
Based on my knowledge, since the ul li elements have display:inline-block, they will always resize according to the content.
Here is what I currently have:
jsFiddle
body,
html {
padding: 0px;
margin: 0px;
height: 200%;
}
.nav {
postion: fixed;
top: 0;
width: 100%;
margin: 0px;
padding: 0px;
margin: 0px;
height: 50px;
color: #F5F5F5 !important;
font-size: 0px;
}
.nav ul {
list-style-type: none;
postion: relative;
margin-left: -40px;
}
.nav ul li {
display: inline-block;
line-height: 50px;
font-size: 15px;
}
.nav ul ul {
visibility: hidden;
}
.nav ul ul li {
display: block;
font-size: 15px;
top: -100%;
}
.nav ul li:hover>ul {
visibility: visible;
}
.nav {
background: #35404F;
border-bottom: 4px solid #17A697;
font-family: 'PT Sans', sans-serif;
}
.nav ul li {
transition: background 250ms ease-in;
}
.nav ul li:hover {
background: #17A697;
}
.nav ul ul li {
transition: background 250ms ease-in;
background: #35404F;
}
.nav ul ul li:hover {
background: #17A697;
}
.nav a {
margin: 0px 20px;
}
<div class="nav">
<ul>
<li><a>Hi there</a>
<ul>
<li><a>Here is </a>
</li>
<li><a>Awesome</a>
</li>
</ul>
</li>
<li class="aright"><a>Hi there</a>
<ul>
<li><a>Here is the awesomeness</a>
</li>
<li><a>Awesome</a>
</li>
</ul>
</li>
</ul>
</div>