Please have a look at the codes (HTML and CSS) and please let me know how can I hover over one menu item and them the corresponding divs appear at the bottom. Let me know what is wrong with my code!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trying to show a div while hover over menu items</title>
<style type="text/css">
.menu_div {
width: 300px;
height: 50px;
background-color:red;
display: block;}
.menu_div ul li {list-style: none; display:inline-block;}
.show_div ul li {display: inline-block;}
.show_div_one {
width: 300px;
height: 50px;
background-color: orange;
margin-top: 50px;
display: none;
}
.show_div_two {
width: 300px;
height: 50px;
background-color: orange;
margin-top: 50px;
display: none;
}
.menu_div ul li.menu_item_one:hover + .show_div ul li.show_div_one{display:block;}
.menu_div ul li.menu_item_two:hover + .show_div ul li.show_div_two{display:block;}
</style>
</head>
<body>
<div class="menu_div">
<ul>
<li class="menu_item_one">
Home
</li>
<li class="menu_item_two">
about
</li>
</ul>
</div>
<div class="show_div">
<ul>
<li>
<div class="show_div_one">
</div>
</li>
<li>
<div class="show_div_two">
</div>
</li>
</ul>
</div>
</body>
</html>
Your CSS selectors, although they may seem to be logically using the + adjacency operator, in fact, arent.
The direct adjacency selector is for DOM elements that come directly after one another. In your HTML, in order to reach the elements you wish to show you have to first traverse the DOM 'upward' to the parent menu_div element, then across to its sibling show_div and then down to the correct child. CSS cannot do this.
More on this from MDN
(+) This is referred to as an adjacent selector. It will select only
the specified element that immediately follows the former specified
element.
You will need to change your code per the below, to place the element you wish to show immediately following the element you wish to hover on, you may also want to control its positioning by setting position:absolute
Demo Fiddle
<div class="menu_div">
<ul>
<li class="menu_item_one"> Home
<div class="show_div_one">show me!</div>
</li>
<li class="menu_item_two"> about
<div class="show_div_two">show me!</div>
</li>
</ul>
</div>
CSS
.menu_div {
width: 300px;
height: 50px;
background-color:red;
display: block;
}
.menu_div ul li {
list-style: none;
display:inline-block;
}
.show_div ul li {
display: inline-block;
}
.show_div_one, .show_div_two {
width: 300px;
height: 50px;
background-color: orange;
margin-top: 50px;
display: none;
position:absolute; /* <--- keep the flow you anticipate */
}
.menu_div ul li.menu_item_one a:hover + .show_div_one {
display:block;
}
.menu_div ul li.menu_item_two a:hover + .show_div_two {
display:block;
}
Why not use JQuery as this will be far better than relying on CSS alone.
Example: Fiddle
$( document ).ready( function() {
$('.show_div_one').hide();
$('.menu_item_one').hover(
function(){
$('.show_div_one').show();
},
function(){
$('.show_div_one').hide();
}
);
});
Not tested, but thats the general idea for each one you would want to appear and disappear based on hover.
Related
Can someone please explain to me, why li and ul does not expand in plunkr bellow?
I know many has been written about that, but all I found is playing with overflow, height, position and display css properties. I do not use any of that.
a {
padding: 1em;
background-color: red;
}
ul {
list-style: none;
background-color: yellow;
display: flex;
}
li {
background-color: green;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
</body>
</html>
Can someone please explain to me, why li and ul does not expand
Because your links are still inline, and therefor their padding flows out of the line box.
Add display: block for the links.
By default a is inline element, so it don't include padding in height, just update it to block label element. then ul and li will expend.
for updating it to block label you can add display:block or display: inline-block or float: left.
Just add display:block in anchor tag
ul {
list-style: none;
background-color: yellow;
display: flex;
margin:0px;
padding:0px;
}
ul li {
background-color: green;
display: inline-block;
}
ul li a {
padding: 1em;
background-color: red;
display:block;
}
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
Set display:block in a because a is an inline level element so make it block level
Also don't need display:inline-block in li because you have display:flex in ul
You can also remove default padding from ul
a {
padding: 1em;
background-color: red;
display: block
}
ul {
list-style: none;
padding:0;
background-color: yellow;
display: flex;
}
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
Good day, this is my first ever question on Stack Overflow, so I hope I get it as right as possible.
I have done extensive research on my problem, mostly reading all the questions I could find on Stack Overflow and some other sites, but I could not find one answer that worked.
Some background: I am trying to write a website for recruiting for my work and it's the first ever website I have ever written. I am using a wamp server to run the site on localhost for testing. My issue is described as best as I could in the title. Find below my html code:
<html>
<head>
<title> BCB Call Plus SRL Home </title>
<link rel="stylesheet" href="Main Style.css">
</head>
<body>
<div id = "main_content">
<ul id = "nav_container">
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px"> </li>
<li> Home </li>
<li> Menu 1 </li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li id ="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href= "Page4.html"> Angajari </a>
<ul class="sub_menu">
<li>Ce Vrem</li>
<li>Aplica</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
And below my CSS code:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
}
.sub_menu li a{
display:none;
}
#angajari ul.sub_menu li {
float:left;
}
#angajari ul.sub_menu li a {
position:absolute;
top:0;
white-space: nowrap;
height:auto;
}
#angajari:hover ul.sub_menu li a {
display:block;
}
Here's a picture of what happens when I hover over the problematic menu item:
Display Issue
Final notes: I am running this only under Chrome for now. I have noticed that it doesn't read my css right in IE 8 (yes, I use IE 8, because one of my bosses wants us to.) Cross-platform compatibility fixes are welcome, but not in the scope of my current question. My WAMPSERVER has apache 2.4.9 and PHP 5.5.12.
I even tried my code on some online web code testing site whose name I forgot and got the same results. If you find that my code actually displays properly, then it may be an issue with my configuration.
Here is a jsfiddle.
You need your .sub_menu to be absolute, not your li as. That's it!
.sub_menu {
position:absolute;
}
Working demo here: http://jsfiddle.net/pxzhqqnb/1/
And I'd make the .sub_menu hidden instead of its children. Personal preference, but I think it makes more sence.
Why does it happen?
Consider this simple example: (think of .relative as position: relative and .absolute as position: absolute)
<div class="relative">
Text
<div class="absolute">Link 1</div>
<div class="absolute">Link 2</div>
</div>
Link 1 is absolute. It searches for the closest relative element. That's .relative. Now Link 1 gets right under the relative div.
Link 2 follows the same rules, thus both links overlap.
Now let's change the code a little:
<div class="relative">
Text
<div class="absolute-wrapper">
<div>Link 1</div><!-- these are now static by default -->
<div>Link 2</div>
</div>
</div>
absolute-wrapper is absolute, so it searches for the closest .relative element and gets right under it. Now both links are normal elements wrapped in a div, so they render as expected.
Demo of both examples here: http://jsfiddle.net/w0h7cdhe/2/
I've done a few tweaks to your css code:
body {
text-align: center;
}
a {
font-size: 150%;
text-decoration: none;
color: #000000;
font-weight: bold;
vertical-align: middle;
padding: 0px 10px; /* this is just for the hover effect to lose the spaces in the html */
}
a:hover {
background-color: #338533;
}
ul {
padding: 0;
margin: 0;
}
ul#nav_container {
background-color: #F2FFF2;
list-style-type: none;
text-align: center;
}
ul#nav_container li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
#angajari ul.sub_menu { /* do this with the menu, not just the link */
display: none;
position: absolute; /* set correct position */
}
#angajari ul.sub_menu li {
display: inline-block;
}
#angajari ul.sub_menu li a { /* we don't want top: 0 because it should not overlap */
white-space: nowrap;
}
#angajari:hover ul.sub_menu { /* see above -> menu not link */
display: block;
}
<div id="main_content">
<ul id="nav_container">
<li>
<img id="logo" src="http://lorempixel.com/150/75" style="width:150px;height:75px">
</li>
<li> Home <!-- I've removed the spaced and added the gap in css -->
</li>
<li> Menu 1
</li>
<li> Menu 2
</li>
<li> Menu 3
</li>
<li id="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href="Page4.html">Angajari</a>
<ul class="sub_menu">
<li>Ce Vrem
</li>
<li>Aplica
</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
So i tried to fix your Problem i end up with this result
I've adjusted the margin of the logo as shown below:
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px;margin-left: -50px;"> </li>
because I adjust the width of the text container and replace the last 4 lines in your CSS CODE as shown below:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
width: 95px;
}
#main_content ul ul {
position: absolute;
visibility: hidden;
}
#main_content ul li:hover ul {
visibility: visible;
}
so i made minor changes but i dont know if that's what you want to happenenter code here
So I have a vertical navbar, and I haven't been able to center the tabs. The text is too far off to the right, and when I hover over it, the highlighted box doesn't extend to the margins. My code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matthew H. Goodman</title>
<link href="style2home.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="nav">
<li>HOME</li>
<li>CV</li>
<li>RESEARCH</li>
<li>CONTACT</li>
</ul>
</body>
</html>
CSS:
#nav {
margin-top: 200px;
left: 0;
width: auto;
height: auto;
border-radius: 10px;
position: absolute;
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg");
}
#nav li {
position: relative;
list-style: none;
padding: 15px;
width: auto;
}
#nav li a {
position: relative;
display: block;
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: white;
text-align: center;
}
#nav li a:hover {
color: #778899;
background-color: black;
}
Browsers, and some CSS resets add default rules to elements like UL/OL to keep style-less html elements looking consistent.
ul#nav { padding-left: 0; }
I would recommend using a CSS reset (normalize, eric meyer's reset, etc) to allow you to start from scratch.
Use chrome/firefox/ie11 dev tools (F12, or right click and inspect element), go to the element in the window and hover over it to see the margin/padding rules. Scroll down the CSS rules on the right side to find where they are being applied Or click on 'computed styles' to see all the rules.
For the hover states,
you need to apply your hover to the li and handle the color separately
#nav li:hover { background-color: black; }
#nav li:hover a { color: #778899; }
You also need to add
#nav { overflow: hidden; }
to maintain your border-radius
You have some padding being applied to your #nav element you can fix it by adding:
#nav {padding:0px;}
To make the background cover the entire line add more padding to a and remove padding from the li with the current markup that will do the trick.
li {padding:0px;}
a {padding:15px;}
you can insted add a hover state to the li element but that but that will cause some problems with being able to click the a element correctly.
I am trying to get a little graphic to designate which page the viewer is on with css, but it just won't highlight. Here is my code:
HTML:
<ul class="side-nav">
<li><span>Home</span></li>
<a href="http://www.cieloazulsantafe.com/sample-page.html"><li>
<span>Sample Page</span></li></a>
</ul>
CSS:
ul.side-nav span{
margin-left: 50px;
text-decoration: none;
color: #fff;
}
ul.side-nav a li{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
list-style: none;
height: 41px;
width: 250px;
line-height: 2.0;
text-decoration: none;
}
ul.side-nav a li:hover{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
ul.side-nav a li.current-menu-item{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
a{
text-decoration: none;
}
Seems straightforward, but I just can't get the background to change. I know its because its the li element, but I guess the "current-menu-item" order is wrong.
Url : http://cieloazulsantafe.com/nav-test.html
Thanks in advance.
You will have to name the body (give it an id) and the li tags, and refer to them respectively in your css. This is the easiest, pure css way.
HTML
<body id="home-body"> // ... on your home page
...
<body id="about-body"> // ... on your about page
Your nav
<li id="home-menu">Home</li>
<li id="about-menu">About</li>
CSS
body#home-body li#home-menu, body#about-body li#about-menu { // style of the active menu item }
You might want to have a look at my answer I provided on the following question: How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?
EDIT: This is the "pure css" way; but depending on your needs, there might be other ways down this road.
CHECK THIS FIDDLE http://jsfiddle.net/luckmattos/aN2ny/
Your HTML and CSS were broken:
HTML
<ul class="side-nav">
<li>Home</li>
<li class="current-menu-item">Current</li>
</ul>
<a> has to be inside the <li>, put the text properties on the <a>. Most important you forgot to put the class current-menu-item on the current <li>.
CSS
ul.side-nav {
margin-left: 50px;
text-decoration: none;
padding:0px;
list-style: none;
width: 250px;
}
ul.side-nav li{
padding:0px;
margin:0px;
display:block;
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
height: 41px;
cursor:pointer;
}
ul.side-nav li a {
margin:0px;
display:block;
padding-left:50px;
text-decoration:none;
color: #fff;
height:41px;
line-height:41px;
}
ul.side-nav li a:hover,
ul.side-nav li.current-menu-item {
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
There are several minor changes, take a look at the code.
I want to create a drop down menu but I faced some problem:
Actually I want to create it without making <ul> tag inside the <li> tag
so the code :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a>Coffee</a></li>
<ul><li><a>Coffee 2</a></li></ul>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
</body>
</html>
and the css code :
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
z-index: 1;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
You can see that Coffee 2 is not dropdown it should be with coffe menu please help me
without making the <ul> tag inside the <li>.
jsbin link : http://jsbin.com/evasof/1/edit
Here you go:
<ul>
<li class="dpdwn"><a>Coffee</a><div><a>Coffe 2</a></div></li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
extra css:
.dpdwn div{
display: none;
}
.dpdwn:hover div {
display:block;
}
Demo
But in my opinion you should use a ul inside that li.
Here's an example:
<ul>
<li class="dpdwn"><a>Coffee</a>
<ul>
<li><a>Coffe 2</a></li>
</ul>
</li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
That same extra css:
.dpdwn ul{
display: none;
}
.dpdwn:hover ul {
display:block;
}
Demo2
Assuming your HTML structure above, we can see that when we try and validate it at the W3C Validator that this structure is INVALID, and not accepted. You can see this from the provided screenshot below...
Beyond the fact that what you want is invalid markup, CSS-wise it is also impossible to handle the hover state in order to make your sub-menu appear. There is no selector in the current standard that allows you to select a sister sibling while hovering over a sibling.
My suggestion is to follow how it has been done for ages, what is valid markup, and how it will be for the foreseeable future, and nest the ul inside the li.
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a>Coffee</a>
<ol><a>Coffe 2</a></ol></li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
</body>
</html>
you can use <ol> tag within <li> tag see above example
You could use dl and dt and style them accordingly but I'm afraid at that point you're just trading one tag for another. As w/ the other answers, why are you trying to avoid using ul and li. Creating dropdown menus is something that there tags are very good at.
<dl>
<dt>Foo</dt>
<dt>Bar</dt>
</dl>