I have this CSS dropdown menu. I want the homepage to start on the left side of the page, not on the center. Herein is the style sheet and the div tags for the dropdown navigation bar:
ul, li, html, a
{
margin:0; padding: 0;
}
body
{
text-align: center;
margin: 0 auto;
padding: 0;
font: 65% arial, sans-serif;
}
li
{
list-style-type: none;
}
a
{
text-decoration: none;
color: #034af3;
}
ul#nav
{
width: 22.5em;
height:2.5em;
margin: 2em auto 0;
font-size: 1.5em;
}
ul#nav li
{
position: relative;
float: left;
width: 5em;
height: 2em;
line-height: 2em;
background-color: #465c71;
display: block;
padding: 4px 0px;
border-right: 1px #4e667d solid;
color: #dde4ec;
}
ul#nav li.noBorder
{
border-right: none;
}
ul#nav li:hover
{
background-color: silver;
}
ul#nav li a
{
display: block;
float: left;
width: 100%;
}
ul#nav li ul
{
display: none;
}
ul#nav li:hover ul
{
display: inline;
float: left;
width: 10em;
height: auto;
margin: 0; padding: 0.27em;
font-size: 1em;
text-align: left;
}
ul#nav li:hover ul li
{
width: 100%;
height: 2em;
background-color: Yellow;
border: none;
border-bottom: 1px solid silver;
overflow: hidden;
}
ul#nav li:hover ul li a
{
display: block;
margin: 0; padding: 0 0 0 .3em;
height: 100%;
line-height:2em;
color: #465c71;
}
ul#nav li:hover ul li a:hover
{
background-color: white;
}
<div style="background:#3a4f63;">
<ul id="nav">
<li>Home</li>
<li>Abour
<ul>
<li>About 1</li>
<li>About 2</li>
<li>About 3</li>
<li class="noBorder">About 4</li>
</ul>
</li>
<li>Blog
<ul>
<li>About 1</li>
<li>About 2</li>
<li>About 3</li>
<li class="noBorder">About 4</li>
</ul>
</li>
<li class="noBorder">Contact</li>
</ul>
</div>
Try:
body { text-align: left; }
ul#nav { margin: 2em 0 0; }
Related
I need to display sub-sub-menu on hover of my sub-menu. So far I did code to display menu -> sub-menu on menu click, but to proceed I want a functionality to display sub-sub-menu on hover of my sub-menu. Can somebody help me to achieve the same?
var ddmenuitem = 0;
function jsddm_open() {
jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
// $(this).find('div.subsubmenu').css('display','none');
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function() {
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav > ul > li > a').click(function(ev) {
if ($(this).hasClass('current')) {
ev.preventDefault();
}
if ($(this).attr('class') != 'active') {
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
});
#topnav {
float: left;
width: 600px;
height: 30px;
background: black;
margin-top: 10px;
position: relative;
font-size: 15px;
margin-left: 30px
}
#topnav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#topnav ul li {
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a {
padding: 5px 15px;
color: red;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link {
color: red;
text-decoration: none;
}
#topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover {
color: red;
text-decoration: none;
}
#topnav ul li a.active {
text-decoration: none;
color: black;
background: #e0e0e0;
}
#topnav ul li ul.submenu {
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 30px;
display: none;
background: #e0e0e0;
color: #00537F;
width: 600px;
height: 30px;
}
#topnav ul li ul.submenu a {
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul.submenu a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topnav">
<ul>sds
<li>
Admin
</li>
<li>
MAC
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</li>
<li>
Admin Data
</li>
</ul>
</li>
</ul>
</div>
Try the following snippet without using jquery or javascript, you can get it done using only css. And have updated according to your question
#nav {
list-style: none inside;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: block;
position: relative;
float: left;
background: #000000;
}
#nav li a {
display: block;
padding: 0;
text-decoration: none;
width: 200px;
line-height: 35px;
color: #fff;
}
#nav li li a {
font-size: 80%;
}
#nav li:hover {
background: #ff0000;
}
#nav ul {
position: absolute;
padding: 0;
left: 0;
display: none;
}
#nav li:hover ul ul {
display: none;
}
#nav li:hover ul {
display: block;
}
#nav li li:hover ul {
display: block;
margin-left: 200px;
margin-top: -35px;
}
<div id="topnav">
<ul id="nav">
<li>
Admin
</li>
<li>
MAC
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data ⇒
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</li>
<li>
Admin Data
</li>
</ul>
</li>
</ul>
</div>
you can try this
#menu {
background: #343434;
color: #eee;
height: 35px;
border-bottom: 4px solid #eeeded
}
#menu ul,
#menu li {
margin: 0 0;
padding: 0 0;
list-style: none
}
#menu ul {
height: 35px
}
#menu li {
float: left;
display: inline;
position: relative;
font: bold 12px Arial;
text-shadow: 0 -1px 0 #000;
border-right: 1px solid #444;
border-left: 1px solid #111;
text-transform: uppercase
}
#menu li:first-child {
border-left: none
}
#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #eee;
}
#menu li:hover > a,
#menu li a:hover {
background: #111
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer
}
#menu label {
font: bold 30px Arial;
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center
}
#menu label span {
font-size: 12px;
position: absolute;
left: 35px
}
#menu ul.menus {
height: auto;
width: 180px;
background: #111;
position: absolute;
z-index: 99;
display: none;
border: 0;
}
#menu ul.menus li {
display: block;
width: 100%;
font: 12px Arial;
text-transform: none;
}
#menu li:hover ul.menus {
display: block
}
#menu a.home {
background: #c00;
}
#menu a.prett {
padding: 0 27px 0 14px
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px
}
#menu ul.menus a:hover {
background: #333;
}
#menu ul.menus .submenu {
display: none;
position: absolute;
left: 180px;
background: #111;
top: 0;
width: 180px;
}
#menu ul.menus .submenu li {
background: #111;
}
#menu ul.menus .has-submenu:hover .submenu {
display: block;
}
<nav>
<ul id='menu'>
<li><a class='home' href='/'>Home</a></li>
<li><a class='prett' href='#' title='Menu'>Menu</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' href='Dropdown 1' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
<ul class='submenu'>
<li>Sub Menu</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
<li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
</ul>
</li>
</ul>
</nav>
I'm trying to create a navbar that has my page links centered in the middle with a logo aligned to the left side and another link aligned to the right side. With my current setup, what would I have to do to create that?
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
background: #666 url(nav-bg.png) repeat-x 0 0;
}
#trans-nav li:hover {
background-position: 0 -40px;
}
#trans-nav li a {
display: block;
padding: 0 15px;
color: #fff;
text-decoration: none;
}
#trans-nav li a:hover {
color: #0F0
}
#trans-nav li ul {
opacity: 0;
position: absolute;
left: 0;
width: 8em;
background: #63867f;
list-style-type: none;
padding: 0;
margin: 0;
}
#trans-nav li:hover ul {
opacity: 1;
}
#trans-nav li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}
#trans-nav li:hover ul li {
height: 30px;
line-height: 30px;
}
#trans-nav li ul li a {
background: #666
}
#trans-nav li ul li a:hover {
background: #666
}
#trans-nav {
background-color: #666;
}
<ul id="trans-nav">
<li>Home
</li>
<li>About
</li>
<li>Products
<ul>
<li>Widgets
</li>
<li>Thingamabobs
</li>
<li>Doohickies
</li>
</ul>
</li>
<li>Contact
</li>
<li>Info
</li>
</ul>
I created a simple example of what you're looking for. Maybe take some pointers from it.
HTML
<header>
<div class="logo">
<span>Logo</span>
</div>
<nav class="nav">
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</nav>
<div class="other">
Link
</div>
</header>
CSS
header {}
a {
color: #FFF;
}
.logo,
.nav,
.other {
float: left;
min-height: 50px;
color: #FFF;
}
.logo {
width: 25%;
background: #333;
}
.logo span {
display: inline-block;
padding: 1em;
}
.nav {
width: 50%;
background: #666;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
display: inline-block;
padding: 1em;
}
.other {
width: 25%;
background: #999;
}
.other a {
display: inline-block;
padding: 1em;
}
#media (max-width: 640px) {
.logo, .nav, .other {
clear: both;
width: 100%;
}
.nav ul li {
display: block;
}
}
JSFiddle example
All nested ULs need to be aligned to the right of their parent LI. Currently the nested ULs seem to be aligning to to the right of a higher level NAV element instead.
Live Code
Link here to fiddle with HTML and problem CSS
HTML
<body>
<div id="header">
<div id="header-content-container"> Logo!
<div id="top-nav-container">
<nav>
<ul>
<li>HOME
</li>
<li>SERVICES
<ul>
<li>Item 00000000
</li>
<li>Item 000000000000000
</li>
<li>Item 000000000000000
</li>
<li>Item 00000000000000
</li>
<li>Item 0000000000000
</li>
<li>Item 000000000000
</li>
<li>Item 000000000
</li>
</ul>
</li>
<li><a herf="#">LIBRARY</a>
</li>
<li>CONTACT
<ul>
<li>Item 0
</li>
<li>Item 00
</li>
<li>Item 000
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="clearer"></div>
</body>
CSS
.clearer {
clear: both;
}
body {
background: none repeat scroll 0 0 red;
font-family:sans-serif;
font-size: 13px;
margin: 0;
padding: 0;
position: relative;
vertical-align: baseline;
}
div#header {
background-color: white;
float: left;
height: 76px;
margin: 0;
padding: 0;
width: 100%;
}
div#header-content-container {
height: 100%;
margin: 0;
width: 768px;
background: black;
}
a#logo {
background: blue;
float: left;
height: 50px;
margin: 12px 0 0 19px;
width: 260px;
}
#top-nav-container {
float: right;
margin: 10px 0 0;
position: relative;
z-index: 9000;
}
nav {
float: right;
margin: 0 9px 0 0;
}
nav ul {
display: inline-table;
list-style: outside none none;
padding: 0;
position: relative;
}
nav ul::after {
clear: both;
content:"";
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: green;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a {
color: #eee;
display: block;
padding: 16px 15px;
text-decoration: none;
}
nav ul li:hover a {
color: orange;
}
nav ul ul {
background: none repeat scroll 0 0 #343434;
border-radius: 0;
left: auto;
padding: 0;
position: absolute;
right: 0;
top: 100%;
display: none;
}
nav ul ul li {
float: none;
border-top: 1px solid purple;
border-bottom: 1px solid blue;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: yellow;
}
nav ul ul li a:hover {
background: cyan;
}
Problem
Check the updated fiddle.
I have modified the nav ul ul class
nav ul ul { background: none repeat scroll 0 0 #343434;
border-radius: 0;
padding: 0;
position: absolute;
left: -48px;
top: 100%;
display: none;
}
I have a vertical Nav menu in html and I'm trying to make a submeu, but it's not going well. When I go to click the submeu it disappears. Any help would be appreciated
nav ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
}
nav,
ul {
margin-top: 4px;
}
nav ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
nav ul li:hover {
background-color: #E88B2E;
}
nav.idk {
color: yellow;
}
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: lightgreen;
}
ul li ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
display: none;
}
ul li ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
a:link {
text-decoration: none;
}
nav ul li:hover ul {
/* When list item is hovered, display UL nested within. */
display: block;
}
nav ul ul {
/* Remove element from document flow */
position: absolute;
/* Position relative to its parent <li> */
left: 210px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
<div class="wrapper">
<div class="navigation">
<nav>
<ul>
<li>About
</li>
<li>News
</li>
<li>The Controversy
<ul>
<li>About the Hounds
</li>
<li>What to Wear
</li>
<li>Who are these People
</li>
</ul>
</li>
<li>Contact
</li>
<li>References
</li>
<li>Webmaster
</li>
<li>Site Map
</li>
<li>FAQ
</li>
</ul>
</nav>
</div>
You have to change left value from 210px to 200 or even better use margin-left to count value relative to parent.
nav ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
}
nav,
ul {
margin-top: 4px;
}
nav ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
nav ul li:hover {
background-color: #E88B2E;
}
nav.idk {
color: yellow;
}
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: lightgreen;
}
ul li ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
display: none;
}
ul li ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
a:link {
text-decoration: none;
}
nav ul li:hover ul {
/* When list item is hovered, display UL nested within. */
display: block;
}
nav ul ul {
/* Remove element from document flow */
position: absolute;
/* Position relative to its parent <li> */
margin-left: 200px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
<div class="wrapper">
<div class="navigation">
<nav>
<ul>
<li>About
</li>
<li>News
</li>
<li>The Controversy
<ul>
<li>About the Hounds
</li>
<li>What to Wear
</li>
<li>Who are these People
</li>
</ul>
</li>
<li>Contact
</li>
<li>References
</li>
<li>Webmaster
</li>
<li>Site Map
</li>
<li>FAQ
</li>
</ul>
</nav>
</div>
I have a dropdown below ive creaeted, but im having troulbe centering the the menu. Ive tried to put <center> tags around it and also set the ul to margin auto 0 but its not working. Is there anything im missing?
<style type="text/css">
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: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Portfolio
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Projects
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Contact
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
I went ahead and put it on jsfiddle Here
I assume that you actually want to center the list items rather than just the menu.
JSfiddle Demo
Revised CSS
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center; /* added this */
font-size:0; /* whitespace adjustment */
}
ul li {
font-size:1rem; /* font-size reset */
display: block;
position: relative;
/* float: left; removed this */
display: inline-block;
}
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: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
Do you want the whole menu centered? If so, it helps to stick that all within something, like a table or div
so I added the following to your code:
css
#navbar {
width: 50%;
margin: 0 auto;
}
html
<div id="navbar">
all your ul/li's
</div>
all together
<style type="text/css">
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: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
#navbar {
width: 50%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menu">
<li>Home</li>
<li>Portfolio
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Projects
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Contact
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
</div>
Here is a JSFiddle that demo's what I think you're after: JSFiddle
Basically, I changed your parent <li> to display: inline-block and removed the float: left property. To center those parent nav items, I applied text-align: center to the parent <ul>. Then I changed the nested dropdowns ul ul to be text-align: left and then set those <li>'s to display: block.
Final CSS (changed some selectors to target differently):
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
text-align: center; /* added this */
}
ul > li {
display: inline-block; /* changed from display: block */
position: relative;
/*float: left;*/
}
ul ul { text-align: left; } /* added this */
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: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul ul li { display: block; } /* added this */
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}