This question already has answers here:
Problem with odd/even child elements in nth-child
(2 answers)
Closed 6 years ago.
I have a menu with a dropdown where i would like to have different colors on odd lines and applying css to achieve this.
so first line and third line is the same color and the second and fourth are another color.
this is my menu:
<ul class="nav navbar-nav">
<li><a title="home">home</a></li>
<li class="dropdown">
option <b class="caret"></b>
<ul class="dropdown-menu">
<li><a title="option1">option1</a></li>
<li><a title="option2">option2</a></li>
<li><a title="option3">option3</a></li>
<li><a title="option4">option4</a></li>
</ul>
</li>
</ul>
i have added oddChild class to every odd line which is color the line..but I would like to do something like
.dropdown-menu < odd {
background-color: white;
}
Is this possible?
nth-child makes this easy...
.dropdown-menu li:nth-child(2n) or .dropdown-menu li:nth-child(odd)
.dropdown-menu li:nth-child(2n) { background: #a00; }
<ul class="nav navbar-nav">
<li><a title="home">home</a></li>
<li class="dropdown">
option <b class="caret"></b>
<ul class="dropdown-menu">
<li><a title="option1">option1</a></li>
<li><a title="option2">option2</a></li>
<li><a title="option3">option3</a></li>
<li><a title="option4">option4</a></li>
</ul>
</li>
</ul>
Use the CSS pseudo-classes :nth-child(odd) and :nth-child(even)
.dropdown-menu > li:nth-child(odd) {
background-color: white;
}
.dropdown-menu > li:nth-child(odd) {
background-color: skyblue;
}
<ul class="nav navbar-nav">
<li><a title="home">home</a></li>
<li class="dropdown">
option <b class="caret"></b>
<ul class="dropdown-menu">
<li><a title="option1">option1</a></li>
<li><a title="option2">option2</a></li>
<li><a title="option3">option3</a></li>
<li><a title="option4">option4</a></li>
</ul>
</li>
</ul>
Related
Hey everyone I am facing this issue and I don't seem to find any solution. Actually I have created a bootstrap drop-down menu given below.
<ul class="nav navbar-nav">
<li>Menu1</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu drop-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
And I have applied the CSS given below.
.drop-menu a:hover{background-color:red!important;}
But the background color is still the default one(of bootstrap) when I take the mouse over the anchor tag placed inside the drop down menu
you're creating the hover over only the link, in this case the <a> tag. Try removing the <a> tag and put the hover over the full menu-item. example code.
ul.dropdown-menu li:hover {
background-color:red!important;
}
If you really want the background only behind the link then use the following css.
ul.dropdown-menu li a:hover {
background-color:red!important;
}
.menu li a:hover{
background-color:red!important;
}
<ul class="nav navbar-nav">
<li>Menu1</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu drop-menu menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
Please try this:
.nav>.drop-menu>li>a:hover
{
background-color:red;
display:block:
}
Found the solution.
Actually bootstrap adds background-image to a tag. To remove it I added the following code to existing css.
.drop-menu a:hover{background-color:red!important; background-image:none!important;}
I am currently trying to change the properties of another object in css but am not sure if I am doing this right. Any help would be appreciated.
ul.drop-menu {
opacity: 0.1;
}
nav > ul > li:hover ~ ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
~ is a "general sibling selector", so it will match any element that is a sibling that comes after the element on the left side of the selector.
With your markup, you either just want to remove ~ to target any ul.drop-menu that is a child of li, or if you want the direct descendent, change it to a >. I'm assuming you want the latter, in case you nest multiple .drop-menu's in li's. I added another nested menu and changed your selector a little to demonstrate that.
ul.drop-menu {
opacity: 0.1;
}
nav > ul li:hover > ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
You have to use > instead of ~. Please check this:
ul.drop-menu {
opacity: 0.1;
}
nav > ul > li:hover > ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
I can't get the background colour of my dropdown to change when it's open.
My CSS code is
.dropdown.open {
background-color: black;
}
My HTML is
<ul class="nav navbar-nav navbar-right">
<li>WEB DEVELOPMENT</li>
<li>PROGRAMMING</li>
<li>DESIGN</li>
<li><a href="#game-hidden" ></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"
onClick="TypeGameDesign()">
GAME DEVELOPMENT
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Unity3D</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Coming...</li>
<li>UE4</li>
<li>VR</li>
</ul>
</li>
</ul>
The background color belongs to the a. So, use this:
.dropdown.open > a {
background-color: #000 !important;
}
I need to make the filter button aligned to the menu and modify its css using bootstrap. I am new to bootstrap so cant figure it out. i have tried padding the result but it didnt work. Thank you in advance :)
<ul class="nav navbar-nav container col-md-6">
<li class="dropdown col-md-2">
School <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Category <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
<li>Jobs & Internships</li>
</ul>
</li>
<li class="dropdown col-md-2">
Course <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Degree <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Degree <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="col-md-2">
<button type="submit" class="btn btn-mine" >Filter Results</button>
</li>
</ul>
Add the id btnFilter to your "Filter Results" button and add the following css to your stylesheet
#btnFilter {
margin:9px 0 0;
}
.cat > b.caret {
position:absolute;
top:50%;
}
The caret on the category dropdown was falling down so I have adjusted that as well by adding class cat and absolutely positioning the caret.
I have created a pen using html you provided. http://codepen.io/shreya1289/pen/KMKOLg
For that you need to some customization for set the control location in your page like as per below it will helpful to you.
<style type="text/css">
.caret{
margin-left:62px !important;
}
a.dropdown-toggle {
line-height: 0px !important;
}
</style>
here you are not added full html code so may be you need some alteration in above styles.
I cant post an image, but i have a navigation menu on a site im coding. Im trying to crush the site for mobile, but when I do this the li menu drops under. However I want it to center.
This is the code i have so far
#media (min-width:768px){
}
<ul class="nav nav-tabs nav-menu img-centered">
<li class="nav-link-green">Home</li>
<li class="nav-link-yellow">About Us</li>
<li class="nav-link-red">Parents & Carers</li>
<li class="nav-link-blue">Young People</li>
<li class="nav-link-purple">News & Updates</li>
<li class="nav-link-green">Contact Us</li>
<li class="nav-link-blue dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" href="#">Publications <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Safeguarding Library</li>
<li class="nav-divider"></li>
<li>Learning Zone</li>
<li class="nav-divider"></li>
<li>TSCB Publications</li>
</ul>
</li>
</ul>
I hope this makes sense. If you need anything more please let me know. This is my first post
Did you try the class .collapse on your nav?
like here: http://getbootstrap.com/components/#navbar
Ok, worked this out. Just added this code to the css.
ul {
display: block;
text-align: center;
}
li {
display: inline-block;
position: relative;
text-align: center;
float: none;
}
This makes it happen.