I have tried to make horizontal menu in center of page but 'div align=center' not working properly.
.nav ul {
display: block;
list-style-type: none;
margin: 0;
position: absolute;
}
.nav li {
display: inline-block;
float: left;
}
.nav li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica
Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } .nav li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } .nav div ul {display:block;} .nav li ul { display: none; } .nav
li ul li {
display: block;
float: none;
}
.nav li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
.nav ul > li:hover ul {
display: block;
visibility: visible;
}
.nav ul li:hover > ul {
display: block;
}
<div class="nav">
<ul>
<li>Home
</li>
<li>
About
<ul>
<li>A1
</li>
<li>A2
</li>
</ul>
</li>
</ul>
</div>
sample code
I have tried to make horizontal menu in center of page but 'div align=center' not working properly.
Remove position:absolute; from your ul and add these minor changes
.nav{
width: 100%;
}
.nav ul {
display:block;
list-style-type:none;
margin: 0px auto;
width: 50%;
}
Here's the solved fiddle
Remove position:absolute;. It doesn't take any margin or padding values.
.nav ul {
list-style-type:none;
margin:0 auto;
display:table;
}
Here solved fiddle link
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #19c589;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
About
<div class="dropdown-content">
A1
A2
A3
</div>
</li>
<li>New</li>
</ul>
Use as the below:
.nav {
margin:0 auto;
}
please remove the ul position: absolute; style other styling left as it is. These are the additional changes you have to do.
.nav {
display: -webkit-box;
}
.nav ul {
margin: 0 auto;
}
Related
After nearly a week I am still struggling with toggle on navigation.
This is my current CSS, what I need to do now, is simply get the toggle to open, it did open before so something minor is stopping it now but I cant work it out. I do not really know much about CSS as I keep forgetting it, but I do not know javascript or jquery
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label,
#hamburger {
display: none;
}
.menu ul {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 10px;
width: 11.11%;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu li:visited {
background: #0000EE;
color: #fff;
}
.menu li:active,
.active {
background: #0000EE;
color: #fff;
}
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 20px 0 0;
font-size: 20px;
line-height: 44px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 768px) {
.nav {
background-color: #3333FF;
width: 100%;
}
``` .menu label {
display: inline-block;
color: #fff;
background-color: #3333FF;
padding-bottom: 8px;
}
.menu ul {
display: none;
}
.menu ul li {
display: block;
border-top: 1px solid #333;
}
.menu ul li:active {
display: block;
}
.menu label {
cursor: pointer;
margin: 0 20px 0 0;
font-size: 20px;
font-weight: bold;
line-height: 44px;
display: block;
}
#toggle:checked+.menu {
display: block;
}
<div class="nav">
<div class="menu">
<label for="toggle">☰</label><input type="checkbox" id="toggle">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li class="active">Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</div>
</div>
Here is an example for this. You can try this code. It is fully tested. I hope it will help you. You can change colors and backgrounds as per needed in this code.
nav ul ul {
display: none;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
list-style-type: none;
}
nav li a {
text-decoration: none;
display: inline-block;
margin: 10px 20px 5px 0;
padding: 8px 10px;
}
nav li a:link, nav li a:visited {
color: #646565;
background: #e8e9eb;
}
nav li a:link:hover, nav li a:visited:hover {
color: black;
}
nav li:hover ul {
display: block;
position: absolute;
}
input.toggle,
label.toggle {
display: none;
}
label.toggle {
font-weight: 900;
font-size: 1.2em;
padding: 10px 20px;
}
#media (max-width: 960px) {
nav {
display: none;
}
input.toggle, .toggle span {
display: none;
}
input[type=checkbox]:checked ~ nav, label.toggle {
display: block;
cursor: pointer;
}
nav li {
float: none;
}
nav li:hover ul {
display: block;
position: relative;
}
nav li ul {
display: block;
}
nav li ul li {
margin-left: 20px;
}
nav li a {
display: block;
margin-left: 20px;
}
}
<div class="wrapper">
<label class="toggle" for="toggle">☰ <span>Menue</span></label>
<input class="toggle" id="toggle" type="checkbox">
<nav>
<ul>
<li class="current">Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li>Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</nav>
</div>
Just change your selector from:
#toggle:checked+.menu {
display: block;
}
to:
#toggle:checked+ ul {
display: block;
}
See snippets below:
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label,
#hamburger {
display: none;
}
.menu ul {
font-family: Monserrat, sans-serif;
font-size: 18px;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 10px;
width: 11.11%;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu li:visited {
background: #0000EE;
color: #fff;
}
.menu li:active,
.active {
background: #0000EE;
color: #fff;
}
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 20px 0 0;
font-size: 20px;
line-height: 44px;
display: none;
}
#toggle {
display: none;
}
/* Show Hamburger */
#media screen and (max-width: 768px) {
.nav {
background-color: #3333FF;
width: 100%;
}
.menu label {
display: inline-block;
color: #fff;
background-color: #3333FF;
padding-bottom: 8px;
}
.menu ul {
display: none;
}
.menu ul li {
display: block;
border-top: 1px solid #333;
}
.menu ul li:active {
display: block;
}
.menu label {
cursor: pointer;
margin: 0 20px 0 0;
font-size: 20px;
font-weight: bold;
line-height: 44px;
display: block;
}
#toggle:checked+ul {
display: block;
}
<div class="nav">
<div class="menu">
<label for="toggle">☰</label><input type="checkbox" id="toggle">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts</li>
<li>Policies</li>
<li class="active">Members</li>
<li>Volunteer</li>
<li>Links</li>
</ul>
</div>
</div>
I created a dropdown menu and I am trying to get rid of the little space that I am getting at the beginning of the dropdown, between the parent component and its children, as shown in the screenshot below:
I want the drop down to begin from where the tab starts, something like this:
--------
| Parent
-----------
| Child
------------
Please, find a code snippet attached below:
ul {
list-style-type: none;
margin: 0;
padding-left: 25px;
padding-right: 10px;
position: absolute;
}
li {
display: inline-block;
float: left;
margin-right: 1px;
}
li a {
display: block;
min-width: 138.7px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
li:hover a {
background: green;
}
li:hover ul a {
background: grey;
color: #2f3036;
height: 40px;
line-height: 40px;
text-align: center;
}
li:hover ul a:hover {
background: green;
color: #fff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
}
ul li a:hover+.hidden,
.hidden:hover {
display: block;
width: auto;
}
#menu {
text-align: center;
}
<ul class="menu">
<li>Somthing</li>
<li> something
<ul class="hidden">
<li>somethoing</li>
<li>something</li>
</ul>
</li>
</ul>
Thanks in advance.
Set the padding to 0 on your hidden class. .hidden{padding: 0;} and also remove the li ul li a{width:auto; min-width:100px;} JSFiddle I changed your media query so it can be viewed in here.
ul {
list-style-type:none;
margin:0;
padding-left: 25px;
padding-right: 10px;
position: absolute;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
li a {
display:block;
min-width:138.7px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
li:hover a {
background:green ;
}
li:hover ul a {
background: grey;
color: #2f3036;
height: 40px;
line-height: 40px;
text-align:center;
}
li:hover ul a:hover {
background: green;
color: #fff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
.hidden{
padding: 0;
}
ul li a:hover + .hidden, .hidden:hover {
display:block;
width: auto;
}
#menu{
text-align:center;
}
#media screen and (max-width : 460px){
ul {
position: static;
display: none;
}
li {
margin-bottom: 1px;
}
ul li, li a {
width: 100%;
}
.show-menu {
display:block;
}
}
<ul class="menu">
<li>Something</li>
<li> something
<ul class="hidden">
<li>something</li>
<li>something</li>
</ul>
</li>
</ul>
li{position: relative;}
ul li ul{padding: 0; width: 100%;}
this might be a bit complicated but I really need some help here..
I made a HTML menu and a css file for it. This was for a desktop version of my website.
I was in need of a mobile menu and due to my low skills of html and css, I asked a friend to make a mobile css file for the menu.
He ended up changing a little bit of code of the original HTML menu, this means that the mobile version is working, but I have to update my original css file for desktop a bit.
That's where the problem is, I just can't get it done, I can't find the right tag to update the file.
Original Desktop HTML menu and css file
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" class="show-menu" role="button">
<div id="Logo"><img src="Images/logo.png" alt="logo"></div>
<nav id="primary_nav_wrap">
<ul id="menu" class="menu">
<ul>
<li class="current-menu-item">home</li>
<li>informatie
<ul id="navinformatie">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul id="navverblijf">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul id="navbezienswaardigheden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</ul>
</nav>
</header>
The new HTML menu and mobile css file for it
body {
margin: 0;
}
main {
margin: 0 auto;
width: 480px;
}
/*menu*/
ul{
list-style-type:none;
margin:0;
padding:0;
position: static;
display: none;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
border-bottom:1px solid #CCC;
}
li a {
display:block;
min-width:180px;
height: 50px;
text-align: center;
line-height: 50px;
color: black;
background: white;
text-decoration: none;
}
li:hover a {
border-bottom: 1px solid black;
}
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
border-bottom: 1px solid black;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
text-align:center;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
#Logo {
display: none;
}
.show-menu {
text-decoration: none;
color: white;
background: black;
text-align: center;
padding: 10px;
display: block;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
ul li, li a {
width: 100%;
text-align:left;
}
ul li a{
padding:0 10px;
}
li ul li a {
text-align:center;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">
<div id="Logo"><img src="logo.png" alt="logo"></div>
<ul id="menu" class="mobile-top">
<li class="current-menu-item">home</li>
<li>informatie
<ul class="hidden">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul class="hidden">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul class="hidden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</header>
<div style="clear:both;"></div>
So what I need now is some help to adjust the desktop css file to the new html menu, I can't figure it out where to start and what I should change.
You might want to use media queries to apply a different set of CSS for mobile and desktop. You could wrap your original css like this, to only apply the desktop CSS when the width is bigger than 600px.
#media (min-width: 600px) {
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
}
im fairly new to ASP.net and CSS i would like to style my link button like my other <a href> buttons in css but they are not working.
this is my code for menu
<div id="templatemo_menu">
<ul>
<li><span>Reconciliation</span>
<ul>
<li>
<asp:LinkButton ID="MyLink" runat="server" OnClick="MyLink_Click" Text="Double Entry Per Total Expired"></asp:LinkButton>
</li>
</ul>
</li>
<li><span>Reports</span>
<ul>
<li><span>Report Generation</span></li>
<li><span>Upload Prenda</span></li>
<li><span>Navision Uploader</span></li>
</ul>
</li>
<li><span>Maintenance</span>
<ul>
<li><span>Report Matrix</span></li>
<li><span>Branches</span></li>
<li><span>Audit Trail</span></li>
</ul>
</li>
</ul>
</div>
and this is my CSS for the Menu
/* menu */
#templatemo_menu
{
clear: both;
width: 100%;
height: 30px; /*padding: 0 10px;*/ /*margin-bottom: 20px;*/ /*margin-left:13px;*/
background: url(../Images/bgContent.jpg) center no-repeat;
}
#templatemo_menu ul
{
/*float: left;*/
margin: 0 auto;
text-align: center;
width: 100%;
display: inline-block;
height: 70px;
margin: 0;
padding: 1px 0;
list-style: none;
}
#templatemo_menu ul li
{
padding: 0 0 0 0;
margin: 0;
display: inline-block;
}
#templatemo_menu ul li a
{
float: left;
display: block;
height: 22px;
width: 440px;
padding: 5px 0 0 0;
font-size: 11px;
color: #666;
text-align: center;
text-decoration: none;
font-weight: normal;
outline: none;
border: none;
background: url(../Images/templatemo_menu_divider.gif) repeat-y right;
}
#templatemo_menu ul li a span
{
display: block;
font-size: 17px;
font-weight: normal;
color: #ffffff;
}
#templatemo_menu ul li .last
{
background: none;
}
#templatemo_menu ul li a:hover, #templatemo_menu ul .current
{
color: #a13c03;
}
#templatemo_menu ul li a:hover span, #templatemo_menu ul .current span
{
color: #a13c03;
}
#templatemo_menu ul li a span:hover
{
color: #a13c03;
}
#templatemo_menu ul li:hover
{
background: #0298D7;
}
#templatemo_menu li:hover ul
{
display: block;
background: #0A5185;
height: auto;
width: 440px;
margin-top: 25px;
z-index: 2;
}
#templatemo_menu li ul
{
display: none;
position: absolute;
}
#templatemo_menu li ul li
{
clear: both;
border-style: none;
}
#templatemo_menu li ul li:hover
{
background-color: #0298D7;
}
i tried a.MyLink:link{do css here} nut it is not working.. any help?? :(
Change your link button to this
<asp:LinkButton ID="MyLink" runat="server"><span>Double Entry Per Total Expired</span></asp:LinkButton>
Your style is targeting the span > anchor, so you'll need to add that span around the text like you did for the other anchor tags
Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.
also how can i adjust the width so that it is shiffted more to the left.
also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.
thanks in advance you all.
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>
JSFiddle: http://jsfiddle.net/LWEry/
Like this:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
.sub-menu
{
position: absolute;
top: 0;
left: 100%;
}
http://jsfiddle.net/3xWcu/2/
I changed one selector.
FROM
li:hover ul
TO
li:hover > ul
Edited my fiddle above. Added a sub-menu class to the ul containing the Profile and Board li tags:
<ul class="sub-menu">
<li>Profile</li>
<li>Board</li>
</ul>
and added some CSS above.
You mean like this? http://jsfiddle.net/3xWcu/
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>