I am currently creating a basic CSS menu. However, I am facing an issue where selecting a menu title in the menu bar causes the width of the title to extend to match the width of the associated menu, which is not my desired outcome (the title's width should remain unchanged). You can view the JSFiddle or take a look at the code below:
<div id="menu">
<ul>
<li><a href="javascript: showLogin()">you</a>
<ul>
<li><a href="javascript: showLogin()">register...</a></li>
<li><a href="javascript: showLogin()">login...</a></li>
<li><a href="javascript: showLogin()">forgot password...</a></li>
</ul>
</li>
<li>.</li>
<li><a href="javascript: selectMenu()">qan</a></li>
<li>.</li>
<li style="width: 20px"><a class="site">be</a>
<ul>
<li><a href="javascript: false">be</a></li>
<li><a href="javascript: false">do</a></li>
</ul>
</li>
</ul>
</div>
Here are the corresponding CSS definitions:
#menu {
font-family: Arial, Helvetica, sans-serif;
padding: 0px 5px;
font-size: 12px;
line-height: 18px;
color: darkgrey;
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background-color: black;
z-index: 3;
/*opacity: 0;*/
white-space: nowrap;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
}
#menu>ul>li {
font-weight: bold;
display: inline-block;
float: left;
padding: 2px 1px 0px 1px;
width: auto;
/*width: 10px;*/
}
#menu a { color: inherit; text-decoration: none;}
#menu>ul>li>a:hover { background-color: grey;}
#menu>ul ul {
display: none;
background-color: lightgrey;
padding: 2px 5px;
line-height: 14px;
min-width: 100px;
}
#menu>ul ul>li {
color: black;
padding: 2px 8px 2px 5px;
margin: 0px -3px;
}
#menu>ul ul>li:hover { color: lightgrey; background-color: grey;}
#menu>ul>li:hover ul { display: block;}
Since the menus are dynamically generated and meant to change on-the-fly, while using a proportional font, I am unable to set a fixed width for the titles to prevent resizing. The title's width should only be determined by the width of the text.
Previously, this worked when yuimenus was implemented, but it caused unexpected changes to my CSS that were hard to manage. Hence, I opted to create the menu myself and everything is working fine except for the width discrepancy. I haven't been able to identify which part of yui prevented this issue. Any suggestions?