I want to add a drop down menu in "about us" tab in main menu, I tried hard but its not showing,
Here is the html code for the lists,
<li>
About Us
<ul class="sub-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
and here is my css for the drop down menu I have created:
#menu ul li{float:none}
#menu ul li a{background:none !important;}
#menu ul li a:hover{background:url(../images/menu_active.gif) top repeat-x !important;display:block}
#menu ul{border:solid 1px #FC0;position: absolute;z-index: 100;background: #000;width:300px;display:none}
In this fiddle is a working version of your code:
Jsfiddle
Explanation:
You are not selecting the write <ul> in your css
#menu ul li:hover ul{background:url(../images/menu_active.gif) top repeat-x !important;display:block;}
#menu ul li ul{border:solid 1px #FC0;z-index:999;background: #000;width:300px;display:none;}
Check for the full code the JSFiddle
If you want to select a <li> of a <ul> in a <ul>or<li> Use this in your css.
ul li ul li {}
This is an example for dropdown in pure css.
.sub-menu { display: none; }
.menu:hover + .sub-menu { display: block; }
http://jsfiddle.net/greatghoul/TDA62/
Related
I am curious, how to change the code that drop-down opens and closes only by clicking on the link. Because now it also closes and opens if you click on the body of the drop-down itself.
$(document).ready(function(){
$( "ul" ).click(function() {
$(this).children('li:not(.init)').slideToggle(0);
$(this).find("li.init").toggleClass("init1");
});
});
.selectContainer ul{
width:200px;
}
.selectContainer ul li
{
border:1px solid green;
width:100%;
cursor:pointer;
list-style: none;
}
.selectContainer ul li:not(.init){
display:none;
float:left;
}
li.init{position:relative;}
li.init:after{content:"\2193 ";position:absolute;right:5px;}
li.init1:after{content:"\2191 ";position:absolute;right:0;}
<div class="selectContainer">
<ul>
<li class="init">Select</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
</ul>
</div>
You can try:
$( "ul li.init" ).click(function(e) {
$('li:not(.init)').slideToggle(0);
$(this).toggleClass("init1");
});
You query the "ul"-element with $( "ul" ) and define it's click. Obviously all the space after it is part of the ul-element.
Why don't you try to set the $("li.init").click instead. Inside the function you could query for the "ul" just as in your example. But set the .click of the "li".
I am having problems getting the sub menu on my nav bar to display correctly - hovering doesn't seem to be over the correct link ("media") but in between, and the dropdown displays off to the right and not under "media" link.
Any suggestions gratefully received.
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Testimonials</li>
<li><a>Media</a>
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li>More Info</li>
</ul>
</nav>
css here:
nav ul {
background-color: black;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
}
nav ul ul li {
display: block;
}
Include the whole sublist ul inside the A tag, instead of after it. That means you need to adjust the nav ul li:hover > ul line as well (you can drop the > if you don't require further levels)
Please help, need to add delay on css menu mouse out. Tried different ways but no success. Is it possible to add some javascript code to existing menu?
Please check the jsFiddle example: http://jsfiddle.net/mZLFz/
<div id="nav">
<ul>
<li class="abt">About Us
<ul>
<li>Our style</li>
<li>Our mission</li>
</ul>
</li>
<li class="col">Collection
<ul>
<li class="col-a">2013
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li class="col-b">2014
<ul>
<li>A</li>
</ul>
</li>
</ul>
</li>
<li class="buy">Good to know
<ul>
<li class="buy-a">Men
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li class="buy-b">Women
<ul>
<li>A</li>
</ul>
</li>
<li class="buy-c">Kids
<ul>
<li>A</li>
</ul>
</li>
</ul>
</li>
#nav{
height:40px;
overflow:hidden;
list-style:none;
}
#nav ul {list-style:none;}
#nav ul li {text-decoration: none;float:left;}
#nav ul li a {
text-transform:uppercase;
font-size:14px;
color:#bcbec0;
text-decoration: none;
padding:0 20px 3px 20px;
}
#nav ul li:hover > a{border-bottom: 2px solid #afb0bd;color:#383a49;}
/* 1 LEVEL DROP-DOWN MENU */
#nav ul li.abt ul {margin-left:-30px;}
#nav ul li.col ul {margin-left:-100px;}
#nav ul li.buy ul { margin-left: -213px;}
#nav ul li.buy ul li {margin-left: 30px;}
#nav ul li ul { display:none;}
#nav ul li:hover > ul {width:100%;display:block; position:absolute; top:48px;background:#e7e8e9;}
#nav ul li:hover > ul li{ float:left;padding:10px 0 5px 0;list-style:none;}
#nav ul li:hover > ul li a {}
#nav ul li:hover > ul li a:hover {}
/* 2 LEVEL DROP-DOWN MENU */
#nav ul li ul li.col-a ul { margin-left:-50px;top:35px;}
#nav ul li ul li.col-b ul { margin-left:-100px;top:35px;}
#nav ul li ul li.buy-a ul { margin-left:-30px;top:35px;}
#nav ul li ul li.buy-b ul { margin-left:-160px;top:35px;}
#nav ul li ul li.buy-c ul { margin-left:-30px;top:35px;}
#nav ul li > ul li ul { display:none; }
#nav ul li > ul li:hover > ul {width:980px; display:block; position:absolute;background:#f1f1f2;}
#nav ul li > ul li:hover ul li {float:left;padding-top:10px; list-style:none; }
#nav ul li > ul li:hover ul li a {}
#nav ul li > ul li:hover ul li a:hover { }
You can change some :hover to .hover and add some jQuery like this?
$('li').hover(
function(){
var x = this;
setTimeout(
function(){
$(x).addClass('hover')
}, 800
)
},
function(){
$(this).removeClass('hover')
}
)
I have a vertical menu with some items that have a submenu that appears to the right of that item. This is mostly working fine, but the main menu might have a whole lot of items on it, so I want a max-height on it with a vertical scrollbar.
The problem is that if I set overflow: auto on the main menu, then the submenu no longer displays correctly because it can't overflow the main menu width.
Here's my code with an example at http://jsfiddle.net/FK8p6/. If you remove the overflow: auto from the .menu class, then you can see the submenu working correctly, but of course the main menu isn't displayed correctly any more, then.
HTML:
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>
Menu 6
<ul class="menu submenu">
<li>SubMenu 1</li>
<li>SubMenu 2</li>
<li>SubMenu 3</li>
</ul>
</li>
</ul>
CSS:
.menu
{
padding: 5px;
list-style-type: none;
background-color: #99f;
max-height: 80px;
width: 100px;
overflow: auto;
}
.menu li
{
border: #ddd 1px solid;
position: relative;
line-height: 24px;
cursor: default;
}
.menu li:hover
{
background-color: #d1e7ff;
}
.submenu
{
max-height: none;
background-color: #fff;
padding: 0;
position: absolute;
top: -1px;
left: 100%;
display: none;
}
.menu li:hover .submenu
{
display: block;
}
I know that I could pull the submenu outside of the main menu in the heirarchy, and then use javascript to position it. But then I lose the pure CSS menu and it would also no longer be semantic. I can live with that if I have to, but I'd like to find a better solution if possible.
Have you seen this tutorial? I don't think there's any problem with a fixed-height nav bar ...
http://www.devinrolsen.com/pure-css-horizontal-menu/
Oh darn - vertical menu? Possibly this won't help then.
Hello i am developing a web site.... its my second one, and i am trying to center a ul inside a div
i want to place icons in anchor tags and use background positioning for sprite use.... the thing is how can i set to center the ul inside the div or inside the ul ...
example of my code here:
http://jsfiddle.net/kowen/wAdf3/1/
here is the code: (html)
<div id="container">
<ul>
<li><a class="fbicon" href="#">hola 1</a>
</li>
<li><a class="twttricon" href="#">hola 2</a>
</li>
<li><a class="sndcloudicon" href="#">hola 3</a>
</li>
<li><a class="emailicon" href="#">hola 4</a>
</li>
</ul>
and css:
#container {
width: 400px;
height:400px;
text-align: center;
background-color:gray;
}
#container ul {
display: inline-block;
}
#container li {
/* float: left;*/
height: 33px;
line-height: 30px;
text-indent:-999em;
}
#container li a {
width:32px;
height:32px;
background-image:url(http://www.testcloud.com.ar/social-icons.png);
}
a.fbicon {
background-position:-5px center;
}
a.twttricon {
background-position:-42px center;
}
a.sndcloudicon {
background-position:-111px center;
}
a.emailicon {
background-position:-148px center;
}
i have tried a few recipes but no clue how can i do that....
how can i get the a displayed as a block so it can be shown the full icon on screen???
thanks in advance for your help.
Salutations