Solved

css in asp menu

Posted on 2013-01-27
9
476 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

Author Comment

by:JCWEBHOST
ID: 38825924
menu

i do not want to put 200px for the width
0
 

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

785 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