I have a navigation dropdown element that I would like to make selectable - currently the link only works when the text is hovered and not the box surrounding it. Is there a way in which I can do this in CSS.
My CSS code:
.main-menu {
position: absolute;
top:90px;
right:0px;
text-align: right;
z-index: 2000;
}
.main-menu ul {
width: 50%;
background-color: #333;
display: inline;
margin: 0;
padding: 20px 5px;
list-style: none;
color: #fff;
}
.main-menu ul li {
display: inline-block;
margin-right: -10px;
position: relative;
padding: 17px 15px;
cursor: pointer;
color: #fff;
font-size: 14px;
font-weight: 700;
}
.main-menu ul li a {
color: #fff;
border: none;
}
.main-menu ul li a:hover {
color: #f1c40f;
}
/* sub menu */
.main-menu ul li ul {
position: absolute;
top: 25px;
left: 0;
min-width: 150px;
opacity: 0;
margin: 10px 0px;
padding: 17px 5px 0px 5px;
visibility: hidden;
text-align: left;
}
.main-menu ul li ul li {
display: block;
color: #fff;
margin: 0px -5px;
}
.main-menu ul li ul li:hover {
background: #666;
color: #f1c40f;
}
.main-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Jsfiddle is: http://jsfiddle.net/9BdTK/
Method 1
You can simply move the <a></a> outside of <li>.
E.G:
<li>Home</li>
DEMO HERE
Note: I have only done this for the first two links.
Method 2
A better way to do this is the following:
HTML:
<div id="con">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
CSS:
#con {
width: 100%;
background: #eee;
text-align: center;
}
ul {
list-style: none;
}
li {
display: inline-block;
width: 80px;
height: 50px;
outline: 1px solid #000;
}
a {
display: block;
height: 100%;
width: 100%;
}
Keep <a> inside and set it to display: block;, then set the width and height to 100% and this will take up the whole div creating a div link.
Demo of div link - DEMO HERE
Demo with hover - DEMO HERE
Hope this helps.
I have this on my site, but I also managed to do so from this site.
have a look :
Don't put padding in the 'li' item. Instead set the anchor tag to
display:inline-block; and apply padding to it.By Stussa
As said on : Make whole area clickable
Goodluck
Related
I've made this navigation with CSS and now I'm trying to make it responsive using media queries, but I can't get the submenus to show properly. In responsive mode, I'd like to display the full menu with all links neatly underneath each other in one box. Would really appreciate some help!
https://jsfiddle.net/4L8ghza0/1/
HTML:
<header>
<div class="nav">
<ul>
<li>Start</li>
<li>Submenu1 <span class="arrow">▼</span>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
<li>Service</li>
<li>Events</li>
<li>Submenu2 <span class="arrow">▼</span>
<ul>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</li>
</ul>
</div>
</header>
CSS:
header {
top: 0px;
background-color: #EFE7D2;
position: fixed !important;
width: 100%;
height: 125px;
z-index: 10;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.nav {
float: right;
padding: 40px 80px 0 0;
}
ul {
list-style-type: none;
}
ul li {
font-family: Arial, sans-serif;
font-size: 95%;
text-transform: uppercase;
display: inline-block;
position: relative;
float: left;
margin: 5px;
}
ul li a {
padding: 8px 10px;
display: block;
text-decoration: none;
color: #000000;
}
ul li:hover{
background: #CCB18E;
}
.nav .arrow {
font-size: 70%;
line-height: 0%;
}
ul li ul {
display: none;
position: absolute;
width: 210%;
padding: 0;
}
ul li ul li {
display: block;
text-decoration: none;
background: #CCB18E;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li ul li:hover {
display: block;
background: #DAC7AD;
text-decoration: none;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li:hover ul{
display:block;
visibility:visible;
}
ul ul li:hover li{
display:block;
}
.current {
background:#CCB18E;
color: #000000;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(https://cdn0.iconfinder.com/data/icons/social-messaging-productivity-4/128/menu-2-512.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
#media screen and (max-width: 1080px){
#menu-icon {
display: inline-block;
}
ul li ul li a {
display: block;
}
ul, ul:active {
display: none;
z-index: 1000;
position: absolute;
padding: 10px;
background: #EFE7D2;
right: 100px;
top: 60px;
width: 25%;
border: 1px #5F7B65 solid;
}
.nav:hover ul {
display: block;
}
ul li:hover ul li ul li {
display: none;
}
}
#JD26 I find it easier using flex-box. You can set .nav {display: flex; flex-direction:column;} in your media query. This should get you started. Or with block display: .nav {display: block}.
I am facing an issue on IE11 on a fixed element. That's a context menu that needs to grow horizontally depending on the text inside. This works perfectly on Firefox, Chrome and Safari, but not on IE.
The problem is that on IE11 the right arrow goes down to the next line, instead of growing the line to allow all text be shown.
The following is my code:
* {
box-sizing: border-box;
}
#context-menu {
display: none;
text-align: left;
position: fixed;
z-index: 1000000000;
}
#context-menu ul {
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 1px 1px 3px #444;
text-align: left;
min-width: 150px;
width: auto;
}
#context-menu ul,
#context-menu ul li {
padding: 0;
margin: 0;
position: relative;
display: block;
width: auto;
color: black;
text-align: left;
background-color: #fff;
}
#context-menu ul li {
padding: 5px 10px;
cursor: pointer;
}
#context-menu ul li:hover ul {
z-index: 1;
}
#context-menu ul li:first-child {
border-radius: 3px 3px 0 0;
}
#context-menu ul li:last-child {
border-radius: 0 0 3px 3px;
}
#context-menu ul li .fa {
margin-right: 10px;
width: 15px;
vertical-align: middle;
}
#context-menu ul li.group {
cursor: default;
background-color: #dfdfdf;
font-weight: bold;
}
#context-menu ul > li:not(.group):hover {
background-color: hsla(208, 56%, 53%, 1);
color: black;
}
#context-menu ul > li.submenu::after {
font-family: FontAwesome;
content: "\f105";
margin-left: 15px;
float: right;
}
#context-menu ul> li > ul{
display: none;
}
#context-menu ul > li:hover > ul {
display: block;
position: absolute;
left: 100%;
top: 0;
}
<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"/>
<div id="context-menu" style="display: block;">
<ul>
<li><span class="optionText">Long text to show the problem here on the right arrow</span></li>
<li class="submenu"><span class="optionText">Another text</span></li>
<li class="submenu"><span class="optionText">Long text to show the problem here on the right arrow</span>
<ul class="dropdownright">
<li><span class="optionText">Other</span></li>
</ul>
</li>
</ul>
</div>
If you see, if the text is longer than the min-width, it grows on all browsers except IE11, where the arrow goes down to the next line.
How can I make it grow the width automatically ?
Thank you.
Removing the "float: right" in the rule "#context-menu ul > li.submenu::after" seems to be working for me in Internet explorer 11.
I have menu items that must be stretched automatically in full width menu.How is the best way for any type of screen to do it automatically with css?
I tried this
.report_types_section ul li {
position: relative;
display: inline-block;
width: auto;
}.report_types_section ul li a {
float: left;
text-decoration: none;
color: #74a9d4;
font-size: 18px;
display: block;
text-align: center;
width: 100%;
padding-left: 15px;
padding-right: 35px;
text-transform: uppercase;
}.report_types_section ul li a:after {
content: " | ";
color: #74a9d4;
font-size: 18px;
float: right;
padding-left: 23px;
position: absolute;
}
But for any screen here I need to increase the padding but it is not good.
In the absence of having provided any markup- I have made a few inferences- what you wish to achieve can be used with CSS tables (in the absence of greater support for flexbox)
html,
body {
width: 100%;
margin: 0;
}
ul,
li {
padding: 0;
margin: 0;
}
.report_types_section ul {
display: table;
table-layout: fixed;
width: 100%;
}
.report_types_section ul li {
display: table-cell;
}
.report_types_section ul li:not(:last-of-type) {
border-right: 1px solid #74a9d4;
}
.report_types_section ul li a {
text-decoration: none;
color: #74a9d4;
white-space:nowrap;
font-size: 18px;
display: block;
text-align: center;
text-transform: uppercase;
}
<div class="report_types_section">
<ul>
<li>Menu Item
</li>
<li>Menu Item
</li>
<li>Menu Item
</li>
<li>Menu Item
</li>
</ul>
</div>
You can also apply white-space: nowrap; to the child a to prevent wrapping.
If you know how many items will be there, you can use columns with percentage width. For example 6 elements - 100% / 6
.report_types_section ul li {
display: inline-block;
width: 16.6%;
float: left;
}
DEMO here http://jsfiddle.net/mattydsw/hzy5Lr49/
EDIT
I have no better idea than using table layout and adding empty cells as spacing cells. I also put a pipe | in empty cells and centered it to simulate border.
http://jsfiddle.net/mattydsw/hzy5Lr49/2/
Finally I found a solution for the spaces.
Fiddle
.report_types_section ul {
list-style-type: none;
float: left;
width: 64%;
padding:0;
margin:0;
}
.report_types_section ul li:first-child {
text-align: left;
}
.report_types_section ul li {
position: relative;
line-height: 15px;
white-space: nowrap;
display: table-cell;
text-align: center;
}
.report_types_section ul li.active_tab a {
border-right: 1px solid #000;
}
.report_types_section ul li:last-child a {
padding-right: 0;
}
.report_types_section ul li:last-child a {
border-right: 0;
}
.report_types_section ul li:last-child {
text-align: right;
}
.report_types_section ul li:first-child a {
padding-left: 0;
}
.report_types_section ul li a {
float: left;
text-decoration: none;
color: #000;
font-size: 18px;
display: block;
padding: 0px 18px;
text-transform: uppercase;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
border-right: 1px solid #74a9d4;
}
I'm looking to make a dropdown menu that shows up inside/on top of the parent menu. I would like to do this in pure css. I have made a quick example of what I am looking for(in Photoshop). Here is a link. Here is what I have now, but this makes a normal dropdown menu and not one that stays in the parent container.
CSS:
.titlebox ul {
text-align: center;
font-size: 15px;
font-family: arial,sans-serif;
line-height: 32px;
margin: 0;
width: 100%;
background: #555;
list-style: none;
border-radius: 2px !important;
transition: all 0.15s ease;
}
.titlebox ul:hover {background: #666;}
.titlebox ul:active {background: #444;}
.titlebox ul li {
display: block;
color: #fff;
position: relative;
width: 100%;
height: 32px !important;
}
.titlebox ul li:hover {
background: #666;
}
.titlebox ul li:hover ul {
display: inline;
opacity: 1;
visibility: visible;
}
.titlebox ul li ul {
padding: 0;
position: absolute;
top: 0px;
right: 0px;
display: none;
opacity: 0;
visibility: hidden;
}
.titlebox ul li ul li {
display: inline;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
.titlebox ul li ul li:hover {background: #666;}
HTML(Quick):
<ul>
<li>Hi<br/>
<ul>
<li>Google<br/></li>
<li>HOLA<br/></li>
<li>HALO<br/></li>
</ul></li>
</ul>
Any and all help is appreciated! I know this might be kinda confusing but I don't know how else to explain it. If you have any questions, feel free to ask!
Thanks,
Usama Khan
EDIT 1: Here's the link to the JSFiddle.
i think this is your looking for .if not ,can you tell me where i am wrong.
ul {
text-align: center;
font-size: 15px;
font-family: arial, sans-serif;
line-height: 32px;
margin: 0;
padding: 0;
width: 300px;
background: #555;
list-style: none;
border-radius: 2px !important;
transition: all 0.15s ease;
}
ul:hover {
background: #666;
}
ul:active {
background: #444;
}
ul li {
display: block;
color: #fff;
position: relative;
width: 100%;
height: 32px !important;
}
ul li:hover {
background: #666;
}
ul li:hover ul {
display: inline;
opacity: 1;
visibility: visible;
margin-left:10px;
}
ul li ul {
padding: 0;
position: absolute;
top: 0px;
right: 0px;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
display: inline;
color: #fff;
text-shadow: 0 -1px 0 #000;
float: left;
width: 33%;
}
ul li ul li:hover a{
color: white;
}
ul li ul li:hover {
background: #777;
}
<body>
<ul>
<li>Hi
<ul>
<li>Google1</li>
<li>Google2</li>
<li>Google3</li>
</ul>
</li>
</ul>
</body>
The HTML
I removed the /br from the html, because it was forcing the navigation menu to drop down.
<body>
<ul>
<li>Hi
<ul>
<li>HOLA</li>
<li>HALO</li>
</ul>
</li>
</ul>
</body>
The CSS
Read the comments in the css for all changes / explanation (ask if there is something you do not understand). I also removed a lot of unnecessary css from your code (and some of it probably still is).
ul {
text-align: center;
font-size: 15px;
font-family: arial, sans-serif;
line-height: 32px;
margin: 0 auto;/*center nav-menu*/
padding: 0;
width: 300px;
background: #555;
list-style: none;
border-radius: 2px;
}
/*unnecessary now
ul:hover {
background: #666;*/
}
ul:active {
background: #444;
}
ul li {
display: block;
color: #fff;
position: relative;
width: 100%;
height: 100%;
}
/*unnecessary now
ul li:hover {
background: #666;
}*/
/*hide ul and making it the same dimensions as its parent*/
ul li ul {
padding: 0;
position: absolute;
left: 0px;
right: 0px;
top:0px;
bottom: 0px;
display: none;
}
/*make submenu appear on hover of ul*/
ul li:hover ul {
display: block;
}
/*style the subnavigation-list*/
ul li ul li {
display: block;
width: 50%;/*accomidates for 2 list items, adding more will drop them below*/
float: left;
}
/*style your buttons*/
ul li ul li a{
text-decoration: none;
color: white;
text-shadow: 0 -1px 0 #000;
display: block;
height: 100%;
width: 100%;
background-color: #555;
box-shadow: 0px 0px 1px 1px white inset;
}
/*style button on hover*/
ul li ul li a:hover{
background-color: #999;
}
JSFiddle
The dropdown menu is not aligning properly. The dropdown options are to the right for some reason instead of aligned ('students', 'programs', 'trainings').
Here is the css code for the menu:
<style type="text/css">
#drop-nav {
width: 1000px;
}
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow: visible;
position: static;
}
ul li {
border: 1px solid #000000;
display: block;
position: relative;
float: left;
right: -4px;
background-color: white;
}
li ul {
display: none;
background-color: #3333ff;
}
ul li a {
padding: 10px 18px 5px 90px;
background: #3333ff none repeat scroll 0% 50%;
text-decoration: none;
white-space: nowrap;
color: #ffffff;
overflow: visible;
text-align: center;
display: block;
}
ul li a:hover {
background: #3366ff none repeat scroll 0% 50%;
overflow: visible;
}
li:hover ul {
display: block;
position: absolute;
overflow: visible;
}
li:hover li {
float: none;
background-color: #3366ff;
}
li:hover a {
background: #2346b1 none repeat scroll 0% 50%;
}
li:hover li a:hover {
background: #40a3f6 none repeat scroll 0% 50%;
}
#drop-nav li ul li {
border-top: 0px none;
overflow: visible;
visibility: visible;
font-family: Arial,Helvetica,sans-serif;
text-align: justify;
clear: none;
display: table-row;
width: 140px;
}
</style>
Here is the html:
<ul id="drop-nav">
<li>Home
</li>
<li>About
<ul>
<li>Students</li>
<li>Programs</li>
<li>Trainings</li>
</ul>
</li>
<li>Services Offered
</li>
<li>Our Products</li>
<li>Contact
</li>
</ul>
This is because ou are using padding-left at 90px. You can change it to this:
ul li ul li a {
text-align: left;
padding: 10px 18px 5px 0px;
width: 100%;
display: table-cell;
}
fiddle
It's not clear what you are referring to but the text is affected as you have too much left padding on the anchor links compared the other sides.
ul li a {
padding: 10px 18px 5px 90px; /* 90px!!! */
Try something less
JSfiddle Demo