Hey guys,
I've spend the best part of two hours trying to work this out and have looked at various css resources online before giving up and posting here. I'm sure the answer is quite obvious.
Below is the css I have for a simple drop down menu, nothing fancy but it does its job.
.menu ul { width: 486.75px; height: 50px; font-size: 1em; font-weight: bold; list-style: none; margin: 0px; padding: 0px; float: left; }
.menu li { width: 162.25px; float: left; padding: 0px; font-weight: bold; }
.menu li a { color: #ffffff; font-weight: bold; display: block; line-height: 50px; margin: 0px; padding: 0px; text-align: left; text-decoration: none; }
.menu li a:hover, .menu ul li:hover a { background: #f1f1f1; color: #0054a6; font-weight: bold; text-decoration: none; }
.menu li ul { background: #f1f1f1; color: #0054a6; display: none; height: auto; padding: 0px; margin: 0px; border: 0px; width: auto; position: absolute; z-index: 200; /*top:1em; /*left: 0;*/ }
.menu li:hover ul { display: block; color: #0054a6; font-weight: normal; }
.menu li li { color: #0054a6; font-weight: bold; display: block; float: none; margin: 0px; padding: 0px; width: auto; }
.menu li:hover li a { background-color: #f1f1f1; color: #0054a6; font-weight: bold; }
.menu li ul a { display: block; height: 50px; font-size: 0.85em; color: #0054a6; margin: 0px; padding: 0px 15px 0px 15px; text-align: left; }
.menu li ul a:hover, .menu li ul li:hover a { background-color: #ffffff; border: 0px; color: #0054a6; font-weight: bold; text-decoration: none; }
.menu p { clear: left; }
And here is the html for the menu...
<div class="menu">
<ul>
<li><a href="http://www.test.net" target="_self" >About</a><ul><li><a href="http://www.test.net/" target="_self" >Find out about us and our company...</a></li></ul></li>
<li><a href="http://www.test.net" target="_self" >Services</a><ul><li><a href="http://www.test.net/" target="_self" >Find out what we can do for you...</a></li></ul></li>
<li><a href="http://www.test.net" target="_self" >Prices</a><ul><li><a href="http://www.test.net/" target="_self" >Check out our great value prices...</a></li></ul></li>
</ul>
</div>
As you can see, at the moment the dropdown contains a small description which aligns with the left side of the main element. What I would like to know is how would I go about having it align with the right side instead (not the text in the dropdown but the dropdown itself)?
Thanks in advance.
