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>
Related
I'm trying to make a sample website about photography, and as I start with my navigation bar, I have come to the issues of the background color not working. I have tried many things like putting an Id to call my nav on my CSS file. I have also tried using div, nav or even using a class and it won't work. I am sorry if this might be an easy fix but I am new to this.
body , html {
background-color: #F7FDFF;
}
div {
background-color: #000;
}
ul {
list-style-type: none;
}
li a {
display: block;
}
ul li a {
text-decoration: none;
float: right;
text-align: right;
color: black;
padding: 1.5em;
}
li a:hover{
display: block;
background-color: #B5B5B5;
color: #000;
}
.active {
background-color: green;
}
#navbar {
background-color: rgb(18, 171, 209);
}
<div>
<nav id="navbar">
<ul>
<li class="active">Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
Because your anchor tags are floated and there are no other non floated elements, your nav element collapsed. To fix these follow below steps.
Create a clearfix class like this. It will stop your nav element from collapsing.
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
and add this class to your nav element
Remove the float: right; rule from your anchor element, aka from ul li a selector. Right now, because of this rule, your last element becomes the first menu, aka "Contact" became first menu and "Home" became last. To understand why this happend read this.
Add a new rule float: left; for your li element. If you don't add this rule, your li elements each will take a seperate line, because by default li elements are block level elements. To keep them in the same line you have to add this rule. You can also add display: inline-block to change its default display property from block to inline to keep them in the same line. But there is a small problem with this solution, you will notice a small gap between inline-block elements. If those small gaps are not a problem for your design then go ahead and use display: block; rule, otherwise use float: left;. (To understand the difference hover over the menu next to the active menu)
Add two more rules float: right; and margin: 0; for your ul element. This will move your menu to the right as you intended. margin: 0; is there to remove the extra margins. You can change/delete this rule as per your design.
<!DOCTYPE html>
<html>
<head>
<link href="Css/Stylesheets.css" rel="stylesheet">
<meta charset= utf-8>
<meta name="viewport" content="width= device-width, initial-scale=1.0">
<title>LTphotography</title>
</head>
<style>
body , html {
background-color: #F7FDFF;
}
div {
background-color: #000;
}
ul {
list-style-type: none;
float: right;
margin: 0;
}
li {
float: left;
}
li a {
display: block;
}
ul li a {
text-decoration: none;
text-align: right;
color: black;
padding: 1.5em;
}
li a:hover{
display: block;
background-color: #B5B5B5;
color: #000;
}
.active {
background-color: green;
}
#navbar {
background-color: rgb(18, 171, 209);
}
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
</style>`
<body>
<div>
<nav id="navbar" class="clearfix">
<ul>
<li class="active">Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
Your containing li's are collapsing because they contain floated content. You need to add a clearfix to your li items.
.clearfix::after {
content: "";
clear: both;
display: table;
}
<ul>
<li class="clearfix"></li>
// and so on
</ul>
https://www.w3schools.com/howto/howto_css_clearfix.asp
That said, you can also simply remove float: right from your anchor elements. It shouldn't be necessary.
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>
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'm trying to give a table a title but it doesn't include it in the table/the title doesn't have a color around itself. I know that the mistake is this line <li><a>Left</a></li> but I don't know how to include it.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link, a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li><a>Left</a></li>
<li>Info</li>
<li>Contact</li>
</ul>
</body>
</html>
I think this is what you're looking for:
<li>Left</li>
First of all, what you have created is not a table but an unordered list.
That being said, the reason your <a> tag is not being styled is the lack of a href="#" attribute.
And with that said, you should not be using a <li><a>text</a></li> structure for showing the title of what looks like a navigation bar. Especially when the only reason to use an anchor tag is because of your existing CSS.
Instead, take the <li>Left</li> line, put it before the <ul> tag and just turn it into a div.
Then use some additional CSS to target and style that <div class="title">.
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.