I have the following html code:
<ul class="hover amazing-menu">
<li>
item1
</li>
<li class="parent-item">
item2 <span class="fa fa-caret-down"></span>
<ul class="hover sub-menu">
<li class="parent">
sub-item1 <span class="fa fa-caret-right"></span>
<ul class="sub-menu2">
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
</ul>
</li>
</ul>
</li>
</ul>
And the following style:
.hover > li.parent-item:hover > ul.sub-menu, .hover > li.parent:hover > ul.sub-menu2{
opacity: 1 !important;}
I want to show sub menu when I hover to element with .parent-item class. It works properly, But when I hover to its children, Sub menu is shown.
Try to use display: none; and trigger the shown on the shown element :hover.
Look at this example:
ul.sub-menu,
ul.sub-menu2 {
display: none;
}
a:hover + ul.sub-menu,
a:hover + ul.sub-menu2,
ul.sub-menu:hover,
ul.sub-menu2:hover {
display: block;
}
<ul class="hover amazing-menu">
<li>
item1
</li>
<li class="parent-item">
item2 <span class="fa fa-caret-down"></span>
<ul class="hover sub-menu">
<li class="parent">
sub-item1 <span class="fa fa-caret-right"></span>
<ul class="sub-menu2">
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
<li>sub-item11</li>
</ul>
</li>
</ul>
</li>
</ul>
Fiddle example
Related
I created some classes for the menu items, so I can call upon them.
.dropdownBox {
display: none;
}
.dropdown li:hover > ul.dropdownBox {
display: block;
}
However, the roll over state for 'Work' that has the class .dropdown is now showing the submenu items that has the class .dropdownBox
<nav class="screen2_menu_container">
<label for="screen2_menu_check" class="screen2_menu_btn">
<!-- checkbox to track when the hamburger menu is clicked on -->
<input type="checkbox" id="screen2_menu_check" class="screen2_input" />
<!-- the hamburger menu -->
<div class="screen2_menu_hamburger"></div>
<!-- menu items -->
<ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
<span>> CONTACT</span>
</ul>
<ul
id="screen2_menu_items_Nav"
class="screen2_menu_items navPositionLeft"
>
<li>
<span>> HOME</span>
</li>
<li class="dropdown">
<span>> WORK</span>
</li>
<ul class="dropdownBox">
<li>
<span>WORK-1</span>
</li>
<li>
<span>WORK-2</span>
</li>
<li>
<span>WORK-3</span>
</li>
</ul>
<li>
<span>> REEL</span>
</li>
<li class="hideDiv">
<span>> CONTACT</span>
</li>
</ul>
</label>
</nav>
I'm trying to use the class .dropdown so when you roll over it, it shows the class .dropdownBox But I cant seem to get the right selector working.
just update your CSS. Hope this will work for you.
.dropdownBox {
display: none;
}
.dropdown:hover + .dropdownBox {
display: block;
}
.dropdownBox:hover {
display: block;
}
<nav class="screen2_menu_container">
<label for="screen2_menu_check" class="screen2_menu_btn">
<!-- checkbox to track when the hamburger menu is clicked on -->
<input type="checkbox" id="screen2_menu_check" class="screen2_input" />
<!-- the hamburger menu -->
<div class="screen2_menu_hamburger"></div>
<!-- menu items -->
<ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
<span>> CONTACT</span>
</ul>
<ul
id="screen2_menu_items_Nav"
class="screen2_menu_items navPositionLeft"
>
<li>
<span>> HOME</span>
</li>
<li class="dropdown">
<span>> WORK</span>
</li>
<ul class="dropdownBox">
<li>
<span>WORK-1</span>
</li>
<li>
<span>WORK-2</span>
</li>
<li>
<span>WORK-3</span>
</li>
</ul>
<li>
<span>> REEL</span>
</li>
<li class="hideDiv">
<span>> CONTACT</span>
</li>
</ul>
</label>
</nav>
I am looking to target the last li in a ul in order to just change that specific li's color and background-color
i.e. changing the color and background-color of the specific li I want to change. This list is for a Dropdown navigation menu.
<ul class="site-nav">
<li class=" ">
<a href="/" class="current">
<span>LIST ONE</span>
</a>
</li>
<li class="dropdown">
<a class="" href="/list-nav-two"><span>LIST TWO</span></a>
<ul class="site-nav-dropdown">
<li><span>SERIES 1</span></li>
<li><span>SERIES 2</span></li>
<li><span>SERIES 3</span></li>
<li> <span>SERIES 4</span> </li>
<li><span>THIS IS THE LI TO CHANGE</span></li>
</ul>
</li>
<li class="dropdown"><a class="menu__moblie" href="/list-nav-three"><span>LIST THREE</a>
<ul class="site-nav-dropdown">
<li><span>SERIES 1</span></li>
<li><span>SERIES 2</span></li>
<li><span>SERIES 3</span></li>
<li> <span>SERIES 4</span> </li>
</ul>
</li>
</ul>
I thought of using:
ul .site-nav-dropdown li:nth-last-child(1) a {
background-color: red;
color: #fff;
}
But this highlights both bottom lis in list two and list three
Change your selector to this to only addess the last li in the second submenu:
ul.site-nav > li:nth-child(2) ul.site-nav-dropdown li:last-child a
background: red;
color: #fff;
}
ul.site-nav > li:nth-child(2) ul.site-nav-dropdown li:last-child a {
background: red;
color: #fff;
}
<ul class="site-nav">
<li class=" ">
<a href="/" class="current">
<span>LIST ONE</span>
</a>
</li>
<li class="dropdown">
<a class="" href="/list-nav-two"><span>LIST TWO</span></a>
<ul class="site-nav-dropdown">
<li><span>SERIES 1</span></li>
<li><span>SERIES 2</span></li>
<li><span>SERIES 3</span></li>
<li>
<span>SERIES 4</span>
</li>
<li><span>THIS IS THE LI TO CHANGE</span></li>
</ul>
</li>
<li class="dropdown"><a class="menu__moblie" href="/list-nav-three"><span>LIST THREE</a>
<ul class="site-nav-dropdown">
<li><span>SERIES 1</span></li>
<li><span>SERIES 2</span></li>
<li><span>SERIES 3</span></li>
<li>
<span>SERIES 4</span>
</li>
</ul>
</li>
</ul>
I have ul elements like below in my html
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
</ul>
Now I want to use a button just below this ul. But when I put something like the code below it breaks.
<input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</input>
So is there any way I can put my button as a li element in order to get the exact same look(CSS).
Here's the fiddle for the same. The button should look like the ul element
Here is the code just add a button in a "li" element and remove bullet.
<ul class="nav" id="loadCategories">
<li class="sub-menu">
Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">
Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="no-bullet">
<button type="button" class="signout_btn" id="btnSignOut">Sign Out</button>
</li>
</ul>
Also make the list-style-type to none
.no-bullet{
list-style-type: none
}
Here is a fiddle check it out.Hope it helps!! link
Did you try width=100% and height=100% with set parameters for the list?
you can try this
<ul class="nav" id="loadCategories">
<li><input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</li>
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
</ul>
<input> elements are empty (you shouldn't use end tags). I prefer to use <button> elements:
<button class="signout_btn" id="btnSignOut">Sign Out</button>
Could you please check with this code?
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">
<button class="signout_btn" id="btnSignOut" style="background: none;border:none;color: #fff;margin-left: 20px;">Sign Out</button>
</li>
</ul>
The output will be:
Please try below code snippet..
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">
</ul>
CSS:
.signout_btn{
text-transform: uppercase;
outline: none;
border: 0;
background-color: #673a9a;
line-height: 40px;
color: #fff; display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
JAVASCRIPT:
$( ".menu" ).click(function() {
$('.slide-menu').addClass('active');
$('.slide-wrapper').addClass('active');
});
$( "li.sub-menu" ).click(function() {
$(this).toggleClass('act');
$(this).find('ul').slideToggle();
});
Example here: http://jsfiddle.net/wsAK2/
Hello I have this html code:
<ul class="sidebar-nav">
<li class="sidebar-top"></li>
<li class="active">
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-home"></i>Dashboard<i class="fa fa-angle-down"></i>
<ul id="dashboard" class="collapse">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
</ul>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-signal"></i><span>Charts</span><i class="fa fa-angle-down"></i>
<ul id="charts" class="submenu collapse">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
</ul>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-users"></i><span>Users</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-calendar-o"></i><span>Calendar</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-gamepad"></i><span>Services</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-gears"></i><span>Options</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-envelope"></i><span>Email</span>
</div>
<div class="menu-arrow"></div>
</li>
</ul>
and the following css rule:
.sidebar-nav > li > div > a > span:first-letter {
font-weight:bold;
}
and here is the span element being inspected with chrome:
media="screen"
.sidebar-nav > li > div > a > span:first-letter {
font-weight: bold;
}
As you can see bold has no effect on it and I can't understand why ?
same happens in firefox too.
The problem is, that the :first-letter doesn't work on inline-element(such as span e.g), but on block/inline-block elements (e.g. p, table caption, table cell, etc).
Therefore it's better to apply :first-letter to a p instead of a span.
p:first-letter {font-weight: bold;}
If you really need that :first-letter selector on the span, you can still add display:block to the span
.sidebar-nav > li > div > a > span { display: inline-block; }
:first-letter does not appply to inline elements.
.sidebar-nav > li > div > a > span {
display: inline-block;
}
.sidebar-nav > li > div > a > span:first-letter {
font-weight:bold;
}
Per MDN:
A first line has only meaning in a block-container box, therefore the
::first-letter pseudo-element has only an effect on elements with a
display value of block, inline-block, table-cell, list-item or
table-caption. In all other cases, ::first-letter has no effect.
An easy way to fix this is to change your span displays to inline-block:
span {
display:inline-block
}
jsFiddle example
I'm new to bootstrap and am having a bit of trouble positioning a fluid dropdown menu. I would like to have it in the center or my page and have tried a few things, but it's not quite right.
I have tried to add a class of span6 and then add float: none; margin: 0 auto; to the css, and this does center it, but when the responsive menu kicks in it's somewhere between the middle instead of the left side. This also messes with the menu items.
I have also tried placing text-align:center; in various places to see if that would do anything, but it doesn't seem to effect anything.
Any help would be wonderful!
Here is my html
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
set margin-left:auto; margin-right:auto on ul with class nav
In Bootstrap.css line: 3102 edit
.nav > li > a {
/* display: block; */
}
Edit the bootstrap.css file line: 3638 to 3651 as shown:
.navbar .nav {
position: relative;
left: 0;
display: block;
/* float: left;
*/ margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
float: right;
margin-right: 0;
}
.navbar .nav > li {
/* float: left; */
}
For the following HTML works. It displays the menu center aligned.
<html>
<head>
<link rel="stylesheet" href="public/css/LNedit.css"><link rel="stylesheet" href="public/css/bootstrap2.css">
<style>
.navbar-inner {
text-align: center !important;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 navbar-inner" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"> </script><script type="text/javascript" src="js/markdown.js"> </script><!--script(type='text/javascript', src='js/main.js') --><!--script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js')--><!--script(type='text/javascript', src='js/ui-bootstrap-tpls-0.4.0.min.js')--><script type="text/javascript" src="js/bootstrap-markdown.js"></script>
</body>
</html>