Background color (red) misses out after I am hovering drop down items.
What should I do to keep the background color of the menu item I am in?
<style>
nav ul
{
list-style-type:none;
padding:0px;
text-align:center;
background-color:grey;
}
nav ul li
{
display:inline-block;
}
nav ul a
{
display:block;
padding:20px;
padding-left:50px;
padding-right:50px;
text-decoration:none;
color:black;
text-transform:uppercase;
font-family:arial;
font-size:20px;
}
nav ul a:hover
{
background:red;
}
nav ul ul {
display: none;
}
nav ul li:hover ul{
display:block;
position:absolute;
}
nav ul ul li
{
display:block;
border-bottom:solid 1px black;
}
</style>
</head>
<body>
<nav>
<ul>
<li>one</li>
<li>two
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>three
<ul>
<li>ay</li>
<li>bee</li>
</ul>
</li>
<li>four</li>
</ul>
</nav>
</body>
This is because the parent li is not attracting the :hover, so a hover on the child submenu doesn't keep it active. As such, you need to move the style change to the li:hover instead of the a child, as the submenu is an sibling of the a and not direct child.
Change:
nav ul a:hover {
background:red;
}
To:
nav ul li:hover {
background:red;
}
Demo Fiddle
Related
How i make the child lists expand and collapse by click ?
.tree-list li > ul{
display: none;
}
See the Pen Pure CSS Fullscreen Overlay Menu .
You can use it by jquery/javascript or you can simply use css for hover.
for jquery just write onclick ul display:block along with this css.
<nav id="dropdown">
<ul>
<li>Menu
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
</ul>
</nav>
In CSS
#dropdown
{
margin-top:15px
}
#dropdown ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#dropdown ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#dropdown ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#dropdown ul li:hover
{
background:#f6f6f6
}
#dropdown ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#dropdown ul ul li
{
float:none;
width:200px
}
#dropdown ul ul a
{
line-height:120%;
padding:10px 15px
}
#dropdown ul ul ul
{
top:0;
left:100%
}
#dropdown ul li:hover > ul
{
display:block
}
I am trying to do a Menu that will appear when Window width is resized to a small resolution. Below is the HTML and CSS are below
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
CSS:
nav ul
{
list-style:none;
}
nav li{
display:inline;
line-height:1.5px;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
Output in Horizontal:
Home Articles Webinars
How can I bring back the list to Vertical then set "ul" position to absolute and make "nav a" to be visible. The list should display vertically like below
Home
Articles
Webinars
nav{
position:relative;
}
nav ul
{
position:absolute;
top:40px; /* this height is same as the menu.png */
left:0;
z-index:999;
list-style:none;
}
nav li{
list-style:none;
display:block;
}
nav ul li a{
display:block;
}
nav li:not(:first-child) > :only-child,
nav ul > :first-child a{
text-decoration:none;
font-size:1.4em !important;
outline:1px solid blue;
padding:8px;
letter-spacing:0.9px;
margin-left:18px;
}
nav li:not(:first-child) > :only-child{
color:blue;
}
nav ul > :first-child a{
color:white !important;
background:blue;
}
<nav>
<a id="menu-dropdown"><img src="http://localhost/influenza/logo/menu.png" /></a>
<ul>
<li><a class="tab-click" href="http://localhost/influenza/index.php">Home</a></li>
<li>Articles</li>
<li>Webinars</li>
</ul>
</nav>
I'm currently designing a Nav menu that includes ul, li and a elements. I'm trying to produce an effect where hovering over an a tag will only change the background color near the text for the link itself instead of the whole li area around it.
HTML:
<nav>
<div class="full_menu">
<ul>
<li>Login</li>
<li>About</li>
<li>FAQ</li>
<li>Blog</li>
<li>Our Team
<ul>
<li>Bob</li>
<li>James</li>
<li>Tom</li>
</ul>
</li><!--End team dropdown -->
</ul>
</div>
CSS:
nav {
margin:0 auto;
text-align:center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display:block;
}
nav ul {
background: #17A74A;
padding:0px;
list-style:none;
position:relative;
display: inline;
border:0px;
}
nav ul li {
float:right;
margin-top:0px;
}
nav ul li a {
display:block;
padding:33px 40px;
color:#000;
text-decoration:none;
font-weight:bold;
font-size:18px;
}
nav ul li a:hover {
background-color:#2D6AF7;
color:#FFF;
}
nav ul ul {
background:#17A74A;
position:absolute;
top:71px;
}
nav ul ul li {
float:none;
border-bottom:1px solid #FFFFFF;
}
nav ul ul li a {
padding:15px 40px;
color:#FFF;
}
nav ul ul li a:hover {
background:#27BCDD;
}
nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
I thought that by using nav ul li a:hover would fix this problem but the whole li area is still changing its background color instead of just the immediate area around the link text.
Any help would be greatly appreciated!
Do you want to achieve following result? I've removed the padding from your <a> elements and added them to the <li> elements instead.
JSFiddle
You need to change the padding to a margin if you don't want the whole thing to change color. Try this:
nav ul ul li a {
margin:15px 40px;
color:#FFF;
}
Do you guys have any idea how to remove the right border on my drop down menu? I tried putting right-border: none, right-border: hidden, and right-border: 0px but nothing!
HTML :
<section class="menu">
<ul>
<li><a class="active" href="#"> PORTFOLIO </a>
<ul>
<li> illustrations </li>
<li> portraits </li>
<li> environments </li>
<li> life drawings </li>
</ul>
</li>
<li> STORE
<ul>
<li> society6 </li>
<li> redbubble </li>
</ul>
</li>
<li> CONTACT </li>
<li> ABOUT </li>
</ul>
</section>
CSS :
.menu {
height:29px;
width:100%;
/*background:orange;*/
}
.menu ul {
width:auto;
list-style-type:none;
font-family:"calibri", "arial";
}
.menu ul li {
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;
}
.menu ul li a {
display:block;
padding:3px;
color:#854288;
text-decoration:none;
font-size:20px;
font-weight:strong;
padding-right:25px;
}
.menu ul li a:hover, .active {
color:#788d35
}
.menu ul li ul {
display:none;
}
.menu ul li:hover > ul {
display:block;
position:absolute;
top:23px;
float:left;
padding-left:20px;
text-align:left;
margin-left: -30px;
}
.menu ul li ul li {
position:relative;
min-width:135px;
max-width:1350px;
width:100%;
}
.menu ul li ul li a {
padding: 3px;
margin-left: 1px;
border-right: hidden; /* <---- DOES NOT WORK */
}
This removes border from the main menu (after the last item About) :
.menu ul li:last-child{ border:none; }
JSFiddle
If you also want to remove border from the nested lis, you should add border:none to .menu ul li ul li :
JSFiddle
try this
#right_border_less{
border:solid;
border-right:none;
}
When a user hovers over my horizontal menu, how can I keep the sub-menu open until another menu item is hovered over? Here is the source code:
HTML
<ul id="nav">
<li>Home</li>
<li>my Links
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
CSS
#nav {
width:100%;
margin:0;
padding:12px 0 4px 0;
height:30px;
position:relative;
}
#nav li {
float:left;
list-style:none;
display:inline
}
#nav a {
text-decoration:none;
}
#nav li ul li a {
margin:0
}
#nav .active a, #nav li:hover>a {
background:#ac2024;
color:#fff;
}
#nav li a:hover, #nav ul a:hover {
background:#ac2024;
color:#fff
}
#nav ul {
position:absolute;
left:0;
height:27px;
width:100%;
display:none;
}
#nav li:hover>ul {
display: inline;
}
#nav ul a {
width:100%
}
#nav:after {
content:".";
display:inline;
clear:both;
visibility:hidden;
height:0
}
#nav {
display:inline-block
}
If this is not possible with CSS, how can it be done with jQuery? Thanks.
Based on your updated question, modified answer below.
You'll need to add a small amount of JS as mentioned in my comment, please see here for demo
JSFiddle (updated)
Updated HTML:
<ul id="nav">
<li>Home</li>
<li><a id="hover1" href="#">my Links</a>
<ul id="visible1">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li><a id="hover2" href="#">Our Links</a>
<ul id="visible2">
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
</ul>
Updated CSS:
#nav {
width:100%;
margin:0;
padding:12px 0 4px 0;
height:30px;
position:relative;
}
#nav li {
float:left;
list-style:none;
display:inline
}
#nav a {
text-decoration:none;
}
#nav li ul li a {
margin:0
}
#nav .active a, #nav li:hover>a {
background:#ac2024;
color:#fff;
}
#nav li a:hover, #nav ul a:hover {
background:#ac2024;
color:#fff
}
#nav ul {
position:absolute;
left:0;
height:27px;
width:100%;
display:none;
}
#nav li:hover>ul {
display: inline;
}
#nav ul a {
width:100%
}
#nav:after {
content:".";
display:inline;
clear:both;
visibility:hidden;
height:0
}
#nav {
display:inline-block
}
.result_hover {
display:block !important;
}
Updated JQuery:
$("#hover1").hover(
function () {
$("#visible1").addClass("result_hover");
$("#visible2").removeClass("result_hover");
}
);
$("#hover2").hover(
function () {
$("#visible2").addClass("result_hover");
$("#visible1").removeClass("result_hover");
}
);
I don't think you could achieve that only with CSS.
The solution that I thing about from the top of my head is to add class 'hover-class' to the li item via jQuery, and while hovering on new menu item adding 'hover-class' to the new item and removing it from the old one. You should keep track in JS what's the last item that has been hovered and manipulat view based on this data.
But maybe someone will suprise me and give solution only in CSS :) Hope it helps.