http://xanlz.com/test/
why under IE7,6 , the box which including the text "code" "book" are above on the border? not joining together. the red part in the image
but ok under firefox.and how to remove the bottom line.when the mouser hover on the text(code or book) and under the default state with text code.
the html code:
<div class="week-down rounded-corner">
<h2>week test</h2>
<div class="ranktitle">
<ul>
<li class="tab1 rankactive">code</li>
<li class="tab2">book</li>
<div class="clear"></div>
</ul>
</div>
<div class="weekrank">
<div class="code-down tab1" style="display: block;">
<ul class="item-list itemlist">
<li><a href="#" >asp</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
<li><a href="#" >asp</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
</ul>
</div>
<div class="book-down tab2" style="display: none;">
<ul class="item-list itemlist">
<li><a href="#" >test</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >test</a></li>
<li><a href="#" >asp</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
</ul>
</div>
</div>
</div>
the main style:
.ranktitle {
margin-top: 5px;
}
.code-down ul.item-list, .book-down ul.item-list {
border-top: 1px solid #D5D5D5;
padding-top: 8px;
}
#tabs-content ul, ul.item-list {
padding: 3px 0 0 7px;
}
.ranktitlewhole ul li.rankactive, .ranktitle ul li.rankactive {
background-color: #FFFFFF;
}
i use jquery to add a class rankactive to the li text. when the mouse on.
You have a <div class="clear"></div> inside the <ul>. This is not valid. Remove it and add to <ul> overflow: hidden; property.
For IE6 zoom: 1; property has to be added. Without this overflow: hidden; doesn't work.
And for the second part of the question, try this:
li:hover {
position: relative;
top: 1px;
padding-bottom: 1px;
}
UPDATE
Let's make it simple.
Remove overflow: hidden; and zoom: 1; and set to <ul> fixed height, for example 15px.
And for li:hover
li:hover {
position: relative;
top: 1px;
}
Related
I currently have a multi layered dropdown that goes up to three lists. I am trying to have all the lists that show up automated by hover. This is because my intention is to have an href link, right now the link only works on the third dropdown list because the click the others before is used to display the next dropdown.
i tried to add :hover in the css of the classes dropdown-menu and dropdown submenu with "display: block;" but this is not functioning and the lists still shows only when clicked.
https://jsfiddle.net/nmv2d41w/1/
DROPDOWN:
<div class="dropdown p-left-15">
<button class="filter-btn filter-btn-default dropdown-toggle" type="button" data-toggle="dropdown">Filter Coupons</button>
<!--Category 1-->
<ul class="dropdown-menu filter-dropdown">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C1-1</a>
<!--Category 2-->
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C2-1</a>
<!--Category 3-->
<ul class="dropdown-menu">
<li>C3-1</li>
<li>C3-2</li>
<li>C3-3</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" value="" href="#">C1-2</a>
<!--Category 2-->
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" value="" href="#">C2-a</a>
<!--Category 3-->
<ul class="dropdown-menu">
<li>C3-a</li>
<li>C3-b</li>
<li>C3-c</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu:hover {
position: relative;
display: block;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.filter-btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.filter-btn.focus, .filter-btn:focus, .filter-btn:hover {
color: #333;
text-decoration: none;
}
.filter-btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.filter-btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}
.filter-dropdown li {
padding: 0px 8px;
font-size: 14px;
}
.filter-dropdown li:hover {
background-color: #e6e6e6;
}
.filter-dropdown li a {
color: black;
text-decoration: none;
}
you can try like this
html
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card my-3">
<div class="card-header">
Bootstrap 4 Multilevel Dropdown Hover
<div class="options float-right">
<a class="settings"><i class="fa fa-cog"></i></a>
<i class="fa fa-chevron-up"></i>
<i class="fa fa-refresh"></i>
<i class=" fa fa-expand"></i>
<i class="fa fa-times"></i>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<div class="btn-group">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
href="">
Dropdown
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a class="dropdown-item" href="#">level 1</a></li>
<li><a class="dropdown-item" href="#">level 1</a></li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item" tabindex="-1" href="#">
level 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" tabindex="-1" href="#">level 2</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">
level 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">3rd level</a></li>
<li><a class="dropdown-item" href="#">3rd level</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">level 2</a></li>
<li><a class="dropdown-item" href="#">level 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css
.dropdown-submenu {
position: relative;
}
.dropdown-submenu> a:after {
content: ">";
float: right;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: 0px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
js
$(".btn-group, .dropdown").hover(
function () {
$('>.dropdown-menu', this).stop(true, true).fadeIn("fast");
$(this).addClass('open');
},
function () {
$('>.dropdown-menu', this).stop(true, true).fadeOut("fast");
$(this).removeClass('open');
});
working demo
Let me know if you have any doubt.
try something like this...
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-item">Some action</li>
<li class="dropdown-item">Some other action</li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Even More..</a>
<ul class="dropdown-menu">
<li class="dropdown-item">3rd level</li>
<li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a>
<ul class="dropdown-menu">
<li class="dropdown-item">4th level</li>
<li class="dropdown-item">4th level</li>
<li class="dropdown-item">4th level</li>
</ul>
</li>
<li class="dropdown-item">3rd level</li>
</ul>
</li>
<li class="dropdown-item">Second level</li>
<li class="dropdown-item">Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I can't figure out how I can align the last <li> element at the bottom of the container. The problem I find is that due to column-count and column-fill, the content automatically adapts to the columns preventing me from positioning the last element as I want. I tried using padding-top, margin-top and line-height but the result is always the same. Is there a way to solve this problem?
Here's an example of what I mean:
* { font-family: Sans-serif }
.table1 { border: 1px solid red }
.table2 { border: 1px solid red }
.title-list { column-count: 2 }
.title-list li { margin-bottom: 10px }
.title,
.title:hover {
border-bottom: 1px solid #cae3f7;
text-decoration: none;
color: black
}
.more1 {
list-style-type: none;
margin-left: -15px
}
.more2 {
list-style-type: none;
margin-left: -15px;
padding-top: 30px
}
<body>
<p><b>I want to align the last link at the bottom of the div</b></p>
<div class="table1">
<ol class="title-list">
<li><a class="title" href="#">I'm the first title</a></li>
<li><a class="title" href="#">I'm the second title</a></li>
<li><a class="title" href="#">I'm the third title</a></li>
<li><a class="title" href="#">I'm the fourth title</a></li>
<li><a class="title" href="#">I'm the fifth title</a></li>
<li><a class="title" href="#">I'm the sixth title</a></li>
<li><a class="title" href="#">I'm the seventh title</a></li>
<li><a class="title" href="#">I'm eighth title </a></li>
<li class="more1">Show me more >>></li>
</ol>
</div>
<p><b>But when I do this the columns change </b></p>
<div class="table2">
<ol class="title-list">
<li><a class="title" href="#">I'm the first title</a></li>
<li><a class="title" href="#">I'm the second title</a></li>
<li><a class="title" href="#">I'm the third title</a></li>
<li><a class="title" href="#">I'm the fourth title</a></li>
<li><a class="title" href="#">I'm the fifth title</a></li>
<li><a class="title" href="#">I'm the sixth title</a></li>
<li><a class="title" href="#">I'm the seventh title</a></li>
<li><a class="title" href="#">I'm the eighth title </a></li>
<li class="more2">Show me more >>></li>
</ol>
</div>
</body>
/* the container */
.table-1 {
position: relative;
}
li:last-of-type {
position: absolute;
right: 0;
bottom: 0;
}
I have a vertical navbar menu with 2 blocks.
First is nav with icons, second is text of menu.
They have a different background colors. How i can make one background color for two active nav blocks?
design of menu
<div class="menu__icons">
<ul class="menu__list">
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item" href="#">First</a></li>
<li><a class="menu__item" href="#">Second</a></li>
<li><a class="menu__item" href="#">Third</a></li>
<li><a class="menu__item" href="#">Fourth</a></li>
</ul>
</div>
</div>
https://jsfiddle.net/levan563/1g5ucmwq/2/
Well basically if you want to toggle .active and you don't want two separate markup of list.
Notice that font-awesome is for demonstration purposes only.
.menu__item {
width: 250px;
height: 50px;
text-align: left;
}
.menu__item.active {
background-color: #e9ebfd;
}
.menu__item.active .menu__icon {
background-color: #e9ebfd;
border-left: 4px solid #2c39ec;
}
.menu__item.active .menu__title {
background-color: #e9ebfd;
}
.menu__item a:hover {
text-decoration: none;
}
.menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fafafa;
color: #2c39ec;
}
.menu__title {
display: inline-block;
padding-left: 20px;
color: #777777;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
<ul class="menu__list list-unstyled">
<li class="menu__item active">
<a href="#">
<div class="menu__icon">
<i class="fa fa-tachometer-alt"></i>
</div>
<div class="menu__title">Main Dashboard</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-user"></i>
</div>
<div class="menu__title">Profile</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-bell"></i>
</div>
<div class="menu__title">Finances</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-calendar"></i>
</div>
<div class="menu__title">Titles</div>
</a>
</li>
</ul>
</nav>
Related Fiddle https://jsfiddle.net/mhrabiee/dojL9get/28/
As I understand take active class for both block's li and try to use font, svg icon or transparent background images instead of block images
.menu__list .active {
background-color: red;
}
<div class="menu__icons">
<ul class="menu__list">
<li><a class="menu__item active" href="#">
<img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
</a></li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item active" href="#">First</a></li>
</ul>
</div>
Its doable using jQuery.
Assuming you have same number of list items in both blocks,
$(function(){
$('.menu__list li').on('click', function() {
var idx = $(this).index();
$('.menu__list li').removeClass('active');
$('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});
also add .active class in css and give needed style to li items also
.active{
/**your style**/
}
.active > a{
}
.active img{
}
I am working on a responsive footer and I was able to get everything working. The layout is where there is a small issue. I am not able to get the bottom border after each li field and also not able to get the icon at the end. This is what I have done so far. Kindly let me know what I am missing.
#media all and (max-width: 979px) {
.brand-logos{
margin: 0 auto !important;
padding: 10px !important;
}
footer nav ul{
display:block !important;
margin: 0 auto !important;
}
footer nav ul li{
display:inline-block;
margin: 0 auto !important;
padding: 0 !important;
}
footer nav ul li img{
margin: 20px auto !important;
width: 70% !important;
display: block !important;
}
footer .footer-navigation .container-inline-css{
width: 100% !important;
padding:10px !important;
margin:0 !important;
border-bottom: 1px solid #77777A !important;
}
footer .footer-navigation .container-inline-css span{
margin: 0 !important;
padding: 0px !important;
cursor: pointer !important;
}
footer .footer-navigation div.container-inline-css ul{
max-height: 0 !important;
overflow: hidden !important;
padding: 0 20px !important;
}
footer .footer-navigation div.container-inline-css.active ul{
max-height: 10000px !important;
}
}
<div class="footer-navigation">
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>CONTACT INFO</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="null" target="_blank">
<span class="icon-bg icon-phone"> </span>Call 1-800-STERLING</a>
</li>
<li><a href="/contact-us" target="_self">
<span class="icon-bg icon-contact"></span> Contact Us</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>OUR COMPANY</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="http://www.annsacks.com/" target="_blank">
About Us</a>
</li>
<li><a href="http://www.kallista.com/home.kls" target="_blank">
E-Newsletter Sign Up</a>
</li>
<li><a href="http://www.robern.com/home.rbn" target="_blank">
Careers</a>
</li>
<li><a href="/press-releases" target="_self">
Press Room</a>
</li>
<li><a href="http://www.kohler.com/corporate/index.html" target="_blank">
Kohler Co.</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>RESOURCES</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="/litrature" target="_self">
Literature</a>
</li>
<li><a href="https://www.youtube.com/channel/UCMMnMReFTMuI9bpoctNGPkw/videos" target="_blank">
Merchandise</a>
</li>
<li><a href="null" target="_blank">
FAQs</a>
</li>
<li><a href="null" target="_blank">
Glossary</a>
</li>
<li><a href="null" target="_blank">
Tech Documents</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>CUSTOMER CARE</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="/cad-symbols" target="_self">
Track Your Order</a>
</li>
<li><a href="http://www.inspiracionkohler.com/" target="_blank">
Care & Cleaning</a>
</li>
<li><a href="null" target="_blank">
Warranties</a>
</li>
<li><a href="null" target="_blank">
Videos</a>
</li>
<li><a href="null" target="_blank">
Product Registration</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>SOCIAL</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="https://www.facebook.com/kohlermexico" target="_blank">
<span class="icon-bg icon-social-facebook"></span>Facebook</a>
</li>
<li><a href="https://www.instagram.com/kohlerco/?hl=en" target="_blank">
<span class="icon-bg icon-social-instagram"></span>Instagram</a>
</li>
<li><a href="https://www.youtube.com/user/kohler" target="_blank">
<span class="icon-bg icon-social-pinterest"></span>Pinterest</a>
</li>
<li><a href="null" target="_blank">
<span class="icon-bg icon-social-youtube "></span>YouTube</a>
</li>
<li><a href="null" target="_blank">
<span class="icon-bg icon-social-houzz"></span> Houzz</a>
</li>
</ul>
</div>
</div>
I have all the functionality in place, expect for the bottom border of the li elements and also the arrow icon at the end. Any help is appreciated.
1) You use the footer tag as your CSS selector, but there is no footer tag in your HTML code.
2) You haven't set any border to your li tags. You can accomplish that by adding to your css
.koh-nav-section-items li {
border-bottom: 1px solid #fff;
}
you should be able to add border to the bottom of each li element. If you want to exclude the last element you can add
.koh-nav-section-items:last-of-type {
border-bottom: none;
}
a tip: try to avoid using !important
note: If you can provide a codepen link to your app, it would be much easier
I am trying to have Horizontal drop-down menu like one in here flipkart.com they have floating sidebar menu on hover.
This is my try [With Responsive Design]:-
JSFIDDLE Link - http://jsfiddle.net/QSFPK/
<div class="row-fluid">
<div class="span12">
<div class="span3">
<ul class="nav nav-tabs nav-stacked">
<hr style="margin: -1px;">
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
<ul class="dropdown-menu rightMenu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
<ul class="dropdown-menu rightMenu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
<ul class="dropdown-menu rightMenu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
<ul class="dropdown-menu rightMenu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a>
<ul class="dropdown-menu rightMenu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
<div class="clearFix"></div>
</ul>
</div>
<div class="span9">
<h2>Hello World</h2>
<h2>Hello World</h2>
<h2>Hello World</h2>
<h2>Hello World</h2>
<h2>Hello World</h2>
</div>
</div>
</div>
and here is my CSS :-
.rightMenu {
position:relative;
float:right;
}
.right-caret {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #000000;
display: inline-block;
height: 0;
opacity: 1;
vertical-align: top;
width: 0;
}
.right {
float: right;
}
JSFIDDLE Link - http://jsfiddle.net/QSFPK/
Any help would be great.
Thanks
If you add some sort of class to the list items that have dropdowns, then you can use the css :hover selector to open up the menu with css such as:
li.dropdown:hover .dropdown-menu {
display:block;
}
Here's an edited version of your code, but obviously you'll have to style it so there's no gap causing the mouse to go outside of the <li> item.
http://jsfiddle.net/QSFPK/2/