The submenu (the "lvl2" class) gets displayed upon mouseover in all browsers but MacOS Chrome.
OS version: 10.10.4,
chrome version: 45.0.2454.85
Here's the code: http://jsfiddle.net/166nj6rp/2/
JS
$(document).ready(function () {
$('#main_menu ul.lvl1 > li').on('mouseenter', function () {
$(this).find('ul').show(); //.css('display', 'block');
}).on('mouseleave', function () {
$(this).find('ul').hide();
});
});
HTML
<div id="main_menu">
<ul>
<li> Main
<ul class="lvl1">
<li> Mouseover here
<ul class="lvl2">
<li> First
</li>
<li> Second
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Styles
#main_menu {
background:#333;
color:#cccccc;
height:43px;
position:relative;
}
#main_menu ul {
list-style:none;
display:block;
padding-left:0px;
}
#main_menu > ul {
height:43px;
}
#main_menu > ul > li {
display:inline;
position:relative;
line-height: 37px;
}
#main_menu > ul > li > a {
padding:9px 3px 10px 8px;
}
#main_menu > ul > li > ul {
display:block;
background:#333;
position:absolute;
left:-1px;
top:30px;
min-width:180px;
z-index:999;
}
#main_menu > ul > li li a {
display:block;
}
#main_menu > ul > li li a:hover {
background:#555;
}
#main_menu ul.lvl1 > li:hover {
background:#555;
}
#main_menu ul.lvl1 > li {
position:relative;
}
#main_menu ul.lvl2 {
display:none;
position: absolute;
top:0px;
left:150px;
background:#333;
min-width:150px;
max-width:300px;
}
#main_menu > ul li > a {
color:#ccc;
font-size:15px;
}
If think its all with (absolute positioning inside inline element):
#main_menu > ul > li {
/* display: inline; */
}
Solution: wrap your second ul in div or get rid of "inline" property.
Change 'display:inline' into 'display:block'. It worked.
#main_menu > ul > li {
display:block;
position:relative;
line-height: 37px;
}
Related
The following css style be like this:
ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
#foo li {
list-style:none;
margin-bottom:25px;
}
ul li img {
cursor: pointer;
}
The ul li has included:
<ul id="foo" class="row">
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
</li>
</ul>
Is it possible to change #ul from id into class ? I tried be like this:
ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
li.bar {
list-style:none;
margin-bottom:25px;
}
ul li img {
cursor: pointer;
}
<ul id="" class="row bar">
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
</li>
</ul>
It works but there's something wrong that I think it's not working as well.
Since your li tag doesn't have the .bar class it can't work.
If you want to style the li change the css to:
.bar li {
list-style:none;
margin-bottom:25px;
}
or
if you want to style the ul change the css to:
ul.bar {
list-style:none;
margin-bottom:25px;
}
With your css code you style a li tag with the .bar class.
Try this instead
ul.bar li{
list-style:none;
margin-bottom:25px;
}
Or this
.bar li{
list-style:none;
margin-bottom:25px;
}
This dropdown menu not showing any result while click.
JS code:
$('#king-mainmenu li a').on( 'click', function(e){
if( !$(this.parentNode).find('ul').get(0) || $('body').width() > 1000 ){
return true;
}
if( $(this.parentNode).hasClass('open') ){
$(this.parentNode).removeClass('open');
return true;
}
else $(this.parentNode).addClass('open');
e.preventDefault();
return false;
});
Here's a very simple demo:
$("li#dropdown>a").click(function (){
$(".dropdownMenu").toggleClass("active");
});
.nav li.mainMenu{
margin:0;
padding:0;
list-style-type:none;
float:left;
}
.nav li a{
color:white;
background-color:#48a8f8;
text-decoration:none;
padding:5px 10px;
border:1px solid black;
}
li#dropdown a{
position:relative;
}
ul.dropdownMenu{
visibility:hidden;
margin:6px 0 0 0;
padding:0;
position:absolute;
}
ul.dropdownMenu.active{
visibility:visible;
}
ul.dropdownMenu li{
margin:0;
padding:0;
list-style-type:none;
line-height:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="mainMenu" id="dropdown">
Home
<ul class="dropdownMenu">
<li>Dropdown-1</li>
<li>Dropdown-2</li>
<li>Dropdown-3</li>
</ul>
</li>
<li class="mainMenu">About</li>
<li class="mainMenu">Projects</li>
<li class="mainMenu">Contact</li>
</ul>
I am total noob in Jquery. I created submenu in xhtml.
<p:panelMenu style="width:200px" id="menus">
<p:submenu label="Add Control" styleClass="ctl-tiered-submenu-1"
rendered="true">
<p:menuitem value="Bilance" actionListener="#{myIndexBean.addControl}"/>
<p:separator />
<p:menuitem value="Average Salary" />
</p:submenu>
</p:panelMenu>
Now I want have draggable MenuItem. I created this using JQuery:
$(".ui-panelmenu-content").draggable({revert:true });
Now I have draggable MenuItem, but I can't move this element outside of Submenu. How I can correct this?
HTML
<!Doctype html>
<html>
<body>
<ul>
<li>Blah
<li>Blah
<li>Blah
<li>Blah
<li>Blah
<li>Blah
</ul>
<div class="ui-widget-header">
<p>Drag a menu item over me!</p>
</div>
</body>
</html>
CSS
ul li {
display:inline-block;
position:relative;
text-align:center;
}
#media screen and (min-width:480px) {ul li{width:33.33%;}}
#media screen and (max-width:479px) {ul li{width:50%;}}
#media screen and (max-width:195px) {ul li{width:100%;}}
ul li a {
display:block;
padding:20px 0;
text-decoration:none;
color: black;
text-transform:uppercase;
}
ul li:nth-child(1) a{background-color: green;}
ul li:nth-child(2) a{background-color: red;}
ul li:nth-child(3) a{background-color: #ff8400;}
ul li:nth-child(4) a{background-color: purple;}
ul li:nth-child(5) a{background-color: #49a7f3;}
ul li:nth-child(6) a{background-color: yellow; }
.ui-widget-header {
height:56px;
padding:18px 0;
margin:auto !important;
text-align:center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
jQuery
$(function () {
$("ul li").draggable({
snap: ".ui-widget-header",
snapMode: "inner",
revert: "invalid"
});
$(".ui-widget-header").droppable({
accept: "li",
drop: function (event, ui) {
location = $(ui.draggable).children('a').data('address');
}
});
$(window).resize(function () {
var droppable = $('.ui-widget-header');
droppable.width($('li').outerWidth() - parseInt(droppable.css('borderLeftWidth'), 10) - parseInt(droppable.css('borderRightWidth'), 10));
}).resize();
});
I am new to CSS. I want to apply background color for div. But the div height is zero. div has child elements too.
Here is my code. I added float to that ul,li elements.I searched so many sites I applied clear to the div ,but its not changing.
<div id="menulinks">
<ul class="dropdown">
<li>
projectCategoraization
<div id="submenu_pc">
<ul class="submenu">
<li>dgfdg</li>
<li>tutyu</li>
<li>ert45</li>
<li>7y56uty</li>
</ul>
</div>
</li>
</ul>
</div>
style
#submenu_pc {
width:240px;
display:none;
position:absolute;
}
.dropdown {
float:left;
}
.dropdown li {
float:left;
list-style:none;
}
.submenu {
position:absolute;
}
.dropdown ul li {
float:none;
}
script is
$(function(){
$(".dropdown li").hover(function(){
//alert("soumya");
$(this).addClass("hover");
$('#submenu_pc').css('display', 'block');
});
});
.submenu has position: absolute which means its parent has a height of 0. Remove position: absolute and assign a background color to the parent; that should do it.
jsFiddle
Adding background color to the UL with class of submenu
.submenu
{
background-color:aqua;
}
Add this CSS and remove the script completely!
#menulinks{
overflow:hidden;
background: red; // choose your color
}
#submenu_pc {
width:240px;
display:none;
}
.dropdown li:hover #submenu_pc{
display: block;
}
.dropdown {
float:left;
}
.dropdown li {
float:left;
list-style:none;
}
.dropdown ul li {
float:none;
}
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/