I have this kind of menu structure
<nav id="navigation">
<ul class="menu">
<li class="current-menu-item currrent_page_item">Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
and a css for the menu
#navigation{float: right; padding: 10px 0px; display: block;}
#navigation li{float: left; display: inline;}
#navigation li a{
padding: 10px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block;
}
#navigation li{
padding: 0px 2px;
border-left: 1px solid #292929;
border-right: 1px solid #605f5f;
}
#navigation li:first-child{
border-left: none !important;
}
#navigation li:last-child{
border-right: none !important;
}
.current-menu-item a, .current_page_item a{
background: #414141;
border: 1px solid #4b4b4b !important;
border-bottom: 1px solid #323232 !important;
-moz-box-shadow: inset 0 0 10px #353333;
-webkit-box-shadow: inset 0 0 10px #353333;
box-shadow: inset 0 0 10px #353333;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior:url('border-radius.htc');
}
as you can see in styling, it produced a menu with a left and right border and a pushed like background with box shadow in the current menu, my problem is, the borders in the both left and right side of the menu looks ugly when the current menu is on between and I want to get rid of those borders. I mean for example, when the current menu is the About menu, now the left side border of the Contact menu must be removed as well as the right side border of the Portfolio menu, in that way things will look neat and cool.
Currently Im looking for a way on how to make it that way but no luck so far.
You can do this with pure CSS as follows (see JSFiddle here):
#navigation {
float: right;
padding: 10px 0px;
display: block;
}
#navigation li {
float: left;
display: inline;
}
#navigation li a {
padding: 10px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block;
}
#navigation li {
padding: 0px 2px;
border-left: 2px solid #292929;
}
#navigation li:first-child,
.current-menu-item,
.current_page_item,
.current-menu-item + li,
.current_page_item + li
{
border-left: none !important;
}
.current-menu-item a,
.current_page_item a {
background: #414141;
border: 1px solid #4b4b4b !important;
border-bottom: 1px solid #323232 !important;
-moz-box-shadow: inset 0 0 10px #353333;
-webkit-box-shadow: inset 0 0 10px #353333;
box-shadow: inset 0 0 10px #353333;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior:url('border-radius.htc');
}
Basically, the idea is this:
Only use border-left
Remove the border on
The first item (#navigation li:first-child)
The current item (.current-menu-item, .current_page_item)
The item immediately following the current item (.current-menu-item + li, .current_page_item + li)
You could use a bit of jquery:
$('.current-menu-item').css('border','none');
$('.current-menu-item').next('li').css('border-left','none');
$('.current-menu-item').prev('li').css('border-right','none');
Demo: http://jsfiddle.net/sDFzS/
Related
I have created an li item with Html.ActionLink which renders ultimately as an anchor tag. I have applied CSS for hover and it works perfectly fine.
Now I need to highlight the li box when I click on it. I have used jQuery but that doesn't seem to work. I have checked the debugger tools and there doesn't seem to be any errors. So I guess it's the case that the class is not getting applied. I'm Not sure what the problem is. Please see my code below.
$(document).ready(function() {
$('#navcontainer ul li a').click(function() {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li a:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 3em 1em 1em;
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
.highlightMenu {
color: #fff !important;
background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li>#Html.ActionLink("Team Management", "Team", "Admin", null, null)</li>
<li>#Html.ActionLink("User Management", "UserProfile", "Admin", null, null)</li>
</ul>
</div>
You should read about CSS Specificity: your .highlightMenu {} selector will never be applied, because .#navcontainer ul li {} selector is more specific. Prefer Class selectors, check out BEM methodology.
From MDN about !important:
Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.
If you want to set .highlightMenu class to <li> when clicking on <a>, you could use jQuery .closest() for it.
If you add list items dynamically, you could use Event Delegation.
I've cleaned your code and rewritten it in BEM-style with the fixes, check out:
$('.nav').on('click', '.nav__link', function() {
$('.nav__item_selected').removeClass('nav__item_selected');
$(this).closest('.nav__item').addClass('nav__item_selected');
});
.nav {
display: block;
list-style-type: disc;
padding-top: 40px;
}
.nav__item {
display: inline-block;
border: 5px solid #009ddc;
padding: 0;
background: #fff;
color: #24387f;
}
.nav__item:hover, .nav__item_selected {
color: #fff;
background-color: #009ddc;
}
.nav__link {
display: inline-block;
text-decoration: none;
padding: 0.2em 3em 1em 1em;
color: #24387f;
font-size: larger;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Team Management</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">User Management</a>
</li>
</ul>
I have changed a little bit your CSS and your script.
Now the new class is added correctly to the elements.
Please, have a look at https://fiddle.jshell.net/mh2gqmju/
All the best.
What you are doing wrong is targeting the hyperlink, while you need to highlight the list-item only.
But now, if you correct your code to target the list-item in the list in place of the hyperlinks, you won't be able to see changes on the screen. (You would be able to see the classes toggling in the browser's developer tools though, obviously).
Why so? Because the hyperlink inside the list-item is hiding all the changes you want to see when the list-item gets clicked.
I added one more CSS property to the .highlightMenu in order to make you notice the changes.
See yourself:
JavaScript is modified to target the list-items, not hyperlinks within the ul in #navcontainer
.highlightMenu carries one extra CSS property now (outline), to notice the style changes on the click event.
$(document).ready(function() {
$('#navcontainer ul li').click(function() {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li a:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 3em 1em 1em;
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
.highlightMenu {
color: #fff !important;
background-color: #009ddc;
outline: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li>#Html.ActionLink("Team Management", "Team", "Admin", null, null)</li>
<li>#Html.ActionLink("User Management", "UserProfile", "Admin", null, null)</li>
</ul>
</div>
I hope it helped.
For a quick and easy hack which allows elements to respond when clicked but which does not require any scripting:
add the tabindex="0" attribute to the element
apply styles to the element, using the :focus pseudo-class
Working Example:
li {
display: inline-block;
width: 100px;
height: 100px;
color: rgb(227, 227, 227);
background-color: rgb(127, 127, 127);
text-align: center;
vertical-align: top;
}
li:nth-of-type(1):hover {
color: rgb(255, 255, 0);
background-color: rgb(255, 0, 0);
}
li:nth-of-type(1):focus {
color: rgb(255, 255, 255);
background-color: rgb(0, 127, 0);
}
li:nth-of-type(2):hover {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
}
li:nth-of-type(2):focus {
color: rgb(255, 255, 255);
background-color: rgb(127, 127, 255);
}
<ul>
<li tabindex="0">
Red on<br />Hover
<br /><br />
Green on<br />Click
</li>
<li tabindex="0">
Yellow on<br />Hover
<br /><br />
Blue on<br />Click</li>
</ul>
The reason I believe your code might not be working is this line
$('#navcontainer ul li a').click(function()
You have included the anchor "a" on the selector eventhough you want to be highlighting the "li" tag. It should be more like this:
$('#navcontainer ul li').click(function()
I have checked this on fiddle.jshell and it seems to fix the problem.
<code>
$(document).ready(function() {
$(document).on('click', '#navcontainer ul li a', function () {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});`enter code here`
});
</code>
<br>
Please use the above added code i believe it's good for query..
Your code is correct ... You just need to modify your .css a bit.
Old css :-
padding: .2em 3em 1em 1em;
Changed to :-
padding: 2px 1px 1px 1px ;
See the screen shot
$(document).ready(function() {
$('#navcontainer ul li a').click(function() {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
cursor:pointer;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li a:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: 2px 1px 1px 1px ; /*padding: .2em 3em 1em 1em;*/
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
.highlightMenu {
color: #fff !important;
background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li><a> Team Management </a></li>
<li><a>User Management</a></li>
</ul>
</div>
I made some changes to css and jquery
$(document).ready(function() {
$('#navcontainer ul li').click(function(e) {
e.preventDefault(); // Remove this line please, just for this example
$(this).addClass('highlightMenu').siblings().removeClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 3em 1em 1em;
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
#navcontainer ul li.highlightMenu {
color: #fff !important;
background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
I'm new to web development, I integrated this slider into my page : Slideshow source+tutorial
The slider work if I run it on any local page different to mine it runs perfectly, but on mine the following problems occur :
1-pagination + arrows don't show up
2-I cant center it
my CSS :
<style>
#font-face {
font-family: imp1;
src: url(fonts/blackchancery/BLKCHCRY.TTF);
}
* { margin: 0; outline: none; }
html {
background: #32c951 url(img/noise.png);
}
body {
padding-right: 25px;
padding-left: 25px;
padding-top: 10px;
padding-bottom: 25px;
width:1200px;
}
#header
{
position:top fixed;
padding-bottom:15px;
}
#menu-bar {
margin: 0px 0px 0px 0px;
padding: 6px 0px 4px 0px;
line-height: 100%;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
box-shadow: 0px 0px 0px #666666;
-webkit-box-shadow: 0px 0px 0px #666666;
-moz-box-shadow: 0px 0px 0px #666666;
background: #2D964D url(img/noise.png);
border: solid 1px #FFFFFF;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 3px 0px;
padding: 0px 6px 0px 12px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bolder;
font-family: helvetica;
font-style: italic;
font-size: 16px;
color: #FFFDFD;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
margin-bottom: 3px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
text-shadow: 0px 0px 0px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #82FF4D;
color: #2A7D35;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #82FF4D !important;
color: #000000 !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul {
background: #2A7D35;
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 30px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#FFFFFF !important;
font-size:15px;
font-style:italic;
font-family:helvetica;
font-weight: bold;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
#wrapper {
background-color: rgba(255, 255, 255, 0.8); /* (R, B, G, OPACITY */
position:center;
}
#main_content {
text-align:center;
}
#footer {
position:fixed;
height:20px;
background-color:red;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
background:#FFFFFF url(img/noise.png);
text-align:center;
}
#footer_content {
width:960px;
}
#footer li {
display:inline;
}
p {
font-family:imp1;
}
#welco_mes {
font-family:imp1;
font-size:35px;
color:black;
}
</style>
I suspect the whole problem comes from my CSS; an element is causing the slideshow to behave this way.
JSFiddle link: https://jsfiddle.net/nvsp94d7/3/
Though if the js+css of the slideshow are included, the slideshow immediatly sticks to the left+all its controls never show up
Here's a fork of your fiddle, https://jsfiddle.net/68z476g2/1/, that has the pagination and the slideshow centered compared to the parent div. I had to replace the slideshow pictures because they were not provided.
What comes to pagination not showing, I suspect it is because you didn't copy pagination.png to the correct location. It is referred to by the CSS and therefore it needs to be at ../images/pagination.png compared to the location of craftyslide.css
Centering the div was just matter of adding
#slideshow {
margin: 0 auto;
}
to your CSS file
When click on select box then mouse over on menu
Select box option list overlaping on menu.
I have already used z-index property but its not working.
Select box hide but not option list. You can use any ready made menu and put select box at near the place on menu option list always display
CSS :
#navigation {
position: relative;
text-align:center;
margin:0 auto;
background-color:#fff;
}
#navigation li {
position: relative;
list-style: none;
display: inline-block;
padding: 5px 20px;
}
#navigation li a {
padding: 5px;
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
color: #3b3b3b;
text-align: left;
text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
#navigation li:hover .main {
color: #ee4e1d;
}
#navigation li .sub-nav-wrapper {
display: block;
position: absolute;
z-index: 30;
margin-left: -16px;
}
#navigation li .sub-nav-wrapper .sub-nav {
width: 150px;
margin-top: 4px;
background: #fff;
border-top: 1px solid #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#navigation li:hover .sub-nav-wrapper {
display: block;
}
#navigation li .sub-nav-wrapper .sub-nav li {
list-style: none;
display: block;
margin: 0;
padding: 0;
text-align: left;
border-bottom: 1px solid #d7d7d7;
}
#navigation li .sub-nav-wrapper .sub-nav li:first-child {
}
#navigation li .sub-nav-wrapper .sub-nav li:last-child {
border: none;
}
#navigation li .sub-nav-wrapper .sub-nav li a {
display: block;
padding: 11px 20px;
font-size: 12px;
font-weight: 600;
text-shadow: 1px 1px 0 rgba(255,255,255,1.0);
box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-moz-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
}
#navigation li .sub-nav-wrapper .sub-nav li:hover {
background: #f5f5f5;
border-bottom: 1px solid #3b3b3b;
}
/*****END DROPDOWN*****/
HTML :
<ul id="navigation">
<li>
Home
</li>
<li>
Portfolio
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li>Graphics</li>
<li>Web</li>
<li>Print</li>
</ul></div>
</li>
<li>
Services
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li>Web Design</li>
<li>SEO</li>
<li>Content Writing</li>
</ul></div>
</li>
<li>
Technology
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li>JavaScript</li>
<li>HTML/CSS</li>
<li>Drupal</li>
<li>Joomla</li>
<li>Wordpress</li>
<li>MySQL</li>
<li>Oracle</li>
</ul></div>
</li>
</ul>
<!-----END NAVIGATION----->
<div style="margin:0 auto;width:900px;text-align:center;">
<select name="search_type" id="search-type" >
<option value="Data2">Data1</option>
<option value="Data1">Data1</option>
</select>
</div>
try using a higher value for z-index. It may work. As said by Era u can also use position relative, but if you are using many similar kind of things, every time you should have to change the positions.
try adding :
"position:relative"
to the parent div of menu.
I'm using the display setting "table" to create a ul navbar with li containing evenly sized buttons. I set a box shadow on the ul to avoid 1px gaps in the shadow between buttons. Unfortunately it appears that the buttons are rendering 2px smaller than their containing li elements. This results in a gap between the shadow and the button.
Any ideas on how to resolve? Previously, I had been using display:inline but I ran into the same issue. Thanks!
http://jsfiddle.net/Lfvq9/
CSS:
#navbar ul {
top: 1%;
height: 98%;
width: 98%;
margin: 0 2% 0 2%;
padding: 0;
list-style: none;
box-shadow: 0 4px 2px -2px #888888;
border-radius: 20px;
display: table;
table-layout: fixed;
}
#navbar li {
height: 100%
width: 100%
display: table-cell;
padding: 0;
margin: 0;
}
#navbar button {
height: 100%;
width: 100%;
margin:0;
padding: 0;
border-top:1px solid #696969;
border-bottom:1px solid #696969;
border-right:1px solid #696969;
border-left: 0px;
}
Pretty HTML: (actual HTML has no spacing to avoid 1px gaps)
<ul>
<li>
<button>
</button>
</li>
<li>
<button>
</button>
</li>
</ul>
This seems to fix it:
#navbar button {
margin: 2px 0 0;
}
http://jsfiddle.net/Lfvq9/1/
I'm looking to create a similar combobox or dropdown list like this where the box containing the selection items pops up when "Gold coast" or "Newest" button is click on the right side of the following page:
Deal Zoo
It seems to have a very slick look and feel and I wonder where to get the Javascript or ASP .Net component for this?
I'm the creator of Deal Zoo. Happy to help you out with the dropdown styling. It's a combination of javascript/jquery, css and plain ol' HTML to achieve the result.
You'll need to make sure you have the Jquery library. I use the google hosted version.
The HTML is:
<dl class="dropdown">
<dt><span>Newest<span class="icon"></span></span></dt>
<dd>
<ul style="display: none; ">
<li>Newest</li>
<li>Cheapest</li>
<li>Most Popular</li>
<li>Ending Soon</li>
</ul>
</dd>
</dl>
The CSS is (adapt as needed, the images would obviously need to be created)
.dropdown {
position: relative;
width: 200px;
}
.dropdown dt a {
display: block;
border: 1px solid #A3CFE4;
color: #585858;
background-color: #ececec;
background-image: -moz-linear-gradient(center top, #fefefe, #e9e9e9);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e9e9e9));
border-style: solid;
border-color: #ccc;
border-width: 1px;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 5px 0 6px 5px;
text-shadow: 0 0 1px #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
}
.dropdown dt a:hover {
border-color: #b3b3b3;
background-color: #d7d7d7;
background-image: -moz-linear-gradient(center top, #f0f0f0, #dadada);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#dadada));
}
.dropdown dt a:active {
color:#454545;
background: #ccc;
border-color: #bbb;
}
.dropdown dt a span {
cursor: pointer;
padding: 4px 5px 5px;
}
.dropdown dt a span .icon {
background: url(/images/dropdown-arrow.png) no-repeat scroll right center;
width: 14px;
height: 10px;
padding-left: 15px;
}
.dropdown dd ul {
display: none;
list-style: none;
position: absolute;
right: 0px;
top: 0px;
width: auto;
min-width: 170px;
background: white;
-webkit-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
-moz-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 4px 0px;
z-index: 100;
font-size: 12px;
}
.dropdown dd ul li a {
padding: 2px 10px 2px 20px;
display: block;
color: #333;
}
.dropdown dd ul li a:hover {
color: #fefefe;
background: #3296df;
}
.dropdown dd ul li a.selected {
background: url(/images/tick.png) left 7px no-repeat;
font-weight: bold
}
.dropdown dd ul li a.selected:hover {
background-color: #3296df;
background-position: left -53px;
color: #fefefe;
}
The Javascript is:
$(document).ready(function (){
$(".dropdown dt a").click(function(e) {
e.preventDefault();
$(this).parents(".dropdown").children("dd").children("ul").toggle();
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
});