I want to show list when hover over <a> element. The list is shown but when I want to choose an item from it, it hides again.
I need code to stay showing until i click on item in it.
I want something in CSS please, I am learning JS now
.acc {
/* Account id */
font-family: 'Courier', arial;
color: black;
font-size: 3em;
text-decoration: none;
text-align: center;
}
.acc:hover {
color: #C0C0C0;
}
.hide {
display: none;
}
.acc:hover+.hide {
display: block;
font-family: 'Courier', arial;
color: black;
font-size: 3em;
text-decoration: none;
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
<div>
<a class="acc" href="acc">Accounts </a>
<ul class="hide">
<li>Facebook</li>
</ul>
</div>
You just need to add .hide:hover.
.acc:hover + .hide,
.hide:hover{
display:block;
font-family:'Courier', arial;
color:black;
font-size:3em;
text-decoration:none;
list-style-type:none;
padding:0px;
margin:0px;
overflow:hidden;
}
Related
I am creating a navigation menu. Inside the navigation menu I have child navigation menu. I want the size of navigation menu equal to the child navigation menu.
I created three hyper-tags and then there is a div element which is the element after the hyper tags. I am floating the three hyper tags as well as div element to the left.
the div element contains one button and div. I am setting the child div element to be absolute so its drawing itself below the button. I want the size of button to be equal to the size of the div element which contains child links. I thought if I set the root div element with position relative it will have the same width of the button but its not working. Here the css and html code. Any answers would be really appreciated.
/* css */
<style>
.navbar {
background: #006669;
overflow: hidden;
}
.navbar a{
float: left;
padding: 15px 15px;
text-decoration: none;
color: white;
font-size: 1.1rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.navbar .subnav{
float: left;
border:1px solid black;
}
.navbar .subnav .subnavbutton{
padding: 15px 15px;
text-decoration: none;
color: white;
font-size: 1.1rem;
border: none;
outline: none;
background: transparent;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.navbar .subnav .subnavcontent{
position:absolute;
border: 1px solid red;
min-width: 100px;
display: none;
}
.navbar .subnav .subnavcontent a{
float: none;
color: #444;
background: white;
display: block;
}
.navbar .subnav .subnavcontent a:hover{
background: #a0a0a0;
}
.navbar .subnav:hover .subnavcontent{
display: block;
}
</style>
here is the body content
<div class="navbar">
Home
News
<div class="subnav">
<button class="subnavbutton">Contact</button>
<div class="subnavcontent">
link1
link2
link3
</div>
</div>
</div>
I can do what you want using a flex-box based nav
html
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">Menu
<ul id="dropdown-menu" class="dropdown-menu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
</ul>
</nav>
css
nav ul {
background: #006669;
list-style-type: none;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
nav a {
color: white;
font-size: 1.5rem;
text-decoration: none;
display: block;
padding: 1rem;
}
nav a:hover {
background: white;
color: #006669;
}
nav ul ul {
display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;
}
.dropdown {
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-menu {
display: block;
width: 100%;
padding:0;
border: 1px solid #006669;
}
I was just continuing with making this website and all of a sudden some of my navbar padding goes 'missing' and I can't seem to pinpoint the mistake. I've already played the detective game and commented out some of the stuff I thought was interfering. Luckily I have an original picture before the screw-up and one after. Some of the 'paragraph text' will be 'placeheld' for personal reasons and I think it's irrelevant, unless it's needed in order to fix the problem.
-Thanks.
Before and after picture: http://imgur.com/a/ts1FS
Code:
CSS:
body {
background-color: #1a1a1a;
color: #ccad00;
line-height: 1.9;
font-size: 19px;
}
p.desc{
text-indent: 50px;
}
h1 {
font-family: courier;
color: #ccad00;
}
h2 {
font-family: courier;
color: #ccad00;
text-align: center;
}
#divtitle {
width: 50%;
margin:auto;
padding-top: 50px;
text-align: center;
}
h2
{
font-family:courier;
color: #99cc00;
}
p {
line-height: 1.9
text-size: 19px;
}
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #ccad00;
height:40px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #f2f2f2;
background-color: #ccad00;
float: left
}
#nav li a:hover {
color: #0d0d0d;
background-color: #35af3b;
}
.button {
background-color: #ffa600;
border: none;
color: #998200;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
font-family: courier;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: white;
color: #998200;
}
div#containerbttn {
width: 800px;
height: 100px;
margin: auto;
background-color: green;
}
ul.square{
list-style-type: square;
}
.center {
text-align: center;
}
html:
<div id="nav">
<ul>
<li>Home
</li>
<li>Center
</li>
<li>Rules
</li>
<li>References
</li>
<li>Rankings
</ul>
</div>
<div>
<div id="divtitle" >
<h1> text </h1>
</div> -->
<div id="containerbttn">
<button class="button">GET STARTED!</button>
<button class="button">FAQ</button>
<button class="button">RANKINGS</button>
</div>
<h2> Synopsis: </h2>
<div class="center">
<p class="desc"> Welcome to ***!. This is a free...
<ul class="square">
<li> some text </li>
<li> some text </li>
</ul>
<p class="desc" > text </p>
</div>
</html>
Your problem exists because you have set the height of the #nav element to 40 px. When you add the padding to your a element, you make it larger than the ul element. This can be solved easily by updating two lines of code.
First, remove from css:
#nav{ height:40px; }
Then, add to html after ul but before closing the nav div:
<div style="clear:both;"></div>
Here is a jsfiddle of your working page: https://jsfiddle.net/8o279n5r/
And here is a great answer on what the clear property does: What does the CSS rule clear: both do?
My aim is to have the text links to be central inline with the search text, however i want the border around each of the links to stay how they are. basically how to i centre the text without moving the border.
I have tried adding this to the links .home .reviews .store .contact, however this just moves the border.
padding-top:20px;
margin-top:20px;
Here is my HTML:
<div id="navigation">
<nav class="navbar">
<div class="navbarcontainer">
<ul class="nav navbar-nav">
<li class="home">Home</li>
<li class="reviews">Reviews</li>
<li class="store">Store</li>
<li class="contact">Contact</li>
</ul>
</div>
</nav>
Here is my CSS:
/* NAVIGATION */
li {
display:inline-block;
float:left;
border:1px black solid;
padding-left:12px;
padding-right:12px;
height:60px;
}
a:link, a:visited {
text-decoration: none;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
}
This is what it currently looks like : http://imgur.com/0GVums0
Thankyou for any help
You can use line-height property on links to vertically center:
a:link, a:visited {
text-decoration: none;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
line-height: 60px;
}
Or, you can also use vertical-align: middle, but keep in mind that this approach is not fully compatible with all browsers (IE8+).
li {
display:table;
float:left;
border:1px black solid;
padding-left:12px;
padding-right:12px;
height:60px;
}
a:link, a:visited {
text-decoration: none;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
display: table-cell;
vertical-align: middle;
}
One way to do it:
li {
display: block;
float: left;
border: 1px black solid;
}
a {
padding: 19px 12px;
display: block;
}
a:link, a:visited {
text-decoration: none;
color: #000;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
}
Codepen example
I have a horz nav bar at the top of my website that has 7 text links & 6 bullets between the text links. Is there a way to evenly space out the text links & bullets horz across the nav bar. I tired it with the following code, all works well except the bullet spacing is weird and off. Much appreciated for some help on this. Here is the code I have.
Here is a link to my code on fiddle: http://jsfiddle.net/mountart/bdzcv/
<style type="text/css">
div#container{
width:1020px;
}
div#container ul {
display:table;
width: 100%;
margin:0px 0px;
padding-left:0px;
-webkit-padding-start:0px; /* reset chrome default */
}
div#container ul li {
display:table-cell;
height:20px;
line-height:20px;
width:14.285%;
font-family: "Arial Narrow", Arial, sans-serif;
font-weight:bold;
font-size:12px;
padding:0px 0px;
text-align: center;
border-right:none;
}
div#container ul li:last-child {
border-right:none;
}
div#container A:link { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
div#containerA:visited {
COLOR: #666;
TEXT-DECORATION: none;
font-weight: normal
}
div#container A:active {
COLOR: #666;
TEXT-DECORATION: none
}
div#container A:hover {
COLOR: #C00;
TEXT-DECORATION: none;
font-weight: none
}
div#container li.headerbullet
{
float:left;
display:inline-block;
width:auto;
margin-left:5px;
margin-right:0px;
height:20px;
line-height:20px;
}
div#container li.headerbullet img
{
margin-top:10px;
}
</style>
<div class="clear"></div>
<div id="container">
<ul>
<li>ARTS & ENTERTAINMENT</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>TECHNOLOGY</b></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>AUTO</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>SPORTS</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>NEWS BRIEFS</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li>GREEN ECONOMY</li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li><a rel="nofollow" href="http://www.hirediversity.com" target="_blank">CAREER NEWS</a> </li>
</ul>
</div><hr style="margin-top:4px"/>
Let's clean up some of that HTML and CSS :)
We can create the bullets using just the li parents for each link. The padding on #container li will space out the bullets evenly, however large of a gap you want.
Updated
The menu is centred by the combination of margin: auto; and a fixed width (in this case - width: 776px;.
Have a fiddle!
HTML
<div id="container">
<ul>
<li>
ARTS & ENTERTAINMENT
</li>
<li>
TECHNOLOGY
</li>
<li>
AUTO
</li>
<li>
SPORTS
</li>
<li>
NEWS BRIEFS
</li>
<li>
GREEN ECONOMY
</li>
<li>
CAREER NEWS
</li>
</ul>
</div>
CSS
* {
margin: 0;
padding: 0;
}
#container {
overflow: hidden;
}
#container ul {
margin: 10px auto;
width: 776px;
border-bottom: dotted 1px #CCC;
overflow: auto;
padding: 0 0 10px;
}
#container li:first-child {
list-style: none;
margin: 0 0 0 18px;
}
#container li {
float: left;
font-family:"Arial Narrow", Arial, sans-serif;
font-size: 0.8em;
padding: 0 30px 0 2px;
}
#container a:link {
color: #000;
text-decoration: none;
}
#container a:hover {
color: #F00;
text-decoration: underline;
}
You can justify your list elements by making you ul have text-align: justify. Then, make an :after element that has a width: 100% to trick it into thinking there is another line.
See here: (Sorry, I removed some of your CSS to make it easier to read.)
http://jsfiddle.net/ECf2u/
div#container{
width:1020px;
}
div#container ul {
width: 100%;
text-align: justify;
-webkit-padding-start:0px; /* reset chrome default */
}
div#container ul:after {
content: "";
width: 100%;
display: inline-block;
}
div#container ul li {
font-family: "Arial Narrow", Arial, sans-serif;
font-weight:bold;
font-size:12px;
text-align: center;
display: inline-block;
position: relative;
}
div#container A:link { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
div#containerA:visited {
COLOR: #666;
TEXT-DECORATION: none;
font-weight: normal
}
div#container A:active {
COLOR: #666;
TEXT-DECORATION: none
}
div#container A:hover {
COLOR: #C00;
TEXT-DECORATION: none;
font-weight: none
}
Here is a simpler solution, using CSS3 flex.
It fully-justifies the menu items, distributing the space evenly around the bullets.
I couldn't figure out how to do the bullets without the extra empty <li><\li> elements.
Link to CodePen
.menu { font: 14px "Arial Narrow", Arial, sans-serif; list-style-type: none; padding:3px }
.menu a { color: black; text-decoration: none }
.menu a:visited, .menu a:active { color: #666 }
.menu a:hover { color: #c00 }
.menu { display:flex; justify-content:space-between; border: 1px solid black; border-width: 1px 0 }
.menu li:empty:after { content:"\2022" }
<ul class="menu">
<li>ARTS & ENTERTAINMENT</li><li></li>
<li>TECHNOLOGY</li><li></li>
<li>AUTO</li><li></li>
<li>SPORTS</li><li></li>
<li>NEWS BRIEFS</li><li></li>
<li>GREEN ECONOMY</li><li></li>
<li>CAREER NEWS</li>
</ul>
I'm trying to have some links align at the bottom of their containing element. I added vertical-align text-bottom to the containing element. I get nothing.
Here is the contents in the main html file.
<div class="mainHeader">
<li><a class="mainHeaderLink" href="book.html">BOOK A ROOM</a></li>
<li><a class="mainHeaderLink" href="promotions.html">PROMOTIONS</a></li>
<li><a class="mainHeaderLink" href="meetings.html">MEETINGS & EVENTS</a></li>
<li><a class="mainHeaderLink" href="about.html">ABOUT STIL</a></li>
</div>
Here is my css file. (the css works, just not the align property)
#charset "UTF-8";
/* CSS Document */
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
div.mainHeader
{
background-color: #006;
background: solid;
height:100px;
text-align: center;
vertical-align: text-bottom;
}
a.mainHeaderLink:link
{
text-decoration: none;
font-weight: bold;
color: #FFF;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a.mainHeaderLink:visited
{
text-decoration: none;
font-weight: bold;
color: #FFF;
font-size: 16px;
}
a.mainHeaderLink: active
{
text-decoration: none;
font-weight: bold;
color: #CCC;
font-size: 16px;
}
a.mainHeaderLink:hover
{
text-decoration: none;
font-weight: bold;
color: #CCC;
font-size: 16px;
}
li
{
display:inline;
margin-left: 50px;
}
It's not valid to have <li> without a <ul> parent. Fix that.
Additionally, I would just add a couple of simple styles to get it to "align" to the bottom rather than mess around with vertical-align, which I believe to be cursed.
.mainHeader {
position: relative;
}
.mainHeader ul {
position: absolute;
bottom: 0;
}
http://jsfiddle.net/d3SFz/
As others have said, put your <li> items inside a <ul> tag. Given the css above you can 'center' your menu items with this change to your css:
li
{
display:inline-block;
margin-left: 50px;
margin-top:37px;
}
check it out here