I have a horizontal list menu, on which I want to use pseudo selectors: When you hover over the menu item, it should have a thick color underline. Each Menu item have a different width and its underlining effect should match that width
Here is a sample website with its underlining menus: http://www.theblackswantheory.org/
Here is my list:
<div id="other">
<div id="otherTable">
<ul id="ul1">
<li>Web Design</li>
<li>Graphic Design</li>
<li>Google Search Optimization</li>
</ul>
</div>
</div>
CSS:
#otherTable{
display: table;
margin: 0 auto;
}
#otherTable ul{
list-style: none;
}
#otherTable ul li{
display: inline;
margin: 10px;
}
ul#ul1{
color: #fff;
}
So what is the best way of going about this? I tried several things but does not work well (tables, another list below with the underlines etc...)
I would like it pure CSS and no javascript if possible...Which I believe it is
Thank You
Use a bottom border to simulate an underline (see jsfiddle):
#otherTable ul li:hover {
border-bottom: solid red 0.2em;
}
ul#ul1 > li:hover{
text-decoration:underline;
}
http://jsfiddle.net/Tymek/2P8UL/
HTML
<div id="menu">
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Google Search Optimization</li>
</ul>
</div>
CSS
#menu ul,
#menu li,
#menu a {
background: #111;
}
ul#menu {
list-style: none;
}
#menu li {
display: block;
float: left;
}
#menu a {
display: block;
margin: 0 0.5em;
padding: 15px 0 7px;
color: #ccc;
text-decoration: none;
text-transform: uppercase;
font: 13px/18px Arial, Helvetica, sans-serif;
font-weight: 300;
}
#menu a:hover {
color: #fff;
padding-bottom: 4px;
border-bottom: 3px solid #f00;
}
Key part:
#menu a {
padding: 15px 0 7px;
}
#menu a:hover {
padding-bottom: 4px;
border-bottom: 3px solid #f00;
}
Next time use firebug, or something to analize your example.
Related
I'm trying to turn off the hover for the current page in a navigation menu.
div.nav {
width: 100%;
padding: 6px;
height: 40px;
}
.nav li {
color: #FFFFFF;
display: inline;
list-style-type: none;
text-align: center;
text-transform: uppercase;
padding: 20px;
margin: 0px;
height: 40px;
}
li.current {
background-color: #424242
}
li.current:hover {
background-color: inherit;
}
.nav li:hover {
background-color: #737373;
<div class="nav">
<ul>
<li class="current">Home</li>
<li>About
</li>
<li>Contact
</li>
<li>Gallery
</li>
</ul>
</div>
Here is the jsfiddle:
https://jsfiddle.net/swordams/jk6z5aqj/
I want the li for home to stay dark and not change on hover. I've tried setting the hover background color to "inherit", but that doesn't work.
Thanks!
You can use the CSS :not() pseudo-class:
.nav li:hover:not(.current) {
background-color: #737373;
}
jsFiddle example
You can use the solution by j08691 but ultimately, the problem with your css is that .nav li:hover is more specific than li.current:hover. Tacking a .nav will do the trick.
.nav li.current:hover {
background-color: inherit;
}
just make the active/current li background color important
li.current {
background-color: #424242 !important;
}
I found this CSS code for an horizontal dropdown menu over the internet which at first seems really good (the results on chrome are perfect). However, when I try it with internet explorer, white spaces appear between the dropdown elements and I cannot navigate the menu.
Have any idea? Your help would be greatly appreciated.
HTML :
<div id="menu">
<ul>
<li>Accueil</li>
<li>CV</li>
<li>Enseignement
<ul>
<li>Plans de cours</li>
<li>Leçons</li>
<li>Powerpoints </li>
</ul>
</li>
<li>Recherche
<ul>
<li>Italia</li>
<li>Livres</li>
</ul>
</li>
<li>Liens</li>
<li>Contact</li>
<li>English</li>
</ul>
</div>
And the CSS :
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul a:hover {
color: #ffffff;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}
Are you missing some code from your examples or is this the exact code, because I think you'r missing the close
</ul>
?
This is how I want the navigation bar, as in : http://themediaoctopus.com/social-media/nostalgic-approach-advertising
How to change the complete color of <li> when hovered on or selected?
Any idea on how to get those seperators between those buttons?
Selection action doesn't work, why? I'm on a particular page and that button on navigation bar is not highlighted. Why and how can I do it?
Here is my current navigation bar when hovered:
Here is my HTML :
<body>
<nav>
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>GET IT</li>
<li>WHAT YOU CAN DO</li>
<li>ABOUT</li>
</ul>
</nav>
</body>
Here is my CSS :
body {
color : #F9F9F9;
}
nav {
background-color: #26AD60;
margin: 10px 10px 0px 10px;
}
nav ul {
margin: 0px;
list-style-type: none;
padding: 15px 0px 15px 0px;
}
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
color: #F9F9F9;
border-bottom: none;
font-weight: bold;
text-decoration: none;
}
nav ul li a:active {
background-color: #1C8148;
text-decoration: none;
}
nav ul li:hover {
background-color: #1C8148;
color: #F9F9F9;
}
Add this:
padding: 15px 10px 15px 10px;
To your nav ul li:hover{ CSS
Fiddle: http://jsfiddle.net/39Lzp/
In order to have that item be highlighted based on the page you are on you can add a class to it and style that class accordingly. Then, in each different HTML file, you add that class to the corresponding element. For example, index.html would look like this:
<li class="current">HOME</li>
<li>HOW IT WORKS</li>
But how_it_works.html would look like this:
<li>HOME</li>
<li class="current">HOW IT WORKS</li>
Now, for the borders, all you need to do is use the border property like so:
nav ul li {
border-left: 1px dashed white;
}
nav ul li:first-of-type {
border-left: none;
}
Also, in order for the border to span the entire height of the nav bar, change this:
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
To this:
nav ul li {
display: inline;
padding: 15px 10px 15px 10px;
}
http://jsfiddle.net/LbBEK/
Also, for future reference, you have 3 separate questions here. Next time, break your questions up to be more concise and you'll find yourself getting a much better response here on SO.
Its good if you use a:hover and the properties given to it... which allow user to have clickable area been selected and highlighted.
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>project</li>
</ul>
</nav>
CSS:
nav{
display:block;
background:#26AD60;
}
nav ul{
list-style:none;
margin:0px;
padding:0px;
overflow:hidden;
}
nav ul li{
float:left;
border-right: 1px dashed rgba(255, 255, 255, 0.25);
}
nav ul li:last-child{
border:none;
}
nav ul li a{
transition: all 0.25s linear 0s;
padding: 0px 20px;
line-height: 50px;
outline: medium none;
font-family:arial;
font-size:12px;
color: rgb(255, 255, 255);
text-shadow: none;
text-transform: uppercase;
text-decoration:none;
display:block;
}
nav ul li a:hover{
background: #229b56;
}
Please check this jsfiddle to see the same.
Just change the hover statement background-color
nav ul li:hover {
background-color: blue; // here
color: #F9F9F9;;
}
You may want to change the active statement too
nav ul li a:active {
background-color: red;
text-decoration: none;
}
For the border, you can like something like this :
nav ul li {
border-right: 1px dashed rgba(255,255,255,0.25)
}
nav ul li:last-child {
border: 0; // they dont do this, but I prefer with it. As you want.
}
Demo JSFiddle
Apply this on hover padding: 15px 10px 15px 0px;
See demo
Apply border property border-right: 1px dashed #fff for dashed separation between li.
I've posted my codes on JsFiddle. Problem is if i hover a link that background color does not appear fully. Background color only appears for the text only. i want that background color should appear based on the particular width and height of the link.
HTML :
<div id="menu">
<ul class="menubar">
<li>link</li>
<li>link1</li>
<li>link2
<ul class="sidemenu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
CSS :
body
{
background: rgba(120,120,120,0.1);
padding: 0;
margin: 0;
}
#logo
{
height: 50px;
}
#menu
{
background-color: #CC0000;
height: 40px;
}
.menubar
{
list-style-type: none;
text-align: center;
width: auto;
position: relative;
}
.menubar li
{
display: inline-block;
padding: 10px 20px 5px 20px;
}
.menubar li a
{
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
.menubar li a:hover
{
background-color: rgba(255,255,255,0.3);
}
.sidemenu
{
display: none;
}
.menubar li:hover .sidemenu
{
display: block;
}
.sidemenu
{
background-color: #CC0000;
position: absolute;
height: 40px;
width: 70px;
height: 100px;
}
.sidemenu li a:hover
{
background-color: rgba(255,255,255,0.3);
}
If you apply the effect on the <li>, the hover effect will work, but the dropdown won’t show until your mouse is perfectly placed on the link itself. This can be confusing for the user since the effect and the result differ.
I suggest you apply the padding to the link instead so the link area is bigger. It fix the visual problem and also improve the experience.
.menubar li {
display: inline-block;
}
.menubar li a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
Here’s a complete Fiddle with some extra fixes to your dropdowns.
Simply change this:
.menubar li a:hover
To this:
.menubar li:hover
This will apply the background to the whole list item when hovered.
Updated fiddle.
change
.sidemenu li a :hover
{
background-color: rgba(255,255,255,0.3);
}
with
.sidemenu li:hover
{
background-color: rgba(255,255,255,0.3);
}
FIDDLE
Doing some basic html/css. I was making a rudimentary navbar with floated links. After getting it working I was stuck with this problem, and so far have not come to a solution.
My links have these dots in them. As the picture shows.
My code is simple:
HTML
<div id="nav-wrapper">
<div id="navbar">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div>
and the CSS
#nav-wrapper {
background-color: black;
height: 40px;
width: 100%;
border-top: 2px solid gray;
border-radius: 0 0 5px 5px;
}
#navbar {
}
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
}
ul#nav * a {
width: 25px;
margin: 0 10px 10px 0;
}
My question is what is causing these dots? And why don't they appear if I add more words/links to the list or I erase all but one item? It's odd. I must be missing something extremely embarrassing because this just seems odd.
You want to use the code - list-style: none;
so your code will look like
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
list-style: none;
}
Add this style:
list-style-type: none;
To this selector:
ul#nav li
Modify your declaration for ul#nav li to include this property
list-style:none;
http://jsfiddle.net/bcDDk/