css in asp menu

hey guy i have a menu which i populate dymanically, now i can not get the 3rd menu item to be set with making the .menu ul li ul li:hover ul left to 200px, but i do not want to set it to 200px, what if the the item is more.


please help

i will post my code

.menu
{
	font-family: 'ABeeZee' , sans-serif;
	margin: 0px;
	padding: 0px;
	font-size: 12px !important;
	line-height: 38px !important;
	width: 100%;
}

.menu ul
{
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block;
}

.menu li
{
	font-size: 12px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 38px !important;
	float: left;
	position: relative;
}

.menu ul li:hover
{
	background-color: #333333;
}

.menu li a
{
	padding: 0px 13px 0px 13px;
	color: #AAAAAA;
	text-align: left;
}

.menu li a:hover
{
	color: #FFFFFF;
	cursor: pointer;
}

.menu ul li ul
{
	height: auto;
	background-color: #333333;
	width: auto;
	z-index: 99;
}

.menu ul li:hover ul
{
	display: inline-block;
}

.menu ul li ul li
{
	width: 100%;
	white-space: nowrap;
}

.menu li li
{
	display: block;
	float: none;
}

.menu li ul a
{
	color: #AAAAAA;
	padding: 0px 18px 0px 18px !important;
	width: 100%;
	display: block;
}

.menu ul li ul
{
	background-color: #333333;
}

.menu ul li ul li:hover ul
{
	z-index: 99;
	width: 100%;
}

.menu li ul li ul a:hover
{
	color: #FFFFFF;
}

Open in new window



<asp:Menu ID="mnu" DataSourceID="xmlDataSource" runat="server" Orientation="Horizontal" CssSelectorClass="menu" RenderingMode="Table" OnMenuItemClick="mnu_MenuItemClick">
                                        <DataBindings>
                                            <asp:MenuItemBinding DataMember="MenuItem" TextField="Text" ValueField="Id" ToolTipField="Parent_Id" />
                                        </DataBindings>
                                    </asp:Menu>

Open in new window

JCWEBHOSTAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
how hard is it to post your rendered html?

Do you want the  long text to  wrap?  add padding
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
can you please post your rendered code.

It is probably line 48 in your code that needs to be changed from

.menu ul li ul
{
      height: auto;
      background-color: #333333;
      width: auto;
      z-index: 99;
}

to

.menu ul li ul
{
      height: auto;
      background-color: #333333;
      width: 200px;
      z-index: 99;
}
0
 
JCWEBHOSTAuthor Commented:
no i want to make it absoulte width
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Please post your rendered html.  What do you mean by absolute width?


.menu ul li ul li
{
      width: 200px;
      white-space: nowrap;
}
http://jsbin.com/iwuqiy/1/edit
  <div class="menu">
<ul>
<li><a  href="#">item</a></li>
<li><a  href="#">item</a>
<ul>
<li><a  href="#">sub</a></li>
<li><a  href="#">sub</a></li>
<li><a  href="#">sub</a></li>

</ul>
</li>
</ul>
</div>
0
 
JCWEBHOSTAuthor Commented:
menu

i do not want to put 200px for the width
0
 
JCWEBHOSTAuthor Commented:
you see what if the li text more than 200px
0
 
JCWEBHOSTAuthor Commented:
<div class="menu" id="ctl00_Contents_mnu">
		<div class="AspNet-Menu-Horizontal">
				<ul class="AspNet-Menu">
					<li class="AspNet-Menu-WithChildren">
						<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1')" class="AspNet-Menu-Link" title="Products">
							Products</a>
						<ul>
							<li class="AspNet-Menu-Leaf">
								<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1\\2')" class="AspNet-Menu-Link" title="The Real Thing">
									The Real Thing</a>
							</li>
							<li class="AspNet-Menu-Leaf">
								<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1\\4')" class="AspNet-Menu-Link" title="Salt of the Earth">
									Salt of the Earth</a>
							</li>
							<li class="AspNet-Menu-Leaf">
								<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1\\5')" class="AspNet-Menu-Link" title="Future Life">
									Future Life</a>
							</li>
							<li class="AspNet-Menu-Leaf">
								<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1\\6')" class="AspNet-Menu-Link" title="QUANTUM Japanese Technology">
									QUANTUM Japanese Technology</a>
							</li>
							<li class="AspNet-Menu-Leaf">
								<a href="javascript:__doPostBack('ctl00$Contents$mnu','b1\\28')" class="AspNet-Menu-Link" title="ritesh">
									ritesh</a>
							</li>
						</ul>
					</li>
				</ul>

		</div>
	</div>

Open in new window

0
 
JCWEBHOSTAuthor Commented:
sorry but i do not want to pad it, want width to be auto please
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Did you figure this out?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.