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
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'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
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
I'm creating a drop down menu, the top level list item will display a username.
I have a bit of an issue because I want the dropdown menu to be the same width at the top level list item being hovered over.
However, if I set ul li ul li to width 100%, it takes 100% of the overall container, not of the ul above it. I think because ul ul's are position absolute?
Any ideas how I can make the drop down menu's the same width as the parent list item?
The page can be seen here.
and here's the HTML
<ul>
<li><span aria-hidden="true" data-icon="a"> A long name here
<ul>
<li>View Profile</li>
<li>Edit Profile</li>
<li>Settings</li>
<li>My Payments</li>
</ul>
</li>
<li> <span aria-hidden="true" data-icon="c"> Online</li>
<li> Log Out</li>
</ul>
CSS
.head-link ul ul {
display: none;
}
.head-link ul li:hover > ul {
display: block;
}
.head-link ul {
list-style: none;
position: relative;
display: inline-table;
}
.head-link ul li {
float: left;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
height: 2em;
width: auto;
padding: 0.5em 0.98em;
}
.head-link ul li:hover {
background: #ffffff;
}
.head-link ul li:hover a {
color: #434343;
border-bottom: none;
}
.head-link ul li a {
display: block;
color: #ffffff;
text-decoration: none;
}
.head-link ul ul {
background: #ffffff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 99%;
left: 0;
text-align: left;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
padding-bottom: 0.8em;
padding-top: 0.5em;
box-shadow: 0px 0.3em 0.4em rgba(0,0,0,0.3);
}
.head-link ul ul li {
float: none;
position: relative;
padding: 0em;
}
.head-link ul ul li a {
padding: 0.5em 1.24em;
color: #434343;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
.head-link ul ul li a:hover {
background: #ffffff;
text-decoration: underline;
}
.head-link ul ul ul {
position: absolute;
left: 100%;
top:0;
}
Here's how I made it look like this:
Just modify these rules:
.head-link ul li {
position: relative;
... /* Keep all current rules */
}
.head-link ul li ul {
width: 100%;
... /* Keep all current rules */
}
Problem: Why when i go with the mouse over "About" the sub-menu appears but if i try to go into any of it items it disappears?
Part of my style.css:
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #ffffff;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu a:hover{
color: #136F6F;
}
#menu ul {
list-style: none;
text-align: center;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
position: relative;
list-style: none;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul ul{
position: absolute;
top: 35px;
visibility: hidden;
}
#menu ul ul li{
position: relative;
float: left;
margin: 0;
padding:0;
}
#menu ul ul li a{
display: block;
text-decoration:none;
text-align: center;
height: 55px;
line-height: 55px;
width: 200px;
background-color: #209D9D;
color: white;
}
#wrapper {
position: relative;
width: 980px;
margin: 75px auto 0 auto;
background: #FFFFFF;
}
Part of my index.html:
<div id="wrapper">
<div id="menu">
<ul>
<li class="first current_page_item">Homepage</li>
<li>Blog</li>
<li>Papers</li>
<li>Projects</li>
<li>About
<ul>
<li>Me</li>
<li>Curriculum Vitae</li>
<li>Contact Me</li>
</ul>
</li>
<!-- <li class="last">Contact</li> -->
</ul>
<br class="clearfix" />
</div>
There is a gap between your menu and submenu, when your cursor goes over this gap, the submenu disappears, try changing "top: 35px;" in "#menu ul ul" to "top: 20px;"
Change padding of #menu ul li to padding: 20px;
Play around the values.
Live demo
EDIT
Instead of changing the li's padding, I had added below css:
#menu ul li a {
padding:20px 0;
}
#menu ul ul li a {
padding: 0;
}
Demo Here
Try it.