How to get link to respect padding around text - html

Currently the link is just around the text / li. How do I get the link to respect the padding on the li? i.e. for the full height of the list item to be clickable / the yellow background on hover to fill the height of the list item including the padding top and bottom.
For various reasons I don't want to add the padding top and bottom to the link a style. it has to be on the li element
ul {
font-size:22px;
list-style-type: none;
padding-left: 0;
border-top:1px solid;
line-height:35px;
}
li {
border-bottom:1px solid;
padding:18px 0;
}
a:link { color:rgb(66,66,66); display:block; }
a:visited { color:rgb(66,66,66); display:block; }
a:hover { color:rgb(66,66,66); display:block; background-color:yellow; }
a:active { color:rgb(66,66,66); display:block; background-color:yellow; }
<ul>
<li>Coming soon</li>
</ul>
JS Fiddle: https://jsfiddle.net/1ah7qyfc/

You could extend the area of the link element with a pseudoelement positioned in absolute according to the list-item.
Add position: relative to the li, then for the ::before pseudoelement of the link set top: 0 and bottom: 0 (so even if you change the value of the padding of the parent element, the clickable area will adapt itself).
ul {
font-size:22px;
list-style-type: none;
padding-left: 0;
border-top:1px solid;
line-height:35px;
}
li {
border-bottom:1px solid;
padding:18px 0;
position: relative;
}
a::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
li:hover { background: yellow; }
a,
a:link,
a:visited,
a:hover,
a:active { color:rgb(66,66,66); display:block; }
a:hover,
a:active { background: inherit; }
<ul id="list-of-posts" class="cms-editable">
<li>Coming soon</li>
</ul>
As the final result, the top and bottom padding areas are clickable.

Try with this CSS:
li:hover{
color:rgb(66,66,66); display:block; background-color:yellow;
}
You can add id="" if necessary.

Related

Solid line under navbar with ::after

So I am trying to build my navbar and I seem kind of stuck. I've been trying to get a solid yellow line about 3-5px thick underneath my navbar.
I remember I have made a navbar in the past that looked like what I am trying to do but I forgot how to do that and I have lost that document.
So I have used: nav::after and tried border-bottom but it does not do anything..
nav {
background:black;
margin:0;
width:100%;
padding: 20px;
display: block;
}
nav::after {
border-bottom: 8px solid green;
content: '';
position: absolute;
left: 0;
right: 0;
width: 100%;
bottom: 0;
margin: 0 auto;
}
nav ul .nav-links {
float:right;
margin-top:20px;
margin-right:40px;
}
nav ul {
list-style-type:none;
}
nav li {
display: inline-block;
color:white;
margin-right:30px;
}
nav a {
color:white;
text-decoration:none;
float:right;
transition:.2s ease-in-out;
font-weight:700;
}
nav a:hover {
color:#FFE600;
}
.nav-title {
line-height:30px;
}
<nav id="nav">
<ul>
<li class="nav-title"><h2>text text</h2><h4>is a text, text text text</h4></li>
<div class="nav-links">
<li>About</li>
<li>Statistics</li>
<li>What can you do?</li>
</div>
</ul>
</nav>
#nav{
position: relative;
}
You need to use the "#" css selector, to specify, you are referring to the element with the id => nav. (it look cleaner)
Position relative means, the child element will be absolutely positioned RELATIVE to the parent. (which has this attribute setted)
You don't need '::after'--you can remove that. The border-bottom of the div will automatically be shown at the bottom of the div.

Fixing width and other CSS problems in menu navigation

I am coding a very simple CSS navigation menu. I’m trying to stretch the nav to 100% width across the page and set the last menu option to orange background color and white text color to no avail.
Can someone have a look at my CSS code and see where my problem is?
body {
background: #282828;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
margin-right: 5px;
padding: 10px 20px;
position: relative;
height: 20px;
line-height: 20px;
background-color: #282c2b;
color: #fff;
}
#nav > ul > li {
float: left;
height: 30px;
line-height: 30px;
background-color: #282c2b;
border-left: 4px solid #282c2b;
}
#nav li > ul {
visibility: hidden;
position: absolute;
top: 0px;
color: #fff;
}
#nav > ul > li > ul {
width: 100%;
top: 50px;
margin-bottom: 10px;
left: -4px;
}
#nav li:hover {
background-color: #ffffff;
color: #282c2b;
border-left: 4px solid #ff3d00;
}
#nav li:hover > ul {
visibility: visible;
}
#nav ul li .navOrange {
background-color: #ff3d00;
}
Here’s a CodePen
I know it might be hard to achieve this with pure CSS but is it possible to make the menu drop down upon clicking or is it just set to rollover without JavaScript?
so i decided to change it up a little and use elements because it suits me better.
so i now have the following;
http://codepen.io/anon/pen/waKENz
when i add around the div elements it doesnt use the style setup in css, why is it doing this?
and is it possible to perhaps have menu option 4 perform a dropdown on rollover as before or not with elements.
You might have to target each navigation item seperately by setting a percentage width for the item and probably a percentage margin also. Make sure they all add up to 100%.
#nav > ul > li {
margin: 0 1%;
}
.home,
.level-1,
.support,
.sign-up {
width: 18%;
}
.info {
width: 20%;
}
.home {
margin-left: 0;
}
.sign-up {
margin-right: 0;
}
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="info">Information</li>
<li class="level-1">Level 1</li>
<li class="support">Support</li>
<li class="sign-up">SIGN-UP!</li>
</ul>
</div>
Here's a demo jsFiddle (not full code).
The last item in the navigation is not turning orange because the selector is incorrect. You have:
#nav ul li .navOrange { background-color: #ff3d00;}
Which says (working right to left), select any element with the class of .navOrange that is a child of any li that is a child of any ul that is a child of #nav. .navOrange is an not a child of an li but on class on an li and also a child of a ul.
Remove li from the selector and it will work.
#nav ul .navOrange { background-color: #ff3d00;}
About the orange background color: you need to remove the space between "li" and ".navOrange" in the last definition. This will make it more specific than the other definitions and be applied later.
Full width can be achieved relatively simply if you know how many options you'll have in the menu with resizing the buttons to an adequate percentage. Though be careful with this - you generally want something less than 20% with 5 buttons because of the margins etc.
The hover menu that you already have is pure CSS, I don't know of a way to make it onclick without JavaScript.
Please check this code snippet.
body {background: #282828;}
#nav ul{ margin:0; padding:0; list-style:none; }
#nav ul li{ margin-right:5px; padding:10px 20px; position:relative; height:20px; line-height:20px; background-color:#282c2b; color:#fff; }
#nav > ul > li { float: left; height:30px; line-height:30px; background-color:#282c2b; border-left:4px solid #282c2b; }
#nav li > ul{ visibility:hidden; position: absolute; top:70px; color:#fff;
transition: all 0.2s ease-in;
opacity: 0;
}
#nav li.have-item:hover ul{
visibility:visible;
top:50px;
opacity: 1;
}
#nav > ul > li > ul{ width:100%; margin-bottom:10px; left:-4px; }
#nav > ul > li > ul li{
width:100%;
}
#nav li:hover{ background-color:#ffffff; color:#282c2b; border-left:4px solid #ff3d00; }
#nav li:hover > ul{visibility:visible;}
#nav > ul > li:last-child { background-color:#ff3d00 !important; }
<div id="nav">
<ul>
<li>Home</li>
<li>Information</li>
<li>Level 1</li>
<li class="have-item">Support
<ul>
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
<li class="navOrange">SIGN-UP!</li>
</ul>
</div>

Positioning of drop down to left

I am trying to create 3 - tire drop down menu. I am positioning the third level sub menu to left of parent menu, but the top positions is no aligning properly.
below screen is the result i got.
css code:
/* the menu_new_new is the list, you don't need a wrapping div */
#menu_new{
Text-Align: Left;
/*width:100%;*/
background:#194eb1;
/* height:30px;*/
}
/* only mainmenu_new listitems */
#menu_new > li{
display:inline-block;
position:relative;
line-height:35px;
}
/* links in mainmenu_new and both submenu_news */
#menu_new a{
display:block;
text-decoration:none;
padding:0px 10px;
color:#fff;
text-align:Left;
}
/* submenu_news of both levels */
#menu_new li ul{
position: absolute;
top: 35px;
left:0;
min-width:150px;
background: #194eb1;
Text-Align: Left;
}
/* submenu text */
#menu_new li ul li{
Text-Align: Left;
line-height:20px;
List-style-type:none;
border: 1px solid white;
}
/* move the second level submenu_new to the right to don't overlap the parent submenu_new */
#menu_new ul ul{
position: absolute;
top:auto;
left:150px;
Z-index: 10;
}
/* hover effect for submenu_new links */
#menu_new li li a:hover{
background:rgba(255,255,255,0.5);
}
/* hide all submenu_news for default */
#menu_new li ul{
display: none;
}
/* show a submenu_new if the direct parent listitem is hovered */
#menu_new li:hover > ul{
display:block;
}
How to align the top position exactly to parent menu position?
Please refer this for sample code: http://jsfiddle.net/asovbLqd/?
Please Chk URL enter link description here
#menu_new ul ul{
top:0px;
}
#menu_new li ul li{
position:relative;
}
EDIT: Also need to add position: relative to #menu_new li ul li.
For #menu_new ul ul, instead of top: auto, use top: 0.
To fix the Top for all sub menu, you need to provide "postion:relative to its parent element"
And to fix the Left extra space you need is to remove the default Padding from "<ul>" tag
Here is the Fiddle with both issues resolved "Top position and Left position":
http://jsfiddle.net/asovbLqd/14/
I have just changed the below:
Added position: relative; to the parent element of Sub Menu <ul>
#menu_new li ul li {
Text-Align: Left;
line-height:20px;
List-style-type:none;
border: 1px solid white;
position: relative;
}
And Removed Padding and margin from <ul> tags
#menu_new ul ul {
position: absolute;
top: 0;
left: 150px;
z-index: 10;
padding: 0;
margin: 0;
}
#menu_new li ul {
display: none;
margin: 0;
padding: 0;
}
Hope this will help!

Extra space occurring when hovering link in navigation bar

HTML:
<ul>
<li>Home</li>
<li>Products
<ul>Power tools</ul>
<ul>Decorating</ul>
<ul>Plumbing</ul>
<ul>Electrical</ul>
<ul>Lighting</ul>
<ul>Tools</ul>
<ul>More products...</ul>
</li>
<li>Service
<ul>Handy man</ul>
<ul>Key cutting</ul>
</li>
<li>Contact us</li>
<li>About us</li>
<li>More...</li>
</ul>
CSS:
li ul {
display:none;
}
li:hover ul {
display:block;
}
ul li {
list-style:none;
}
ul {
padding:0px;
margin:0px;
}
li {
float:left;
position:relative;
}
ul{
position: relative;
}
ul li a{
display:block;
padding: 25px;
background-color:white;
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
text-decoration:none;
color: black;
font-family:arial bold;
border-bottom: 4px solid rgb(140, 0, 0);
}
ul li ul a {
display:block;
padding: 25px;
background-color:rgb(140,0,0);
background:rgb(140,0,0);
color: white;
font-family:arial bold;
border-bottom: 0px solid rgb(140, 0, 0);
}
JSFIDDLE: http://jsfiddle.net/r6Mzp/6/
How can I remove the extra space which is occurring when hovering the main navigation bar link?
What i mean is when i hover a link in the navigation bar the drop down will show but the link that was originally hovered has got slightly bigger from the right. How can i stop the original link from getting bigger from the right? HELP!
The sub menu has more characters than the main navigation links which is creating that effect. In order to remove the increase in width, you need to limit the width of the navigation links. So here is what you need to modify:
ul li ul a {
display:block;
/*add this width element*/
width:64px;
padding: 25px;
background-color:rgb(140,0,0);
background:rgb(140,0,0);
color: white;
font-family:arial bold;
border-bottom: 0px solid rgb(140, 0, 0);
}
Fiddle
UPDATE:
Instead of changing the width of the above element as I had suggested, you can adjust the width on ul li like this:
ul li {
list-style:none;
width:150px;
}
UPDATED FIDDLE
FINAL UPDATE:
Please find the updated css. I think now it wont be possible without altering any width.
ul li ul a {
display:block;
background-color:rgb(140,0,0);
background:rgb(140,0,0);
color: white;
width:60px;
word-wrap:break-word;
font-family:arial bold;
border-bottom: 0px solid rgb(140, 0, 0);
}
FIDDLE FOR SAME
I am on my phone, and can't comment cause of my rep. That apart, make your ul(sub menu) position absolute and is patent element position relative. should do the trick.
Provide the width of ul li css element as below :
ul li {
list-style:none;
width:125px;
}
or you may give the width for each li (ul li a) element. that will also works fine.
JSFIDDLE
The size of the child objects are larger than the parents.
Increase the size to 35 in the padding.
ul li a{
...
padding: 35px;
..
}
ul li {
list-style:none;
width: 15%;
}

Submenu appears right away on the page, but disappears when mouse goes over the main menu item

hoping someone could help me solve this issue...im not using js, just css and html. I have built a menu which works good but my issue is when i try to add in a sub menu. I would like for it be hidden until someone goes over the main menu, then i would like for it to drop down. The effect that im getting now is my sub menu loads right away with the main menu above it and then it disappears when i go over that main menu item. i have tried some different things such as adding z-index here and there, but no luck so far...
HTML:
<div id="container">
<div id="menu">
<ul id="nav">
<ul>
<li id="menu1"><h2>Home</h2></li>
<li id="menu2"><h2>Sign-Up</h2></li>
<li id="menu3"><h2>Packages</h2>
<ul>
<li>Gold</li>
<li>Platinum</li>
</ul>
</li>
<li id="menu4"><h2>About Us</h2></li>
<li id="menu5"><h2>Contact</h2></li>
</ul>
</ul>
</div>
CSS:
* {
margin:0px;
padding:0px;
}
.form-textbox{
height:100px;
font-size:100px;
}
#fieldset{
width:300px;
}
#fieldst p{
clear:both;
padding:5px;
}
#legend{
font-size:16px;
}
label[for="username"] {
color:#FFFFFF;
font-weight:bold;
clear:both;
text-align:left;
}
label[for="password"] {
color:#FFFFFF;
font-weight:bold;
clear: both;
text-align:left;
margin-top:40px;
}
body {
padding-top:0px;
background-color:#01111d;
color:#FFF;
font-family:verdana, arial, sans-serif;
text-align: left;
letter-spacing: 1px;
}
a {
color: #FFF;
font-size: 14px;
}
a:hover {
color:#efae00;
} //01a9c0
.more {
float:left;
}
.clear {
clear:both;
}
p {
margin: 20px 0px 20px 0px;
line-height: 16px;
font-size: 14px;
}
#container {
margin: 0px auto;
width: 873px;
}
#menu {
background-image:url(images/menu.gif);
width:862px;
height:90px;
position:relative;
z-index:99999;
}
#menu li{
position:absolute;
top:40px;
list-style-type:none;
}
#menu1 {
left:110px;
}
#menu2 {
left:255px;
}
#menu3 {
left:400px;
}
#menu4 {
left:540px;
}
#menu5 {
left:680px;
}
#menu a {
font-family: verdana, arial, sans-serif;
font-size:12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover {
color:#efae00;
}
#menu li > #nav li ul
#nav li ul {
position:absolute;
display:none;
}
#nav li:hover ul {
display: none;
}
#nav li ul li {
float: none;
display: block;
}
#nav li ul li a {
width: 118px;
position: absolute;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #fff;
}
#nav li ul li a:hover {
background: #066;
color: #000;
}
Jsfiddle here: http://jsfiddle.net/bC7f2/
So it appears there are a few things that we can change in your code. The first thing is when you should and should not display things. To keep it short, I have made a few adjustments to the CSS code, just be sure you are getting the exact area you are trying to use. Here are the new selector names:
#nav ul li:hover ul #ITEM NAME HERE
#nav li ul # ITEM NAME HERE
Next, you started off by displaying your drop down menu as "display: block;" , this means that anything in the drop down menu will automatically begin on the page, this should actually be set to "display:none;", so that it is not visible until you hover. Here is your end product:
#nav ul li:hover ul #item1 {
display: none;
position: absolute;
z-index: 100;
display: inline-block;
top: 20px;
}
#nav ul li:hover ul #item2 {
/* display: none; */
position: relative;
z-index:1;
display: block;
top: 13px;
}
#nav ul li:hover ul #item3 {
/* display: none; */
position: relative;
z-index:0;
display: block;
top: 27px;
}
#nav li ul #item1 {
z-index:100;
display:none;
}
#nav li ul #item2 {
z-index:1;
display:none;
}
#nav li ul #item3 {
z-index:0;
display:none;
}
I also added a margin here to connect the sub menu to the normal menu or else it will act really weird. Your end product can be found here.
I would suggest looking into some specific tutorials on how to create drop down menus with CSS or look into using jQuery with your drop down menu (it will make it more clean and easy to use).
Edit: Here is an update with the sub menus showing, I have also added another sub menu to show you exactly how the items will work and the corresponding CSS to go with it here.
To break down my additions, I will split it up into sections really fast:
Z-Index: This is pretty much the order of what the items will appear in, where the higher the number, the higher on the list it will appear. Here is a resource for more information.
Positioning: I have used a combination of absolute and relative positioning. This is extremely dirty and I don't know if many would recommend the use of this in the applicable web programming world. It would be better to use solely absolute positioning, but this will still get your job done. More information can be found here.
Top: This is pretty self explanatory but it is really the distance from the utmost top object. More information on this can be found here.