Issue with hover in CSS - html

Whenever i hover my mouse not on the text but on the other side of the text it shows my hover.. i want it so it hover only on the text itself not when my mouse is outside the text.
here is my code
<div class="MiniListAll">
<ul>
<li class="MiniListLI"> Christmas trees </li>
<li class="MiniListLI"> Christmas lights </li>
<li class="MiniListLI"> Ornaments </li>
<li class="MiniListLI"> Tree toppers </li>
<li class="MiniListLI"> Candle holders </li>
</ul>
</div>
CSS
.MiniListLI{
list-style-type: none;
color: #737373;
}
.MiniListLI:hover{
text-decoration: underline;
color: black;
}
i tried googling the answer but nothing came up.


You have to use inline elements inside <li> tags:
HTML
<div class="MiniListAll">
<ul>
<li class="MiniListLI">Christmass trees</li>
<li class="MiniListLI">Christmass lights</li>
<li class="MiniListLI">Ornaments</li>
<li class="MiniListLI">Tree toppers</li>
<li class="MiniListLI">Candle holders</li>
</ul>
</div>
CSS
.MiniListLI {
list-style-type: none;
}
.MiniListLI a {
text-decoration: none;
color: #737373;
}
.MiniListLI a:hover {
text-decoration: underline;
color: black;
}
jsfiddle-link


Here is one way:
CSS:
.MiniListLI{
list-style-type: none;
}
.MiniListLI a {
text-decoration: none;
color: #737373;
}
.MiniListLI a:hover{
text-decoration: underline;
color: black;
}
HTML:
<div class="MiniListAll">
<ul>
<li class="MiniListLI">Christmass trees</li>
<li class="MiniListLI">Christmass lights</li>
<li class="MiniListLI">Ornaments </li>
<li class="MiniListLI">Tree toppers </li>
<li class="MiniListLI">Candle holders </li>
</ul>
</div>

Related

" text-underline-offset" not working in "display: block"

Here's my code
.link {
text-decoration: none;
padding: 0.5rem 1rem;
display: inline-block;
}
.navigation .active {
font-weight: bold;
text-decoration: underline;
text-underline-offset: 5px;
}
<nav class="navigation container">
<div class="nav-brand">iAmADeveloper</div>
<ul class="list-non-bullet nav-pills">
<li class="list-inline-item active"><a class="link" href="/">Home</a></li>
<li class="list-inline-item"><a class="link" href="projects.html">Projects</a></li>
<li class="list-inline-item"><a class="link" href="blogs.html">Blogs</a></li>
</ul>
</nav>
Whenever I am setting the .link to display: inline-block, the text-underline-offset: 5px; style is not working and is shown in white color in VS Code. But, when I remove the display: inline-block, it works fine.
I need my links to be underlined when hovered. How to fix this?
PS: I am not implementing JS in my code.

You need to target the a
.link {
text-decoration: none;
padding: 0.5rem 1rem;
display: inline-block;
}
.navigation .active a{
font-weight: bold;
text-decoration: underline;
text-underline-offset: 5px;
}
<nav class="navigation container">
<div class="nav-brand">iAmADeveloper</div>
<ul class="list-non-bullet nav-pills">
<li class="list-inline-item active"><a class="link" href="/">Home</a></li>
<li class="list-inline-item"><a class="link" href="projects.html">Projects</a></li>
<li class="list-inline-item"><a class="link" href="blogs.html">Blogs</a></li>
</ul>
</nav>

My on hover for my drop down menu is not working

I want the dropdown-content ul to appear if the dropdown li is moused over. I am using the :hover psuedo class on the .dropdown class.
It there something I am missing?
Thanks!
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content ul {
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content li {
background-color: gray;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="menu">
<ul class="menu-list">
<li class="menu-list-item dropdown">
About US
<ul class="dropdown-content">
<li class="menu-list-item">
FAQ
</li>
<li class="menu-list-item">
Produkter
</li>
</ul>
</li>
<li class="menu-list-item">
Link
</li>
<li class="menu-list-item">
Kontakt Oss
</li>
</ul>
</div>

.dropdown-content already a ul and there is no ul in it. You should also forget to define display:none
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
padding: 12px 16px;
text-decoration: none;
display: none; /* Did you forget this? */
}
.dropdown-content li {
background-color: gray;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="menu">
<ul class="menu-list">
<li class="menu-list-item dropdown">
About US
<ul class="dropdown-content">
<li class="menu-list-item">
FAQ
</li>
<li class="menu-list-item">
Produkter
</li>
</ul>
</li>
<li class="menu-list-item">
Link
</li>
<li class="menu-list-item">
Kontakt Oss
</li>
</ul>
</div>

You need to add display: none; css on .dropdown-content class.
Check below code:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content ul {
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content li {
background-color: gray;
}
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="menu">
<ul class="menu-list">
<li class="menu-list-item dropdown">
About US
<ul class="dropdown-content">
<li class="menu-list-item">
FAQ
</li>
<li class="menu-list-item">
Produkter
</li>
</ul>
</li>
<li class="menu-list-item">
Link
</li>
<li class="menu-list-item">
Kontakt Oss
</li>
</ul>
</div>

You must hide "none" first.
Can you examine the last part of Css.
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content ul {
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content li {
background-color: gray;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
}
<div class="menu">
<ul class="menu-list">
<li class="menu-list-item dropdown">
About US
<ul class="dropdown-content">
<li class="menu-list-item">
FAQ
</li>
<li class="menu-list-item">
Produkter
</li>
</ul>
</li>
<li class="menu-list-item">
Link
</li>
<li class="menu-list-item">
Kontakt Oss
</li>
</ul>
</div>

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content ul {
padding: 12px 16px;
text-decoration: none;
display:none;
}
.dropdown-content li {
background-color: gray;
display:none;
}
.dropdown:hover .dropdown-content li{
display: block;
}
<div class="menu">
<ul class="menu-list">
<li class="menu-list-item dropdown">
About US
<ul class="dropdown-content" >
<li class="menu-list-item">
FAQ
</li>
<li class="menu-list-item">
Produkter
</li>
</ul>
</li>
<li class="menu-list-item">
Link
</li>
<li class="menu-list-item">
Kontakt Oss
</li>
</ul>
</div>

Dropdown menu; hover css doesnot work on Sibling members but work on descendant members

There are two codes below. The codes are for dropdown menu. Both codes are almost same but with a little difference. I have created a main list item for the main menu and given it classes. Then I have created a submenu and given it classes menu. The main heading is given class heading and has element in each of the element.
When I apply ":hover" on (anchor element) element combined with on submenu(dropdown element) the code does not work. While if I apply ":hover" on class heading(class of element) the drop down works.
I am sharing the code to clarify and be more specific.
The following code works for the drop down menu and has hover on heading class. I have commented in the code of css to clarify which part of the code I am referring.
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Here the hover and submenu element works to make the element display as block*/
.heading:hover .submenu{
display: block;
}
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading">Home
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">About
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Services
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Products
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Contact
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Now I am going to post the code which is not working for the dropdown menu
In this the element is applied with hover along with submenu class.
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Here the hover on a and submenu element doesnot works to make the element display as block*/
.heading a:hover .submenu{
display: block;
}
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading">Home
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">About
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Services
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Products
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Contact
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
So my question is why is the code working for the first code and not for the second code. The second code has hover on element while the first code has hover on class of element of the main menu.

.heading a:hover .submenu
^
There you have a descendant combinator.
<li class="heading">Home
<ul class="submenu">
Here the .submenu is a sibling of the a element, not a descendant.
You need one of the sibling combinators

You are not using a in the second one so use
.heading a:hover .submenu{
display: block;
}
here you are making the mistake :
.heading:hover .submenu{
display: block;
}

Use general sibling selector to select .submenu siblings of .heading a:hover. EG:
.heading a:hover ~ .submenu{
display: block;
}
However, now when you move your pointer down to the submenu itself you're no longer hovering on the a so the submenu will revert to display:none;, To resolve this we can insist that the .submenu themselves are display:block; when hovered. EG:
.heading .submenu:hover {
display: block;
}
Working demo:
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Use general sibling selector to select .submenu siblings of .heading a:hover*/
.heading a:hover ~ .submenu{
display: block;
}
/* however, now when you move your pointer down to the submenu itself you're no longer hovering on the a so the submenu will go back to display none; To resolve this we can insist that the submenu themselves are display block when hovered: */
.heading .submenu:hover {
display: block;
}
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading">Home
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">About
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Services
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Products
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Contact
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Building a menu using css html

I need my menu to change color when hovering my mouse over each top menu. The problem is the background color for both Test1 and Sub test1 changes as I hover my mouse. Is there any way to not change the background color of Sub test1 until I hover the mouse over it? See the code at http://jsfiddle.net/r5YCU/22/
Any help will be appreciated. Thanks.
<div id="navbar">
<ul>
<li class="navbutton"><span><a id="button-1"
href="">Shop</a></span>
</li>
<li class="navbutton"> <span>Test1</span>
<ul>
<li><br/><span>Sub test1
</span>
</li>
</ul>
</li>
<li class="navbutton"><span><a id="button-3"
href="#">Test2</a>
</span>
</li>
<li class="navbutton"><span><a id="button-4"
href="#">Test3</a></span>
</li>
<li class="navbutton"><span><a id="button-5"
href="#">Test4</a></span>
</li>

I'd play with css :hover pseudoclass instead javascript events, something like:
li.navbutton:hover {
background-color:#345808 !important;
}
li.navbutton:hover li {
background-color: #5c8727!important;
}
li.navbutton li:hover {
background-color: #345808!important;
}
The complete code is: http://jsfiddle.net/r5YCU/31/
I've adapted the layout a bit to look as similar as possible to the original menu, but only with css code.

These things are related to style and should be done in css...
CSS
.ul{
list-style: none;
}
#navbar a{
text-decoration: none;
}
#main-ul{
background: yellow;
}
.navmenu{
float: left;
background: deeppink;
width: 60px;
height: 25px;
margin-right: 3px;
text-align: center;
line-height: 25px;
box-shadow: 0 0 2px 3px black;
}
.navmenu:hover{
outline: 1px solid white;
margin-top: 1px;
}
.navmenu:hover > #sub-ul{
display: block;
width: 100px;
background: red;
}
#sub-ul{
margin: 0;
padding: 0;
display: none;
}
.submenu{
margin: 0;
padding: 0;
margin-bottom: 2px;
background: black;
color: white;
}
.submenu:hover{
cursor: pointer;
color: black;
background: #585858;
}
HTML
<div id="navbar">
<ul class="ul" id="main-ul">
<li class="navmenu">Test1</li>
<li class="navmenu">Test2
<ul class="ul" id="sub-ul">
<li class="submenu">Test 1</li>
<li class="submenu">Test 2</li>
<li class="submenu">Test 3</li>
<li class="submenu">Test 4</li>
<li class="submenu">Test 5</li>
<li class="submenu">Test 6</li>
<li class="submenu">Test 7</li>
<li class="submenu">Test 8</li>
</ul>
</li>
<li class="navmenu">Test3</li>
<li class="navmenu">Test4</li>
<li class="navmenu">Test5</li>
<li class="navmenu">Test6</li>
<li class="navmenu">Test7</li>
</ul>
</div>

how can I make a full width dropdown responsive menu

I am somehow not been able to manage this menu to full width
this is my codepen
http://codepen.io/anon/pen/xwDcb
i want my dropdown menu width to be 100% from left to right. What am I doing wrong
body {
background-color:#000;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
text-transform: uppercase;
font-weight: bold;
width:100%;
}
.nav-full {
background:url(../images/nav-bg.png) no-repeat 0 0;
}
.nav-centre {
width:960px;
margin:0 auto
}
.nav {
list-style: none;
*zoom: 1;
}
.nav:before, .nav:after {
content:" ";
display: table;
}
.nav:after {
clear: both
}
.nav ul {
list-style: none;
}
my html code
<a class="toggleMenu" href="#">Menu</a>
<div class="nav-full">
<div class="nav-centre">
<ul class="nav">
<li>HOME
<ul>
<li>Indus Advantage
</li>
<li>Positioning and flexibility of products
</li>
<li>Pipeline
</li>
</ul>
</li>
<li> Products
<ul>
<li>Overview
</li>
<li>Exercise Physiology
</li>
<li>Manufacturing & Quality Control
</li>
</ul>
</li>
<li> Patents & Publications
<ul>
<li>Global Patenting Strategy
</li>
<li>Publications
</li>
</ul>
</li>
<li> Partnering
<ul>
<li>Enquiries - Product
</li>
<li>Enquiries - Business Partnering
</li>
</ul>
</li>
<li> About Us
<ul>
<li>Vision & Values
</li>
<li>Conventional v/s the Indus Discovery Model
</li>
</ul>
</li>
<li> Contact Us
</li>
<li> Careers
</li>
</ul>
</div>
</div>

check with this code
<style>
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav > li { /* Added ">" */
float: right;
position: relative;
padding: 0;
}
#nav li a {
display: inline-block; /* was block */
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
/*position: absolute;
right: 0em; */
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
/*float: none;
position: static;
width: auto;*/
height: 0;
line-height: 0;
background: none;
text-align: left;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}</style>
<ul id="nav">
<a class="toggleMenu" href="#">Menu</a>
<div class="nav-full">
<div class="nav-centre">
<ul class="nav">
<li>HOME
<ul>
<li>Indus Advantage
</li>
<li>Positioning and flexibility of products
</li>
<li>Pipeline
</li>
</ul>
</li>
<li> Products
<ul>
<li>Overview
</li>
<li>Exercise Physiology
</li>
<li>Manufacturing & Quality Control
</li>
</ul>
</li>
<li> Patents & Publications
<ul>
<li>Global Patenting Strategy
</li>
<li>Publications
</li>
</ul>
</li>
<li> Partnering
<ul>
<li>Enquiries - Product
</li>
<li>Enquiries - Business Partnering
</li>
</ul>
</li>
<li> About Us
<ul>
<li>Vision & Values
</li>
<li>Conventional v/s the Indus Discovery Model
</li>
</ul>
</li>
<li> Contact Us
</li>
<li> Careers
</li>
</ul>
</ul>
</div>
</div>

you have to give the nav-center class 100%, now its at 975px or something like that, and it wrapps your list elements. so the 100% of the unordered list are relative to the nav-center element.
and if you want to get the nav menu centered giv the nav-centre class position:relative;
left: 50% and margin:left -511px. (margin-left should be have of the width of the unordered list)
i think the best solution would be that you put the dropdown menu out of the ul from the navi.
So its not relative to the other list.
markup your html like this:
<a class="toggleMenu" href="#">Menu</a>
<div class="nav-full">
<div class="nav-centre">
<ul class="nav">
<li>HOME</li>
<li> Products</li>
<li> Patents & Publications</li>
<li> Partnering</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Careers </li>
</ul>
<ul>
<li class="under">Indus Advantage</li>
<li class="under">Positioning and flexibility of products</li>
<li class="under">Pipeline
</ul>
<ul>
<li class="under">Overview</li>
<li class="under">Exercise Physiology</li>
<li class="under">Manufacturing & Quality Control</li>
</ul>
<ul>
<li class="under">Global Patenting Strategy</li>
<li class="under">Publications</li>
</ul>
<ul>
<li class="under">Enquiries - Product</li>
<li class="under">Enquiries - Business Partnering</li>
</ul>
<ul>
<li class="under">Vision & Values</li>
<li class="under">Conventional v/s the Indus Discovery Model</li>
</ul>
</div>
</div>
you now just have to give li.under position:absolute and the rest, how to style, should be clear.