JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="navigation">
<li class="header"><a href="#" class="headanchor">Demo</a>
</li>
<li class="header"><a href="#" class="headanchor">Demo2</a>
<ul class="sub">
<li><a href="#">Demo</a>
</li>
<li><a href="#">Demo2</a>
</li>
<li><a href="#">Demo3 Demo3 Demo3 Demo3 Demo3 Demo3 Demo3 Demo3 Demo3 Demo3 Demo3 Demo3 Demo3 </a>
</li>
</ul>
</li>
<li class="header"><a href="#" class="headanchor">Demo3</a>
</li>
</ul>
CSS
#navigation {
padding:0;
margin:0;
list-style:none;
height:30px;
background:#fff;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
background: url(<%=webpath%>\images\three_0.gif);
}
#navigation li.header {
display:block;
float:left;
}
#navigation li a.headanchor {
display:block;
float:left;
height:30px;
line-height:27px;
color:#ccc;
text-decoration:none;
font-size:10px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
background: url(<%=webpath%>\images\three_0.gif);
}
#navigation li a.headanchor span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
background:url(<%=webpath%>\images\three_0.gif) right top;
}
#navigation li a.headanchor span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
background:url(<%=webpath%>\images\three_0a.gif) no-repeat right top;
}
#navigation li:hover a.headanchor {
color:#fff;
background: url(<%=webpath%>\images\three_1a.gif) no-repeat;
}
#navigation li:hover a.headanchor span {
background:url(<%=webpath%>\images\three_1a.gif) no-repeat right top;
}
#navigation li:hover a.headanchor span.down {
background:url(<%=webpath%>\images\three_1a.gif) no-repeat right top;
}
/* Default list styling */
#navigation li:hover {
position:relative;
z-index:200;
background:url(<%=webpath%>\images\three_1a.gif) no-repeat right top;
}
#navigation li:hover ul.sub {
left:0;
top:30px;
background: #83ACDB;
padding:3px;
border:1px solid #3a93d2;
white-space:nowrap;
width:250px;
height:auto;
z-index:300;
}
#navigation li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:250px;
font-weight:normal;
}
#navigation li:hover ul.sub li a {
display:block;
font-size:11px;
...