I have created a navigation menu which uses javascript. I have drop down menus in parts of the main menu but when I click on the arrow it only displays the drop down up to the end of the div (see image):
How can I get it so that the drop down appears on top. I have tried overflow: visible but this doesnt seem to work.
HTML:
<div id="top_bar">
<div id="top_inner">
<div id="logo"> <img src="images/logo.gif" alt="Ed Osborne" width="220" height="100" class="logo"></div>
<div class="nav">
<ul class = "menu" >
<li> <a href = "#" > Home </a> </li>
<li><a href = "#" > Tutorials </a>
<ul class = "submenu" >
<li> <a href = "#" > CSS </a> </li>
<li> Javascript </li>
<li> <a href = "#" > jQuery </a> </li>
<li> HTML </li>
<li> <a href = "#" > PHP </a> </li>
</ul>
</li>
CSS:
.nav {
margin: 0 auto;
position: relative;
padding-top: 85px;
}
ul.menu {
list-style: none;
padding: 0 22px;
margin: 0;
float: left;
background: #222;
font-size: 1.2em;
background: url(../images/topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.menu li ul.submenu li a {
float: left;
width: 145px;
background: #333 url(../images/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
You need to use Z-index in the submenu tag
ul.menu li ul.submenu {
z-index: 5000; // <-- ADD THIS
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
---- EDIT based on your comment below----
Wait - I think we are misunderstating you based on your comment- you want the submenu moved UP so it's above the existing menu? (as opposed to above the content on the page?) If so you need to do a negative margin-top on the submenu like this:
ul.submenu {
margin-top:-2em; // adjust me (use 'em' to scale w/ font size adjustments)
}
you need "position: absolute; " for this to work but you already have it on this class in your CSS
I believe the answer is z-index, but z-index only works on positoned elements. It shoukd work if you add
ul.menu li ul.submenu {
z-index: 5000;
position: relative;
}
Make sure that your overflow setting is set to :show.
I was having this same problem when I saw that mine was set to hidden.
Related
I have the following Html file, together with the CSS file. When I hover over the Main Navigation bar to open the drop-down menu, the parent width enlarges together with the drop-down menu. How can I fix this? If I set position: absolute to the dropdown menu, it will not work at all.(hovering doesn't trigger the dropdown). I have put my code here: https://jsfiddle.net/L67oxmqc/2/ .
Thank you!
Code:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h1 {
color: navy;
margin-left: 20px;
}
/* SECTION WITH THE heading text */
#boldtext {
color: Black;
border-radius: 15px;
background: #a9bcba;
padding: 10px;
width: 200px;
height: 50px;
}
/* SECTION WITH BILL GATES QUOTE */
#quotetext {
color: Black;
font-size: 18px;
border-radius: 15px;
padding: 30px;
width: 400px;
height: 150px;
}
div.quote {
position: absolute;
bottom: 5px;
right: 50px;
width: 30px;
/* border: 2px solid rgb(150,245,255);
opacity: 0.8;*/
}
/* SECTION WITH THE MENU FOR THE MAIN PAGE */
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #a9bcba;
/*z-index: -1; */
}
div.menu li {
float: left;
}
div.menu li a {
display: inline-block;
text-align: center;
margin: 0px;
padding: 10px 10px;
color: white;
}
div.menu li a:hover {
background-color: #879694;
color: blue;
}
/* SECTION WITH THE DROPDOWN CONTENT FOR THE MENU */
.dropdowncontent a:hover {
background-color: #cbd6d5
}
.dropdown:hover .dropdowncontent {
display: block;
}
div.dropdowncontent {
display: none;
/* position: absolute; */
background-color: #a9bcba;
width: 115px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
div.dropdowncontent a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
overflow: auto;
}
<br>
<!-- Header -->
<b id="boldtext">Welcome</b>
<br>
<br>
<br>
<!-- Menu bar-->
<div class="menu">
<ul>
<li class="dropdown">Boeing Family
<div class="dropdowncontent">
Boeing 737 class
Boeing 747 class
Boeing 787 class
</div>
</li>
<li>Airbus Family
</li>
<li>Others
</li>
<li style="float:right">Contact
</li>
<!-- The Contact button is set to be on the right side of the Navigation bar-->
</ul>
</div>
<div class="quote" id="quotetext">
<p><q><cite>A generic quote.</q>
</cite>
— Author.</p>
</div>
<!-- Boeing planes image that triggers the Boeing menu-->
<a href="Boeing.htm" </a>
<img src="Boeing-777-Generic-Nice.jpg" alt="Boeing picture" style="width:350px;height:150px;">
<!-- Airbus planes image that triggers the Airbus menu-->
<a href="Airbus.htm" </a>
<img src="A320-generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- ATR planes image that triggers the ATR menu-->
<a href="https://en.wikipedia.org/wiki/ATR_(aircraft_manufacturer)" </a>
<img src="ATR_generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- Link to the Frequently asked questions page-->
<a href=#>
<img src="question.jpg" alt="question image" style="width:350px;height:150px;">
</a>
<br>
<br>
Just update in your style may it works for you
div.menu ul {
background-color: #a9bcba;
border-radius: 5px;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
div.dropdowncontent {
background-color: #a9bcba;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
display: none;
position: absolute;
width: 115px;
}
Here is a JSFiddle of the solution I mention below: https://jsfiddle.net/2sy0dn6w/
Fixing your solution is incredibly simple. You want to use position: absolute; for your div.dropdowncontent CSS class. You also want to make your parent li tag have position: relative; to keep your div.dropdowncontent constrained within the parent li. And then you have an issue with your primary ul tag with using overflow: hidden. This would prevent your dropdown from being seen. And I understand why you are using overflow: hidden; - you're using it as a clearfix. But in this case, it is a problem because it hides your dropdown. So instead we would want to use :before with the ul for the clearfix. The steps for applying the fixes are below.
First, remove overflow: hidden; from your css for div.menu ul {}. This will create the following:
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
/* overflow: hidden; */
background-color: #a9bcba;
/*z-index: -1; */
}
Next, right after the div.menu ul {} CSS, add:
div.menu > ul::after {
clear: both;
display: table;
content: ' ';
overflow: hidden;
}
Lastly, at the very bottom of your CSS, add the following (you can even move each of the below to their designated declarations you already have in your CSS. The reason I'm adding this separate is so that it's more obvious what I included to give you the outcome you're looking for):
div.menu > ul > li {
position: relative;
}
.dropdowncontent {
position: absolute;
top: 100%;
}
li.dropdown:hover div.dropdowncontent {
display: block;
}
You have to use position absolute, you cant see it working because ul has overflow:hidden;
add this css :
.menu ul{
overflow:visible;
}
.menu ul li.dropdown{
position : relative;
}
.menu ul li.dropdown .dropdowncontent{
position : absolute;
top:38px;
left:0;
}
try this in your css:
add .menu class and remove bg-color from ul
.menu {
background-color: #a9bcba;
height: 45px;
}
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
//background-color: #a9bcba; <--- remove background
/*z-index: -1; */
}
Try this code below
Remove overflow hidden
div.menu ul{
...
overflow: hidden;
}
Add position absolute
div.dropdowncontent {
...
position: absolute;
}
replace float left
div.menu li{
/* float: left; */
display: inline-block;
}
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h1 {
color: navy;
margin-left: 20px;
}
/* SECTION WITH THE heading text */
#boldtext {
color: Black;
border-radius: 15px;
background: #a9bcba;
padding: 10px;
width: 200px;
height: 50px;
}
/* SECTION WITH BILL GATES QUOTE */
#quotetext {
color: Black;
font-size: 18px;
border-radius: 15px;
padding: 30px;
width: 400px;
height: 150px;
}
div.quote {
position: absolute;
bottom: 5px;
right: 50px;
width: 30px;
/* border: 2px solid rgb(150,245,255);
opacity: 0.8;*/
}
/* SECTION WITH THE MENU FOR THE MAIN PAGE */
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #a9bcba;
/*z-index: -1; */
}
div.menu li {
display: inline-block;
}
div.menu li a {
display: inline-block;
text-align: center;
margin: 0px;
padding: 10px 10px;
color: white;
}
div.menu li a:hover {
background-color: #879694;
color: blue;
}
/* SECTION WITH THE DROPDOWN CONTENT FOR THE MENU */
.dropdowncontent a:hover {
background-color: #cbd6d5
}
.dropdown:hover .dropdowncontent {
display: block;
}
div.dropdowncontent {
display: none;
position: absolute;
background-color: #a9bcba;
width: 115px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
div.dropdowncontent a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
overflow: auto;
}
<br>
<!-- Header -->
<b id="boldtext">Welcome</b>
<br>
<br>
<br>
<!-- Menu bar-->
<div class="menu">
<ul>
<li class="dropdown">Boeing Family
<div class="dropdowncontent">
Boeing 737 class
Boeing 747 class
Boeing 787 class
</div>
</li>
<li>Airbus Family
</li>
<li>Others
</li>
<li style="float:right">Contact
</li>
<!-- The Contact button is set to be on the right side of the Navigation bar-->
</ul>
</div>
<div class="quote" id="quotetext">
<p><q><cite>A generic quote.</q>
</cite>
— Author.</p>
</div>
<!-- Boeing planes image that triggers the Boeing menu-->
<a href="Boeing.htm" </a>
<img src="Boeing-777-Generic-Nice.jpg" alt="Boeing picture" style="width:350px;height:150px;">
<!-- Airbus planes image that triggers the Airbus menu-->
<a href="Airbus.htm" </a>
<img src="A320-generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- ATR planes image that triggers the ATR menu-->
<a href="https://en.wikipedia.org/wiki/ATR_(aircraft_manufacturer)" </a>
<img src="ATR_generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- Link to the Frequently asked questions page-->
<a href=#>
<img src="question.jpg" alt="question image" style="width:350px;height:150px;">
</a>
<br>
<br>
so basically I've got this code: HTML and CSS below, using bootstrap as well, and for some reason, it's not centred. It used to be, but at some point it wasn't anymore, now it pulls to the left. See image below. Any ideas?
<div class="row" id="nav-bar">
<div class="col-md-9">
<ul>
<li class="col-md-3 nav-btn" id="home">Home</li>
<li class="col-md-3 nav-btn" id="about">About</li>
<li class="col-md-3 nav-btn dropdown-toggle" id="games">
Games & Apps ▼
<div class="dropdown">
<ul>
<li>Games & Apps ▼</li>
<li id="first">Space Rodeo</li>
<li id="spaced">Boodya's Carpet Ride</li>
<li id="spaced">Ultimate Points Counter</li>
</ul>
</div>
</li>
<li class="col-md-3 nav-btn" id="blog">Blog</li>
</ul>
</div>
</div>
#nav-bar {
margin: 0px 0px 10px 0px;
height: 60px;
}
#nav-bar ul {
margin-top: 20px;
}
.col-md-3 a {
padding: 15px 40px 15px 40px;
font-size: 20px;
text-decoration: none;
text-align: center;
color: #B6B6B6;
}
#nav-bar a:hover {
color: #428bca;
}
.col-md-3 {
display: inline;
}
.col-md-9 {
float: none;
margin: auto;
left: 0;
right: 0;
}
.dropdown {
padding: 0;
margin-top: -48px;
position: absolute;
z-index: 10;
background-color: #ffffff;
box-shadow: -5px -5px 20px;
border-radius: 5px;
height: 210px;
width: 275px;
}
.dropdown ul {
padding: 0;
margin-top: 0;
}
.dropdown li {
list-style: none;
padding: 0;
width: 310px;
}
#games2 {
color: #428bca;
}
#spaced {
margin-top: 10px;
}
#first {
padding-top: 20px;
border-top: 1px solid black;
margin-top: 22px;
}
Showing result of code, the navbar is off centre
http://i.stack.imgur.com/smtTP.png
Your list items are display: inline which means they'll follow the alignment rules of text. Since you set no text-align, it defaults to the left. You can fix that by adding text-align: center to your ul so the contents will be centered.
Now the insides of the dropdown will also inherit that, you can reset that by setting text-align: left back on the dropdown ul again.
Also reset the left padding that ul has by default.
#nav-bar ul {
padding-left: 0;
text-align: center;
}
#nav-bar .dropdown ul {
text-align: left;
}
Works in this jsFiddle
I am trying to implement a:hover effect as in attached image.But i have missed something it is not working .can you please correct me.
HTML code:
<ul class="short-by-list">
<li class="right-mrgn">Make</li>
<li>
<a onclick="ajaxSearchLoad(5,49)" href="javascript:void(0)">
<img class="SortPosition" alt="ascending" src="../images/nav-arrow.png">
</a>
<div class="tooltip-text" style="display: none;">
<img class="tooltip-arrow" alt="Arrow" src="../images/tooltip-arrow.png">
Sort by Ascending
</div>
</li>
<li class="last">
</ul>
CSS:
.short-by-list {
background: url("../images/short-bg.png") no-repeat scroll 0 0 transparent;
float: left;
height: 21px;
margin: 0 6px 15px 0;
padding: 0 6px 0 10px;
width: 79px;
}
.short-by-list li {
color: #FFFFFF;
display: block;
float: left;
line-height: 21px;
position: relative;
}
.short-by-list li .tooltip-text {
left: -38px;
}
.short-by-list li.last .tooltip-text {
left: -40px;
}
.short-by-list li.right-mrgn {
margin-right: 9px;
min-width: 29px;
}
.short-by-list li a {
display: block;
float: left;
padding: 0 6px;
text-decoration: none;
}
.short-by-list li:hover a, .short-by-list li.select a {
background: url("../images/bg-hover.png") repeat-x scroll 0 0 transparent;
}
.short-by-list li.select .tooltip-text {
display: block !important;
}
In .short-by-list li, try adding height:21px;
I am suspecting that it is because the inner <img> element has been floated, therefore the height of the <a> element collapses. Try setting overflow: hidden for <a>.
If it all fails, set an explicit height for <a>.
I have a drop down menu which is appearing behind my image transition gallery div. Below is the image of what it looks like and the HTML and CSS for it.
HTML:
<body>
<div id="top_bar">
<div id="top_inner">
<div id="logo"> <img src="images/logo.gif" alt="Ed Osborne" width="225" height="115" class="logo"></div>
<div class="nav">
<ul class = "menu" >
<li> <a href = "#" > Home </a> </li>
<li><a href = "#" > Packages </a>
<li><a href = "#" > Weddings </a>
<li><a href = "#" id="left" > Lifestyle </a>
<ul class = "submenu" >
<li> <a href = "#" > Families </a> </li>
<li> Newborn/Child </li>
<li> <a href = "#" > Portraits </a> </li>
</ul>
</li>
<li> <a href = "#" > Blog </a> </li>
<li> Abous Us
<ul class = "submenu" >
<li> <a href = "#" > Ed Osborne </a> </li>
<li> <a href = "#" > Testimonials </a> </li>
<li> <a href = "#" > FAQs </a> </li>
</ul>
</li>
<li> <a href = "#" > Contact Us </a> </li>
<li> <a href = "#" > Links </a> </li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="smart-gallery">
<a href="images/cubagallery-img-1.jpg">
<img src="images/cubagallery-img-1.jpg" /></a>
<a href="images/cubagallery-img-15.jpg">
<img src="images/cubagallery-img-15.jpg" /></a>
<a href="images/cubagallery-img-3.jpg">
<img src="images/cubagallery-img-3.jpg" /></a>
<img src="images/cubagallery-img-4.jpg" /></a>
</div>
</div>
CSS:
.min-gallery
{
width: 927px;
height: 615px;
border: solid 1px black;
background-color: Black;
background: url(../images/bg.jpg);
margin: auto;
margin-left: 232px;
}
.min-gallery .preview
{
width: 852px;
height: 493px;
margin-top: 36px;
margin-left: 36px;
margin-right: 36px;
position: relative;
border: solid 2px black;
overflow: hidden;
background-color: White;
}
.min-gallery .preview img
{
/* width: 795px; height: 525px;*/
position: absolute;
}
.min-gallery .bottom
{
width: 100%;
height: 98px;
color: Gray;
font-family: Arial;
font-size: 1em;
font-weight: bold;
overflow: hidden;
}
#top_bar {
width: 100%;
height: 145px;
background: #000000;
padding-bottom: 20px;
}
#top_inner {
text-align: center;
margin: 0 auto;
width: 1000px;
height: 144px;
}
.nav {
margin: 0 auto;
position: relative;
padding-top: 100px;
}
ul.menu {
list-style: none;
margin: 0;
float: left;
background: #222;
font-size: 1.2em;
background: url(../images/topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
position: relative;
}
ul.menu li a{
padding: 10px 18px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a#left{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover {
background: url(../images/topnav_hover.gif) no-repeat center top;
}
ul.menu li span {
width: 11px;
height: 35px;
float: left;
background: url(../images/subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {
background-position: center bottom; cursor: pointer;
}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.menu li ul.submenu li a {
float: left;
width: 122px;
padding-left: 30px;
text-align: left;
}
When I remove position:absolute from .min-gallery .preview img, the drop down menu appears on top which is how I want it but the images do stop changing and just stick on one image.
Anyone got a quick fix? Sorry about the pasting of all the code but I dont know how else I can express my point to you guys
Thanks
set the higher z-index of drop down menu .
.submenu { z-index: 999; }
reason "An element with greater stack order is always in front of an element with a lower stack order."
Use a z-index for your drop down menu.
.submenu { z-index: 1; }
Also, as a side note, if you are using prefixed properties you should also use the spec property as well which should appear last after the vendor specific prefixes. Example:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
When a vendor supports the standard property, you don't have to change your code.
Find the overflow property in the parent or in the child element and remove the overflow property.
You are welcome
Use
.submenu { z-index: 1;position :relative}
I have a horizontal menu navigation.
The code is:
<div class="menu-holder">
<ul class="menu">
<li>
Home
</li>
<li>
Profile
</li>
<li>
Billing
<ul class="submenu">
<li>New</li>
<li>Find</li>
</ul>
</li>
<li>
Workspaces
</li>
<li>
Manage Leaves
</li>
<li>
Blogs
</li>
<li>
News
</li>
<li>
Search
</li>
<li>
Albums
</li>
</ul>
</div>
The CSS:
ul.menu {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 960px;
background: #222;
font-size: 1.2em;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 10px;
behavior: url(CSS3PIE);
}
ul.menu li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.menu li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover{
background: url(Images/topnav_hover.gif) no-repeat center top;
}
ul.menu li span {
width: 17px;
height: 35px;
float: left;
background: url(Images/subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {background-position: center bottom; cursor: pointer;}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 44px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #111;
behavior: url(CSS3PIE);
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.menu li ul.submenu li a {
float: left;
width: 145px;
background: #333 url(Images/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.menu li ul.submenu li a:hover {
background: #222 url(Images/dropdown_linkbg.gif) no-repeat 10px center;
}
There is also jQuery has been used to create this navigation.
Now I want to make the li completely cover ui. But without applying fixed width to li. Because there is also another menu item(not in picture) which will be visible depending on the role of the logged in user.
Is it possible?
I believe the best way to solve this is to use display: table/table-cell instead of float: left. Here's a fiddle: http://jsfiddle.net/nk7yY/
Basically, what you'd change in your code is:
ul.menu {
display: table;
width: 100%; /* Tables are not 100% width like block elements */
/* Everything you already had except float: left; which I don't really get why you have to begin with */
}
ul.menu li {
display: table-cell;
/* Everything you already had except float: left; */
}
ul.menu li a {
/* Just remove the float here as well */
}
Edit: This won't work in old IE though, but you can keep the float for them (with a *float hack for example).
Are you saying you have 9 ul.menu li elements and there will some times be a 10th? and that you want all 9 (or 10) together to fill the width of the ul.menu?
or are you talking about the ul.submenu?
Just saying "make the li completely cover ui" also sounds like you want a single <li> to cover the entire width of the navigation ui (assuming its your <ul> and not some other parts of your UI.
Is this what your trying to do? or do you just want all 9 or 10 <li> items to fill the space of the <ul> ?
If so you should probably put a class on <ul class="menu"> which changes depending on the role of the logged in user so that you can adjust the styling accordingly.
Supply a bit more information on what your attempting to do and what browsers your wanting to support i.e. for CSS3.