I have created a navigation section with dropdown buttons. I want the width of the divs to adjust based on the text length. In Firefox, everything looks good and works as expected.
However, when I checked the site in Chrome, the navigation section behaved differently. The text was breaking up and the div widths were incorrect. What's strange is that when I hover over the buttons, the div widths start to adjust correctly.
Is this an issue specific to Chrome, or do I need to modify my code differently?
I am using normalize.css in my parent CSS file.
You can view the website here:
HTML:
<nav>
<ul>
<li><a class="selected" href="index.html">Home</a></li>
<li><a href="#">Our services</a>
<ul>
<li><a href="painting.html">Painting</a></li>
<li><a href="total-works.html">Total Works</a></li>
<li><a href="other.html">Other Works</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
nav{
float:right;
padding-top:68px;
}
nav ul{
position: relative;
display: inline-table;
width:100%;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav li{
float:left;
list-style-type:none;
margin-right:2%;
}
nav ul li a{
display:block;
width:auto;
min-width:75px;
text-align:center;
background-color:#E9E9E9;
color:#555555;
padding:7px 13% 10px;
border-radius:50px;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size:16px;
text-decoration:none;
}
nav li a:hover, .selected{
background-color:#838383;
color:white;
text-decoration:none;
}
nav ul ul {
display: none;
border-radius: 0px;
padding: 0;
position: absolute;
top: 35px;
width:auto;
margin-left:0%;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color:#555555;
background-color:#E9E9E9;
margin-top:3px;
width:auto;
}
nav ul ul li a:hover {
background: #838383;
color:white;
text-decoration:none;
}