I have the following code that will change the state of a button when the text is changed, Even though the back style is applied successfully the color of the text will not change.
Code:
.links li {
float: left;
padding: 5px 5%;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
border-radius: 3px;
}
.links li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
Check the sample. I made two samples- one with tag and one without.
<ul class="links1">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
<ul class="links">
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
http://jsfiddle.net/es_kaija/rx3avr7r/
Related
Would the following CSS selectors select the same elements?
ul > li[class="a"] { }
vs
ul > li.a
Would the following CSS selectors select the same elements?
No they don't. Notice how in the below example the last element isn't selected by ul>li[class="a"] because that selector will select element having only a as a class.
ul>li.a {
color: red;
}
ul>li[class="a"] {
font-size: 30px;;
}
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a b">Item 3</li>
</ul>
Even whitespace count:
ul>li.a {
color: red;
}
ul>li[class="a"] {
font-size: 30px;;
}
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a b">Item 3</li>
<li class="a ">Item 3</li>
</ul>
Both selectors work the same:
#one ul>li.a {
color: red;
}
#two ul>li[class="a"] {
color: orange;
}
<div id="one">
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a">Item 3</li>
</ul>
</div>
<div id="two">
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a">Item 3</li>
</ul>
</div>
I am trying to make a mega drop down menu. I just want to second list items to stack up like a simple list but they hide behind one another. I don't know where I am make the mistake.
nav div .main-ul li{
display: inline-block;
}
.sub-ul li{
display: block;
position: absolute;
}
<div>
<ul class="main-ul">
<li>Item 1
<ul class="sub-ul">
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>
Just stack up the sub menu item with css.
Please try this.
<div>
<ul class="main-ul">
<li>Item 1
<ul class="sub-ul">
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
CSS
div .main-ul li {
display: inline-block;
position: relative;
border: 1px solid red;
}
div .main-ul li > .sub-ul {
display: none;
position: absolute;
top: 20px;
left: -1px;
padding: 0;
}
div .main-ul li:hover > .sub-ul {
display: block;
}
div .main-ul li > .sub-ul > li {
white-space: nowrap;
}
JsFiddle
In bootstrap, it is as simple as:
<ul class="list-inline">
<li>...</li>
</ul>
I'm wondering how can it be done materializecss without using <nav> ?
Alternativey, you can just copy the bootstrap style:
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="categories-container pin-top" style="top: 0px;">
<ul class="categories db">
<li class="k">All</li>
<li>Polygon</li>
<li>Big Bang</li>
<li>Sacred Geometry</li>
</ul>
</div>
here you go -> https://themes.materializecss.com/pages/demo
also you can use class .row
I have an inline menu of which I want to change the last menu item so that it is a different coloured box with a different coloured text. I've managed to do this with the below class but I can't seem to work out how to change the hover state no matter what I've tried. How do I script that? Thanks.
#navbar a.blogbox {
background-color: #E4E9E7;
padding: 3px;
margin-left: 4px;
border-left: none;
text-transform:uppercase;
font-weight: bold;
color: #c52a45;
}
<div id="navbar">
<ul>
<li class="activepage">HOME</li>
<li>about us</li>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
<li>contact</li>
<li><a class="blogbox" href="/blog/index.php">Blog</a></li>
</ul>
</div>
Is this what you want to happen?
#navbar a.blogbox {
background-color: #E4E9E7;
padding: 3px;
margin-left: 4px;
border-left: none;
text-transform:uppercase;
font-weight: bold;
color: #c52a45;
}
#navbar a.blogbox:hover {
color: green;
}
<div id="navbar">
<ul>
<li class="activepage">HOME</li>
<li>about us</li>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
<li>contact</li>
<li><a class="blogbox" href="/blog/index.php">Blog</a></li>
</ul>
</div>
I added a horizational menu in a header of WordPress within a <nav id="hoz-menu"> I have no idea which CSS statement make the menu exceed the block. It is supposed the CSS of the menu is responsive.
Demo can be found from http://jsfiddle.net/yckelvin/nqx2a1ao/
Here is the screen capture of the Chrome debug http://screencloud.net/v/Ernf
Below is HTML code of the menu
<nav id="hoz-menu">
<ul id="hoz-menu" class="topmenu">
<li class="topfirst"><span>Item 1</span>
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul></li>
<li class="topmenu"><span>Item 2</span>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
<li>Item 2.4</li>
<li>Item 2.5</li>
</ul></li>
<li class="topmenu">Item 3</li>
<li class="topmenu">Item 4</li>
<li class="topmenu">Item 5</li>
<li class="topmenu">Item 6</li>
<li class="toplast">Item 7</li>
</ul>
</nav>
the width of <nav id="hoz-menu"> is 420px and CSS is
{
display: block;
}
CSS of <ul id="hoz-menu" class="topmenu">
#hoz-menu ul#hoz-menu, ul#hoz-menu ul {
margin: 0;
list-style: none;
padding: 0;
background-color: #dedede;
border-width: 1px;
border-style: solid;
border-color: #5f5f5f;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}