Solved

css in asp menu

Posted on 2013-01-27
9
475 Views
Last Modified: 2013-01-29
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

0
Comment
Question by:JCWEBHOST
  • 5
  • 4
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38825872
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
 

Author Comment

by:JCWEBHOST
ID: 38825879
no i want to make it absoulte width
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38825905
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
 

Author Comment

by:JCWEBHOST
ID: 38825924
menu

i do not want to put 200px for the width
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:JCWEBHOST
ID: 38825949
you see what if the li text more than 200px
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 38825990
how hard is it to post your rendered html?

Do you want the  long text to  wrap?  add padding
0
 

Author Comment

by:JCWEBHOST
ID: 38826008
<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
 

Author Comment

by:JCWEBHOST
ID: 38826010
sorry but i do not want to pad it, want width to be auto please
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38831447
Did you figure this out?
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now