|
CSS - Css Drop Down List Inside An Iframe
I have an iframe that contains a CSS drop down list and I'm having problems getting the drop down list to display beyond the bottom of the iframe. The drop down list cuts off at the bottom of the iframe. Is it possible for a css drop down list to display beyond the borders of an iframe? I've experimented with z-index and have not had any luck yet. Any ideas?
Similar TutorialsIs it possible to overide a websites default css when you display it in an iframe? if so how is this done? I have found the following javascript but it doesn't seem to do anything (maybe im using it incorrectly...) Code:
var cssLink = document.createElement("link") cssLink.href = "test.css";
cssLink .rel = "stylesheet"; cssLink .type = "text/css";
frames['tbl'].document.body.appendChild(cssLink);
i have an iframe that points to some random ad pages, but the ads that come up are basic html and the browser gives them some default padding. is there a trick (besides editing the actual HTML in those ad pages) to make that padding go away? here is a html page with iframe (index.html): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>iframe</title>
<style type="text/css">
#framebox{
width:200px;height:150px;
border-style:solid;border-color:#000;border-width:1px;
}
</style>
</head>
<body>
<div>
<iframe id="framebox" name="framebox" src="iframe.html" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</div>
</body>
</html>
and this is a iframe page(iframe.html): Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#text{
background-color:#00f;
border-style:dotted;border-color:#f00;border-width:1px;
}
</style>
</head>
<body>
<div id="text">sample text sample text sample text sample text</div>
</body>
</html>
run this example. the text inside #text(the div inside iframe page) is intentionally written with and iframe is given specific width and height to make iframe scroll. What happens in firefox(in opera too) is that #text div does not strech to fill entire text string but instead has width equal to width of iframe and the text kind of overflowing the div. But in ie #text div is expanding to include entire text string. IMHO is that in this specific case ie seems to be right... well, i know that ie wrongly expands containers dimentions if content is too big BUT not in this case... #text div DOES NOT have any stated dimentions so that means that i want it to adopt for whatever dimensions the content has... What do you think? So I have an ad that is being served via an IFRAME. The src of the iframe has a few places where I can change colors as the css is dynamic based on the query string. There is one css element that is not supported with the user option to change the color and I want to try and override it. Obviously inline styles override embedded styles, but the element I need to override is span.price { color:#990000; } and that is within the source of the iframe. Is there a way to override this? Hi, I was wondering if it's possible to space out seperate blocks of text within a <ul> element? So for instance: Code: <ul> <li>Caption1 Caption2 Caption3</li> </ul> In that code I want to have each word spaced out a set amount. I guess I'm basically trying to emulate table rows, but I can't use tables for what I'm trying to do. Damn another problem good thing you guys are so helpful.... What am I doing wrong here? css Code: #footer{
position:relative;
z-index:-1;
margin-top:-50px;
background-color:#666666;
width:100%;
height:100px;
margin-left:auto;
margin-right:auto;
border-top:#000000 10px solid;
}
#footer ul{
position:absolute;
padding:0px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#footer li{
display:inline;
padding:0px;
margin:0px;
}
#footer a{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
border-right:#FFFFFF 1px solid;
}
html Code: <div id="footer">
<ul>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
<li><a href="#">Nav 4</a></li>
<li><a href="#">Nav 5</a></li>
<li><a href="#">Nav 6</a></li>
<li><a href="#">Nav 7</a></li>
</ul>
</div>
Just can't seem to get the list centered inside the div Hi All, You may have come across this several times and may heard of people complain about this several times too. But unfortunately, after browsing 30 websites in my google search, I tried everything and cant seem to get it to work. Basically, I have a CSS drop down on my website (Site is made up of HTML/CSS and uses nested DIVs throughout). When I have a iframe (width=100%), below the horizontal navigation at the top, it just doesnt hover over it. Part of the drop down menu hides behind the iframe. I have constantly read to have parent menu item have a z-index as a higher value than all child divs, provided there is a position set (which i do! - position:relative; ). But still no luck! My CSS Code: .menu1 { float:left; z-index:30; margin-top: 0; margin-right: 0; margin-bottom: 20px; margin-left: 0; position:relative; } .menu1 ul { margin:0; list-style-type:none; z-index:25; } .menu1 ul li { float:left; position:relative; background-image: url(../images/layout/img_dash.gif); background-repeat: no-repeat; background-position: right; z-index:20; } .menu1 ul li a, .menu1 ul li a:visited { float:left; display:block; text-decoration:none; color:#fff; line-height:35px; padding-top: 0px; padding-right: 16px; padding-bottom: 0px; padding-left: 16px; z-index:20; } My HTML: <!-- horizontal navigation--> <div id="menuh-container"> <div class="left"> </div> <div class="right"> </div> <div class="menu1"> <ul> <li><a class="menu1one" href="index.html">Home </a> </li> <li><a class="menu1one" href="commsadvisory.html">Comms Advisory </a> </li> <li><a class="menu1one" href="emailreports.html">Email Reports </a> </li> <li><a class="menu1one" href="overnightreports.html">Incident Reports </a> </li> <li><a class="menu1one" href="morninghealthcheck.html">Morning Healthcheck </a> </li> <li><a class="menu1one" href="#nogo">TOC Tools <!--[if IE 7]><!--></a><!--<![endif]--> <table> <tr> <td><ul> <li><a href="#nogo">Autosys</a></li> <li><a href="#nogo">Bing Web</a></li> <li><a href="#nogo">Handover</a></li> <li><a href="#nogo">IPM Search (New Window)</a></li> <li><a href="#nogo">Sharepoint</a></li> <li><a href="#nogo">Reserved Bridges</a></li> <li><a href="#nogo">RSA Console</a></li> <li><a href="#nogo">Ticket Builders</a></li> <li><a href="#nogo">Uptime Tool</a></li> <li><a href="#nogo">User Admin</a></li> </li> </ul></td> </tr> </table> <!--[if lte IE 6]></a><![endif]--> </a> </li> <li><a class="menu1one" href="#nogo">Contacts <!--[if IE 7]><!--></a><!--<![endif]--> <table> <tr> <td><ul> <li><a href="#nogo">Sub Link 1</a></li> <li><a href="#nogo">Sub Link 2</a></li> <li><a class="drop" href="#nogo">Sub Link 3 <!--[if IE 7]><!--></a><!--<![endif]--> <table> <tr> <td><ul> <li><a href="#nogo">Sub sub Link 1</a></li> <li><a href="#nogo">Sub sub Link 2</a></li> </ul></td> </tr> </table> <!--[if lte IE 6]></a><![endif]--> </li> <li><a href="#nogo">Sub Link 4</a></li> <li><a href="#nogo">Sub Link 5</a></li> </ul></td> </tr> </table> <!--[if lte IE 6]></a><![endif]--> </li> </ul> </div> </div> <!-- horizontal navigation end --> <!-- main - content area--> <div id="contentBottomNLHS"> <div id="masterContent" class="col3"> <div class="content" > <div class="tabber"> <div class="tabbertab"> <h2>Start/Close of Day Handover EU-APAC</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/RegionalHandover.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>Start/Close of Day Handover EU-US</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/EU_USRegionalHandover.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>EU-Asia Networks Report</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/AsiaEUShiftHandover.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>EU Daily Network Changes</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/NetworkCHG.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>US Unix/Linux Report</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/default.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>Daily Incident Review</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/DIRMM.aspx" scrolling="auto" height="720px"></iframe> </div> </div> ----------------------------------------------------------- My website is internal one for work, and is not uploaded anywhere so unfortunately cannot provide a link for you to view it. Thanks! Hi all, I was wondering if someone could help me, or point me in the right direction. I am working on a site where I want to use a list based menu for the navigation structure. The first level is vertical on the left hand side of the page, the second level horizontal, and third level drops down vertically underneath. The main content currently is in an Iframe taking up most of the page. The system displays properly in Netscape, and still has a few problems in IE. However my main problem is this. When the menu crosses the IFrame it displays, but then when the mouse moves over the menu/iframe, the Iframe takes the focus and the menu disappears. Setting the Z-index has no effect. Is there a way to fix this, or an alternative to the IFrame? Thanks Wedgetail I found this example on the web for a drop down list, I was wondering if anyone knows how I would go about fixing it to work for IE as well, it's perfect in firefox. Even if doesn't show the sub items in IE it won't be a problem, just as long as the main items are shown. I like this example because it doesn't use javascript, I've found ones that works in IE but they use JS I'd prefer to use just CSS. Thanks for reading. [html]<ul class="nav"> <li><strong><a href="">main</a></strong> <ul> <li><a href="">sub</a></li> <li><a href="">sub</a></li> <li><a href="">sub</a></li> <li><a href="">sub</a></li> </ul> </li></ul>[/html] Code:
/*Nav bar styles*/
ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
width: 100%;
table-layout: fixed;
}
ul.block{
width: 100%;
table-layout: fixed;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/
ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.nav li:hover>ul{
display : block;
}
.nav ul li a{
display: block;
padding: 2px 10px;
}
/*Menu styles*/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}
.nav a{
text-decoration: none;
}
I have read more tutorials on list than I care to recall and still I am having difficulties getting this to work right. Here is the web page The top navigation bar has a link "Other regions". I want to have a drop down list of the other regions under it. I nested a list under the "Other regions" li. It is working - sort of but not correctly. The nested list is showing up under "home" and the are all on top of each other. Here is the html: Code: <div id="topbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about_us/about_us.html">About Us</a></li>
<li class="dropmenu"><a href="other_regions.html">Other Regions</a>
<ul>
<li><a href="#">Ireland</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">USA (North America)</a></li>
<li><a href="#">Latin America</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
</ul>
</div>
Here is the css: Code: #topbar {
height: 20px;
background-color: #3399FF;
border: 1px solid #000099;
padding-left: 10px;
margin-bottom: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
color: #FFFFFF;
background-color: transparent;
border: 1px solid #3399FF;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#topbar a:hover, #topbar a:active {
color: #000099;
background-color: #DDEEFF;
border: 1px solid #000099;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#topbar ul {
list-style: none;
margin: 1px 0px 1px 0px;
padding: 2px 0px 0px 0px;
}
#topbar li {
display: inline;
margin-right: 150px;
}
.dropmenu ul {
position: relative;
}
.dropmenu li {
position: absolute;
}
.dropmenu a:link, .dropmenu a:visited {
color: #000000;
background-color: transparent;
border: 1px solid #FF00FF;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.dropmenu a:hover, .dropmenu a:active {
color: #000099;
background-color: #DDEEFF;
border: 1px solid #000099;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.dropmenu li:hover ul { display: block; }
/*Main Section two columns under top section*/
#wrapper{
width: 100%;
min-height: 519px;
background: url(../images/bgcol.gif) repeat-y;
padding: 0px;
margin: 0px;
}
Help please Hello, I am trying to create a drop down list with a label, and have them align. I simply want the label to display left of the drop list. I can't seem to get them to do it. It sits inside a topoptsbox div tag (css below). Code: <form name="bpmform"> <label for="bpmfrom" class="bpmddl">BPM From</label> <select class="bpmddl" id="bpmfrom" name="bpmfrom"> <option id="0from" value="0">0</option> <option id="50from" value="50">50</option> <option id="100from" value="100">100</option> <option id="150from" value="150">150</option> </select> </form> Code:
#topoptsbox {
border-style: inset;
border-width: 1px;
width: 1000px;
height: 80px;
float: left;
display: block;
}
on my site i have a few drop down boxes, ive used css to change the textboxes and submit buttons, but is there a way to change the arrows/buttons on a drop down list? For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas? Code: input[type="text"], select {
color:#888888;
font-size:10px;
height:auto;
}
Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Hi, Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side? /Hubba Bubba Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code:
<ul id="nav">
<li class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
<li class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>
here is my all related css, external css file, Code:
#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;}
/* All Levels */
#nav li { text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
/* 0 Level */
#nav li { clear:both; position:relative; display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
#nav ol { margin-left:5px; margin-bottom:10px; }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }
inline css code to overwrite the default behavior for target page Code:
ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
ul#nav ol li a { padding:0px; }
ul#nav ol li { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; }
I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. Hi, I have an OL list (the numbered one) and the horz gap between the list item number (as automatically generated by OL) and the text of the LI is too big (according to client). Looks fine in FF but is bigger alright on IE (ahem naturally .....) I've played with the CSS for both the OL & LI styles even setting all margins and paddings to 0 but without effect on the gap. Is there any way to style that gap? Code below. Kevin <ol class="most_read"> <li class="most_read_li">Apples</li> <li class="most_read_li">Oranges</li> </ol> .most_read { text-align:left; color:#808080; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal; margin-left:30px; padding:0px; margin-top:5px; } .most_read_li { margin-bottom:7px; margin-right:7px; } Hi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer
{
width: 200px;
margin-top:150px;
}
#navcontainer ul#navlist
{
width:200px;
clear:left;
text-align:left;
margin-left:0;
padding-left:0;
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;
}
#navcontainer ul#navlist li
{
margin-left:0;
padding: 0px;
display: block;
list-style:none;
border-bottom: 1px solid gray;
}
#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}
a.linkText {
padding: 10px;
display: block;
color : #444444;
font-family : arial;
font-size : 11px;
font-weight : bold;
text-decoration : none;
height:25px;
}
a.linkText:link {
color : Aqua;
/* you can define other styles if necessary */
}
a.linkText:visited {
color : Maroon;
/* you can define other styles if necessary */
}
a.linkText:hover {
color : Blue;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="linkText" href="#">Item One</a></li>
<li><a class="linkText" href="#">Item two</a></li>
<li><a class="linkText" href="#">Item three</a></li>
<li><a class="linkText" href="#">Item four</a></li>
<li><a class="linkText" href="#">Item five</a></li>
</ul>
</div>
The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks Hey guys , I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" . The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated , Code:
ul#css3menu,ul#css3menu ul{
margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;}
ul#css3menu ul ul{
position:absolute;left:98%;top:-2px;}
ul#css3menu{
padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0 0 0 6px;}
ul#css3menu ul>li{
margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
float:none;margin:0;}
ul#css3menu ul a{
text-align:left;}
ul#css3menu li:hover>a{
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
width:16px;height:16px;}
ul#css3menu img.over{
display:none;}
ul#css3menu li:hover > a img.def{
display:none;}
ul#css3menu li:hover > a img.over{
display:inline;}
ul#css3menu ul span{
background-image:none;padding-right:16px;}
ul#css3menu li.topitem>a{
background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end Colorstr=#B355AA00)}
ul#css3menu li.subfirst>a{
border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;}
ul#css3menu li.sublast>a{
border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}
And here is the html Code: <ul id="css3menu"> <li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a> <ul> <li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li> </ul> </li> <li><a href="#" title="Item 0 1"><span>Item 0 1</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li> </ul> </li> <li><a href="#" title="Item 0 2"><span>Item 0 2</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li> </ul> </li> <li><a href="#" title="Item 0 3"><span>Item 0 3</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li> </ul> </li> <li><a href="#" title="Item 0 4"><span>Item 0 4</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li> </ul> </li> <li><a href="#" title="Item 0 5"><span>Item 0 5</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li> </ul> </li> <li><a href="#" title="Item 0 6"><span>Item 0 6</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li> </ul> </li> <li><a href="#" title="Item 0 7"><span>Item 0 7</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li> </ul> </li> <li><a href="#" title="Item 0 8"><span>Item 0 8</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li> </ul> </li> <li><a href="#" title="Item 0 9"><span>Item 0 9</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li> </ul> </li> <li><a href="#" title="Item 0 10"><span>Item 0 10</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li> </ul> </li> <li><a href="#" title="Item 0 11"><span>Item 0 11</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li> </ul> </li> <li><a href="#" title="Item 0 12"><span>Item 0 12</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li> </ul> </li> <li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li> </ul> </li> </ul> </li> </ul> This is probably a tall order any advice is appreciated , TYVM |
|||||||