0

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.

4
Contributors
3
Replies
28
Views
4 Years
Discussion Span
Last Post by JorgeM
0

@mdminternet

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.

It would be nice if you have an image on how it looks.

0

If you still need help, a better indication of how you want the layout to look like would be helpful. LastMitch's suggestion regarding an image would work fine.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.