http://jsfiddle.net/msbyuva/QPQqs/
Hi I have a menu formed using
<ul class="topnav">
<li>#Html.ActionLink("Configuration", "Configuration", "Home")</li>
<li>#Html.ActionLink("Reporting", "Reporting", "Home")
<ul class="subnav">
<li>#Html.ActionLink("Pipeline", "Pipeline", "Pipeline", null, new { target = "_blank", Url = "http://storespipeline/stores/" })</li>
<li>D2C OBI Reports</li>
<li>#Html.ActionLink("Device Utilization", "DeviceUtilization", "DeviceUtilization")</li>
<li>#Html.ActionLink("Display Audit", "DisplayAudit", "DisplayAudit")</li>
<li>#Html.ActionLink("TrueVUE Reports", "TrueVUE", "TrueVUE")</li>
</ul>
</li>
<li>#Html.ActionLink("Admin", "Admin", "Home")</li>
</ul>
CSS:
ul.topnav
{
list-style: none;
padding: 10px;
margin: 0;
float: left;
width: 100%;
background: #f6f6f6;
font-size: 1em;
color: Black;
}
ul.topnav li
{
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.topnav li a
{
padding: 5px 0px 0px 0px;
color: black;
display: table;
text-decoration: none;
float: left;
}
ul.topnav li a:hover
{
text-decoration: underline;
font-weight: bold;
}
ul.topnav li span.subhover
{
}
ul.topnav li ul.subnav
{
list-style: none;
position: absolute;
left: 0px;
top: 25px;
background: #f6f6f6;
margin: 0;
padding: 0px 0px 0px 0px;
height: auto;
display: none;
float: left;
min-width: 100px;
width: auto;
}
ul.topnav li ul.subnav li
{
margin: 0px;
padding: 4px 10px 0px 10px;
height: auto;
line-height: 100%;
}
html ul.topnav li ul.subnav li a
{
float: left;
width: 150%;
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}
html ul.topnav li ul.subnav li a:hover
{
}
</style>
When I click on a link example -- Display Audit -- when the page gets loaded -- the menu link is underneath the page content... that can be seen in the image (the last two links go underneath the page content)..... how can I display the menu link above the page content??
I am using IE7, CSS 2.1
You need to use a z-index. For z-index to work both the navigation container and the content container need to have a position of relative, absolute or fixed. For your example I would suggest a relative positioning.
.topnav {
position:relative;
z-index:1000;
}
.yourContentContainer{
position:relative;
z-index:1;
}
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've created a nav menu that is unnecessarily adding extra space to the right side of it. When the page is made smaller it adds a scroll bar to the bottom of the page which makes the page uncentered. After some digging in Dreamweaver it looks like the UL element's surrounding box is not centered with the actual navigation menu. It juts off to the right and seems to be causing the problem. How to I get this centered with the nav menu?
I've also included a fiddle below.
nav {
float: left;
width: 100%;
}
ul {
float: left;
list-style: none;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
}
.main-nav li a:hover {
border: solid 1px black;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
border: solid 1px transparent;
padding: 5px 10px;
}
<nav class="nav">
<ul class="main-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>MUSIC</li>
<li>STORE</li>
<li>LIVE</li>
<li>CONTACT</li>
</ul>
<nav>
View on JSFiddle
Simply add in your nav the overflow property:
nav {
float: left;
width: 100%;
overflow-x: hidden;
}
It seems like there's too much padding in between the menu items. kick that down in the css block:
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px; //first parameter is top/bottom, the second parameter is left/right. kick it down to something like 5px 10px;
color: white;
line-height: 1.3em;
}
Take out the right:50%; and for margin, use "margin:0 auto;"
the auto will auto-center the nav
You shouldn't use floats or lefts to align your navbar. Instead try doing this: It makes the navbar centered and no scroll is appearing for small devices. Update your ul and li class to this:
ul {
list-style: none;
padding: 0;
position: relative;
text-align: center;
}
ul li {
display: inline-block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
Furthermore, if you want your navbar to appear in a list form for small devices, simply add this media query for your preferred range:
#media (max-width: 480px) {
ul li {
display: block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
}
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
Someone asked me to improve his CSS to prevent the navigation menu from changing position when the browser gets smaller, but I can't figure out why it won't work. See the jsFiddle: http://jsfiddle.net/gtvTY/10/
The HTML:
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
This is the original menu:
ul.menu {
position:absolute;
left:18%;
right:18%;
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 64%;
z-index: 3;
}
ul.menu li {
float: left;
margin: 0;
padding: 0;
}
ul.menu a {
background: #333;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
ul.menu a:hover {
background: #666;
color: #fff;
padding-bottom: 8px;
}
I have redesigned it a bit to this. But it doesn't work at all...
#menu ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}
#menu li
{
float: left;
margin: 0 0.15em;
}
#menu li a
{
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
Why doesn't this menu stay centered at all times?
Maybe it is something like this you are looking for - jsFiddle in comment
You need to put the menu in a wrapping container. Give it a width and set the margin: 0 auto;
See fiddle here: http://jsfiddle.net/AndrewHenderson/gtvTY/7/
HTML:
<div class="container">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
</div>
CSS:
.container{
margin: 0 auto;
width: 800px;
}
Is that what you want? jsfiddle
Menu canter aligned in the bowoser.
Menu Items will not go in the second row.
if this is so the solution is
You have to use position:relative; instead of position:absolute;
<div class="center">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
and define a width to your menu css
.center
{
width:auto;
}
#menu
{
width:900px;
margin:0 auto;
position:relative;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin: 0 0.15em;
}
#menu li a {
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
SEE LIVE MENU HERE.
I am trying to figure out why the drop-down disappears after you attempt to rollover it. Can someone see the problem in my code? Thank you.
HERE IS MY HTML MENU
<div id="menu">
<ul>
<li><span>Needs Assessment</span> </li>
<li><span>Knowledge Acquisition</span>
<ul>
<li>Administer Knowledge<br>Pre-Test</li>
<li>Assign Asthma<br>Article </li>
<li>Administer Knowledge<br>Post-Test</li>
<li>Discuss Asthma<br>Case Study</li>
</ul>
</li>
<li><span>Skills Proficiency</span> </li>
<li><span>Simulation in Teams</span>
<ul>
<li>Perform Asthma<br>Simulation</li>
<li>Facilitate<br>Debriefing</li>
</ul>
</li>
<li><span>Performance</span></li>
<li><span>Resources</span></li>
</ul>
</div>
HERE IS MY CSS
#menu {
position: relative;
top: 10px;
left: 0px;
width: 940px;
height: 47px;
}
#menu ul {
position: relative;
top: -15px;
left: 0px;
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
#menu ul li {
position: relative;
display: inline;
float: left;
list-style: none;
margin-right: 0px;
border: solid 0px #4981a8;
width: 156px;
background-image: url ('http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png');
background-repeat: no-repeat;
}
#menu ul li a {
display: block;
width: 156px;
padding: 12px 0px 10px 0px;
border: solid 0px #fff;
font-family: 'Cabin', sans-serif;
font-size: 14px;
font-weight: lighter;
text-align: center;
text-decoration: none;
}
#menu a span {
float: left;
display: block;
padding: 3px 5px 4px 6px;
color:#fff;
float: none;
}
#menu a:hover span {
color:#ffdd00;
}
#menu li ul {
position: absolute;
top: 47px;
left: 0px;
background-color:#4981a8;
border: solid 1px #4981a8;
display: none;
}
#menu li:hover ul {
display: block;
z-index: 999;
}
#menu li li a {
font-family: 'Cabin', sans-serif;
font-size: 14px;
color: #000;
font-weight: lighter;
height: 38px;
background-color:#eee;
margin-bottom: -9px;
}
#menu li li a:hover {
color: #065389;
}
You have another element on your page that's partially covering up the navigation:
#textbox {
position: relative;
top: -30px;
}
This is blocking the :hover. To solve this, give your #header a z-index:1. Any positive value should work, you just need to set it to something so the element stays on top.