Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm having a difficult time figuring out why my tabbed id is not working or functioning like it should. On a click, its supposed to replace the text with something different (i.e. page under construction).
Here is what I have so far..
HTML
<!doctype html>
<html>
<head>
<title>Main Page</title> <!--main page title -->
<script type="text/javascript" scr="home_page.js"></script>
<link rel="stylesheet" type="text/css" href="home_page.css"/>
</head>
<body>
<h1> Express Shop </h1>
<div class="content">
<div class="navbar">
<ul>
<li>Home</li>
<li>Inventory</li>
<li>Directions</li>
<li>Contact Us</li>
</ul>
</div>
<div id="tab1" class="tab active">
<h3>Welcome to Express Shop!</h3>
<p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
<p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
</div>
<div id="tab2" class="tab">
<h3>Inventory</h3>
<p>Page Under Construction<p>
</div>
<div id="tab3" class="tab">
<h3>Directions</h3>
<p>Page Under Construction</p>
</div>
<div id="tab4" class="tab">
<h3>Contact Us</h3>
<p>Page Under Construction</p>
</div>
</div>
</body>
</html>
CSS
h1 {
font:bold 65px/60px Helvetica, Arial, Sans-serif;
text-shadow:0px 2px 6px #333;
}
.content p {
margin:20px;
}
.tab { /*turn off display of all tabs(in-active) */
display:none;
}
.navbar {
position:relative;
margin:0px 0px 0px -40px;
/*border around tabs */
}
.navbar ul {
list-style:none;
}
.navbar ul li {
display:inline-block;
}
.navbar ul li:first-child a {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
.navbar ul li:last-child a {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
.navbar ul li a {
text-decoration:none;
font:bold 14px Helvetica, Sans-Serif;
padding:10px;
margin-right:-7px;
/*border-radius:3px; */
background-color:#E0E0E0;
transition:all linear 0.15s;
}
.navbar ul li a:hover {
background-color:rgb(255, 173, 10);
}
/* needs to be fixed */
.navbar ul li a.active {
background-color:rgb(255, 173, 10);
}
.tab.active {
display:inherit;
clear:both;
margin-top:-7px;
border:1px solid black;
width:700px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
h3 {
text-transform:uppercase;
padding:10px 0px 0px 10px;
color:black
text-shawdow:#000 0px 0px 2px;
}
JavaScript
$(home_page.html).ready(function() {
$('navbar ul li a').click(function() {
var tab_id =$(this).attr('href');
$('navbar ul li a').removeClass('active');
$('tab').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
});
Problems:
You need to include jQuery library in your header, before your own script
$(document).ready - this makes your code run when the page is loaded
When you want to select a class, you need to add a . before it (just like CSS), for example you had $('navbar ul li a') which should be $('.navbar ul li a')
In your tab links, you only had href="#", you need to put the correct id of the tabs (e.g. #tab1), and since you already have # here, you don't need it again in $(tab_id)
I have fixed your code and you can try a working version below:
$(document).ready(function() {
$('.navbar ul li a').click(function() {
var tab_id = $(this).attr('href');
$('.navbar ul li a').removeClass('active');
$('.tab').removeClass('active');
$(this).addClass('active');
$(tab_id).addClass('active');
});
});
h1 {
font:bold 65px/60px Helvetica, Arial, Sans-serif;
text-shadow:0px 2px 6px #333;
}
.content p {
margin:20px;
}
.tab { /*turn off display of all tabs(in-active) */
display:none;
}
.navbar {
position:relative;
margin:0px 0px 0px -40px;
/*border around tabs */
}
.navbar ul {
list-style:none;
}
.navbar ul li {
display:inline-block;
}
.navbar ul li:first-child a {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
.navbar ul li:last-child a {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
.navbar ul li a {
text-decoration:none;
font:bold 14px Helvetica, Sans-Serif;
padding:10px;
margin-right:-7px;
/*border-radius:3px; */
background-color:#E0E0E0;
transition:all linear 0.15s;
}
.navbar ul li a:hover {
background-color:rgb(255, 173, 10);
}
/* needs to be fixed */
.navbar ul li a.active {
background-color:rgb(255, 173, 10);
}
.tab.active {
display:inherit;
clear:both;
margin-top:-7px;
border:1px solid black;
width:700px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
h3 {
text-transform:uppercase;
padding:10px 0px 0px 10px;
color:black
text-shawdow:#000 0px 0px 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Express Shop </h1>
<div class="content">
<div class="navbar">
<ul>
<li>Home</li>
<li>Inventory</li>
<li>Directions</li>
<li>Contact Us</li>
</ul>
</div>
<div id="tab1" class="tab active">
<h3>Welcome to Express Shop!</h3>
<p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
<p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
</div>
<div id="tab2" class="tab">
<h3>Inventory</h3>
<p>Page Under Construction<p>
</div>
<div id="tab3" class="tab">
<h3>Directions</h3>
<p>Page Under Construction</p>
</div>
<div id="tab4" class="tab">
<h3>Contact Us</h3>
<p>Page Under Construction</p>
</div>
</div>
Related
I am working on making a page that has multiple tabs each tab has different content in it. I looked online for tutorials and found this site http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery. I have been following it, i have tweaked the settings to how I want it to look however when I try to click on a different tab nothing changes. I am still pretty new to jquery so I am a little confused in that field and I was hoping someone could help me out and let me know what to do.
The problem is that the tab are not switching upon clicking
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./common/res.css"/>
<meta charset="utf-8">
<title>Room Reservation</title>
</head>
<header>
</header>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active">Stage</li>
<li>Studio</li>
<li>Session</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<form>
Room Selection:<br>
<select name="room">
<option value="">Select Room</option>
<option value="stage">Stage Access</option>
<option value="grip">Grip Closet</option>
<option value="grid">Grid</option>
</div>
<div id="tab2" class="tab">
<p>Studio</p>
</div>
<div id="tab3" class="tab">
<p>Session</p>
</div>
</div>
</div>
</body>
</html>
en/*----- Tabs -----*/
.tabs {
width:100%;
display:inline-block;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background:#fff;
color:#4c4c4c;
}
/*----- Content of Tabs -----*/
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}
.tab {
display:none;
}
.tab.active {
display:block;
}ter code here
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
Thanks
<!DOCTYPE html><html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<meta charset="utf-8">
<title>Room Reservation</title>
</head>
<header>
</header>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active" data-toggle="#tab1">Stage</a></li>
<li data-toggle="#tab2">Studio</li>
<li data-toggle="#tab3">Session</li>
</ul>
</div>`
<div class="tab-content">
<div id="tab1" class="tab active">
<form>
Room Selection:<br>
<select name="room">
<option value="">Select Room</option>
<option value="stage">Stage Access</option>
<option value="grip">Grip Closet</option>
<option value="grid">Grid</option>
</select>
</form>
</div>
<div id="tab2" class="tab">
<p>Studio</p>
</div>`
<div id="tab3" class="tab">
<p>Session</p>
</div>
</div>
<style>`
`.tabs {
width:100%;
display:inline-block;
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links li:hover {
background:#a7cce5;
text-decoration:none;
}
li.active, li.active:hover {
background:#fff;
color:#4c4c4c;
}
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}`
.tab {
display:none;
}
.tab.active {
display:block;
}`
</style>
<script>
jQuery(document).ready(function() {
jQuery('.tabs .tab-links li').on('click', function(e) {
tabs(jQuery(this).attr('data-toggle'));
jQuery(this).addClass('active').siblings().removeClass('active');
});`
function tabs(tab) {
jQuery('.tab-content .tab').hide()
jQuery('.tab-content').find(tab).show();
}
});
</script>
</body>
</html>
First of all you should include jquery library, then correct your html, and use fucntions from start please, be true! :D I suggesting you to not use a tags in tabs
I have been stuck on this for ages, here is my code so far:
<html>
<head>
<script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body, html, div, ul, li, a {
margin:0;
padding:0;
}
body {
font-family:arial;
font-size:12px;
color:#000000;
}
.clear {
clear:both;
}
ul {
list-style:none;
position:relative;
z-index:2;
top:1px;
display:table;
border-left:5px solid #808080;
}
ul li {
float:left;
}
ul li a {
background:#000000;
color:#000000;
display:block;
padding:6px 15px;
text-decoration:none;
border-right:100px solid #000000;
border-top:1px solid #000000;
border-right:3px solid #808080;
}
ul li a.selected {
border-bottom:1px solid #808080;
color:#000000;
background:#808080;
}
h1 {
display:block;
width:600px;
margin:0 auto;
padding:200px 0;
color:#000000;
}
#navigation {
width:602px;
margin: 0 auto;
}
#content {
width:600px;
margin:0 auto;
height:200px;
background:#ffffff;
border:1px solid #000000;
z-index:1;
text-align:center;
padding:10px 0;
}
#logo {
width:600px;
margin:0 auto;
padding:10px 0;
text-align:right;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><font color="white">Tab 1</li>
<li><font color="white">Tab 2</li>
<li><font color="white">Tab 3</li>
<li><font color="white">Tab 4</li>
<li><font color="white">Tab 5</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p id="content_changer">You have selected Tab 1</p>
<p>See the page source for full code</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#navigation ul a').click(function() {
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
$('#content_changer').html('You have selected ' + $(this).html());
});
});
</script>
</body>
</html>
I can not figure out how to get one of these tabs menu thing to work, I have tried so many different methods but nothing will work.
It's not very good code, but it works for me. The only problem is that the #content text is set to font color white, so you can't see it, though it is there.
You should avoid font tags, as they are badly out of date, as well as inline JS.
I tried running your code. I found that the text is written #content_changer element, but its white colored.
Here's how you can solve it.
Add the following css rule
#content_changer{
color:#000;
}
Change the $(this).html() to $(this).text().
That much should do.
The problem is not in your JS, but in your CSS. Font color is white on the links in the navigation, which means it will be invisible on the content area. Also, using is deprecated and you need to set content-area color to black.
Here is a working jsFiddle:
http://jsfiddle.net/8ftyy/
Differences are these:
#content_changer {
color: black;
}
ul li a {
color: white;
}
and no font-color in html.
I want to implement a navigation menu on my website. I need to highlight a parent list item after click on its child menu item. This is Working, if it is a single file. I include it in all files. My problem of the below code is, when I click on a child menu item, its parent menu item is highlighted till the loading time. After loading completely, Highlighted color is disappearing. Clicking on the menu item which has no child, is also not highlighted.
Any help would be greatly received.
Thanks. My website link is www.theiab.org/IABPHP.
HTML:
<html>
<head>
<script>
$(document).ready(function () {
$('#menu-wplook-main-menu').find('li a').click(function () {
//e.preventDefault();
$('#menu-wplook-main-menu').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
</script>
<style>
#menu-wplook-main-menu li a.active{
color:#e53b51;
}
</style>
</head>
<body>
<p class="site-title"><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"></p>
<nav class="navigation"id="nav">
<ul id="menu-wplook-main-menu" class="parent" >
<li class="menu-item"><div id="whoWeAre">WHO WE ARE</div>
<ul class="sub-menu"id="sub-menu1">
<li class="sub-menu-item1"id="sub-menu-item1"><div id="subMenuItem1">ABOUT FOUNDER</div></li>
<li class="sub-menu-item2"id="sub-Menu-Item2"><div id="subMenuItem2">ABOUT IAB</div></li>
<!--<li class="menu-item ">TEAM IAB</li>-->
</ul>
</li>
<li class="menu-item">WHAT WE DO
<ul class="sub-menu"id="sub-menu2">
<li class="sub-menu-item3 ">EDUCATION</li>
<li class="sub-menu-item4">CAREER & SKILL TRAINING</li>
<li class="sub-menu-item5">RESIDENTIAL SERVICES</li>
<li class="sub-menu-item6">SUPPORT SERVICES</li>
<li class="sub-menu-item7">EMPLOYMENT</li>
</ul>
</li>
<li class="menu-item">AWARDS & RECOGNITION</li>
<li class="menu-item">NEWS & EVENTS</li>
<li class="menu-item">CONTACT</li>
</ul>
</nav>
</body>
</html>
CSS:
nav {
float:right;
padding:38px 0 0;
}
nav li {
position:relative;
display:inline-block;
}
nav ul li a {
color:#a0a0a0;
font-weight:bold;
}
nav li a:hover {
color:#e53b51;
text-decoration: none;
}
nav li:hover .sub-menu{
visibility:visible;
opacity: 1;
transition: all 1s ease;
}
ul.sub-menu {
visibility:hidden;
opacity:0;
transition: visibility 1s linear 0.5s,opacity 0.5s linear;
position:absolute;
top:27px !important;enter code here
left:0px;
z-index:5000;
list-style:none;
margin:0;
padding: 0 !important;
width: auto;
min-width:150px;
box-shadow:0 0px 8px rgba(0,0,0,0.2);
background:#fff;
}
ul.sub-menu li {
width:100%;
float:left;
border-bottom: 1px solid #ccc;
margin: 0 !important;
line-height:100%;
padding: 10px 0px !important;
}
ul.sub-menu li:last-child {
border-bottom: none;
}
nav ul.sub-menu li a {
padding:0px 12px;
height: auto;
font-size:13px !important;
display: block;
}
ul.sub-menu li:hover {
border-top:none !important;
background: #f9f9f9;
}
You need to change this:
nav li a:hover {
color:#e53b51;
text-decoration: none;
}
To this:
nav li:hover a {
color:#e53b51;
text-decoration: none;
}
That way when you hover over the list-item (li), the anchor (a) will be changed. The way you had it, you needed to hover over the ANCHOR ITSELF for the hover state to be activated. Now hovering over the list-item will activate the changes.
I have a menu that contains a submenu which gets displayed below the main menu when a link inside the main menu is hovered over. What I want to do is add a second submenu inside the first submenu but make it a dropdown. I am not that great at css and I was wondering if anyone can help me with this. I haved followed some tutorials online and I was not able to get the results I was looking for. Here is the html and css I have so far.
<div id="navigation">
<ul id="mymenu">
<li>Home</li>
<li>Gallery</li>
<li>What We Do</li>
<li>Contact</li>
</ul>
</div>
<div id="sublinks">
<ul id="s1">
<li>General</li>
<li>Landon News</li>
<li>Trust Us</li>
</ul>
<ul id="s2">
<li>
Security Systems
<ul id="s2sys">
<li>Arlington HA</li>
<li>Enfield HA</li>
<li>Revere HA</li>
</ul>
</li>
<li>
WLAN Systems
<ul id="s2wlan">
<li>Beverly HA</li>
<li>Holyoke HA</li>
<li>Meriden HA</li>
<li>Revere HA</li>
</ul>
</li>
</ul>
<ul id="s3">
<li>Computers</li>
<li>Strategic Planning</li>
<li>Security Systems</li>
<li>WLAN, WiFi Broadband</li>
</ul>
<ul id="s4">
<li>Email</li>
<li>Address Info</li>
</ul>
</div>
Here is the javascript for the main menu which will display the first submenu
function showsubmenu(id){
submenu = document.getElementById('s'+id);
for(i=1;i<=4;i++){
if(i==id){
submenu.style.display="block";
} else {
document.getElementById('s'+i).style.display="none";
}
}
}
sfHover = function() {
var sfEls = document.getElementById("sublinks").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Here is the CSS
#navigation{
height:32px;
margin:0 auto;
width:auto;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#1361A5;
font-weight:bold;
text-shadow:#ffffff 2px 2px 2px;
}
#navigation ul li a:hover{
color:#C3C2C1;
}
/* ----------- Sub Menu ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#C3C2C1;
height:30px;
font-size:11px;
border-radius:8px;
-moz-border-radius:8px; /* Firefox 3.6 and earlier */
-webkit-border-radius: 8px;
-webkit-box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
-moz-box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
behavior: url(http://localhost/landon/assets/pie/PIE.php);
position: relative;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 10px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}
#sublinks li:hover ul{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#sublinks li:hover li {
float: none;
}
#sublinks li:hover li a {
background-color: #C3C2C1;
border-bottom: 1px solid #fff;
color: #000;
left:50;
}
#sublinks li li a:hover {
background-color: #8db3ff;
}
/* ----------- Hide Sub menu ----------- */
#s2, #s3, #s2sys, #s2wlan{display:none;}
What I am trying to do is make the second submenu a dropdown from the first submenu and at the moment it displays within the same line and not as a dropdown. How can I do this?
http://jsfiddle.net/kVztG/1/
To make the sub-sub-menu a dropdown change the css below.
#sublinks li:hover li {
display:block;
position:relative;
top:30px;
}
The position:relative and top:30px stop the dropdowns from appearing ontop of the sub-menu, and display:block stops the li from display inline.
Try adding this css to your drop down ul list that is within your sub-menu.
position: absolute;
top: 30px;
Depending on the type of result your looking for, you might want to amend the top value, or have the dropdown vertical by adding a width
Demo: http://jsfiddle.net/4k2Tx/2/
I've got a toggle menu, please see code and function in JsFiddle
When you click on a h3 tag eg Category 1 which is an a tag, the menu opens and stays open on the linking/current page.
However when you click on h3 tag (Category1) again or any submenu for Category 1 eg Option 1, the menu collapses close and then open again on the current page.
Is there any way I can avoid the closing and opening function when you click on any of the links on the current page?
Any code or examples would be appreciated.
Thanks in advance.
http://jsfiddle.net/LcsLr/33/
HTML
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="productmenu">
<div class="submenublock" id="submenu1">
<h3>
<a href="#" class="link" >Category 1</a>
<a href='#' class="arrow" ></a>
</h3>
<ul class="second_level">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
<div class="submenublock" id="submenu2">
<h3>Category 2</h3>
</div>
<div class="submenublock" id="submenu3">
<h3>
Category 3
<a href='#' class="arrow" ></a>
</h3>
<ul class="second_level">
<li><a href="#" class="linkx">Option 1
</a></li>
<li><a href="#" class="linkx">Option 2
</a></li>
<li><a href="#" class="linkx">Option 3
</a></li>
</ul>
</div>
</div>
</body>
JS
$(document).ready(function() {
$('h3,.second_level li').each(function(){
var href = $(this).children('a').attr('href');
if(window.location.pathname.search(href) != -1) {
$(this).children('a').addClass('currentPage')
}
});
$('.currentPage').each(function(){
var parent;
if($(this).parent('h3').length > 0){
parent = $(this).parent('h3');
}
else{
parent = $(this).parents('ul').siblings('h3');
}
$(parent).children('.arrow').addClass('open');
$(parent).siblings('ul').show();
});
$('.link').click(function() {
OpenParent($(this).parent('h3'));
window.location = $(this).attr('href');
});
$('.arrow').click(function(e){
e.preventDefault();
OpenParent($(this).parent('h3'));
});
});
function OpenParent(CurrentParent){
var currentArrow = $(CurrentParent).children('.arrow');
$('.open').not(currentArrow ).removeClass('open').parent().siblings('ul').slideUp('fast');
currentArrow.toggleClass('open');
$(CurrentParent).next().slideToggle('fast');
}
CSS
#sidebar {
float:left;
width:220px;
}
#productmenu { width:220px; margin-left: 0px;}
.submenublock{
margin: 0px;
padding: 0px;
}
.submenublock h3{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0px;
border-bottom:#CCC 1px solid;
}
.submenublock h3 a{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-decoration:none;
color: #000000;
}
.submenublock h3 a:hover, .submenublock h3 a:active, .submenublock h3 a:focus
{
color: #00aeef;
}
.second_level{
list-style-type:none;
list-style:none;
margin:0px;
padding:0px;
}
.second_level li{
list-style-type:none;
list-style:none;
display: block;
border-bottom:#CCC 1px dashed;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
/* background:url(images/menuarrowright.gif) no-repeat right;*/
}
.second_level li a{
display: block;
margin-left:15px;
text-decoration:none;
color:#000000;
}
#productmenu ul li a:hover, #productmenu ul li a:active, #productmenu ul li a:focus
{
color: #00aeef;
}
.second_level{
display:none;
}
a.currentPage{
color:blue !important;
}
.link{
padding:10px;15px;
display:block;
}
.linkx{
padding:10px;15px;
display:block;
}
.arrow{
background:url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 2px;
float:right;
height:17px;
width:13px;
margin-top:-27px;
}
.open{
background:url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 2px;
}
</style>