I would like to horizontally center the menu. It could be done by assigning margin-left for #navigation, but the main items can increase and also the screen size.
Tried changing ul#navigation {float:left;} to
ul#navigation {position:absolute;left:0;right:0;margin:0 auto;}, but did not work.
http://jsfiddle.net/RLtkq/
HTML:
<div class="menu">
<center>
<ul id="navigation">
<li class="dropdown">
Dropdown
<ul class="sub_navigation">
<li>Sub Navigation 1</li>
<li>Sub Navigation 2</li>
<li>Sub Navigation 3</li>
</ul>
</li>
<li class="dropdown">Dropdown
<ul class="sub_navigation">
<li>Sub Navigation 1</li>
<li>Sub Navigation 2</li>
<li>Sub Navigation 3</li>
</ul>
</li>
</ul>
</center>
</div>
CSS:
ul {
margin:0;
padding:0;
list-style-type:none;
min-width:200px;
}
ul#navigation {
float:left;
}
ul#navigation li {
float:left;
border:1px black solid;
min-width:200px;
}
ul.sub_navigation {
position:absolute;
display:none;
}
ul.sub_navigation li {
clear:both;
}
a,a:active,a:visited {
display:block;
padding:10px;
}
See the updated the fiddle here.
Changes are here
ul#navigation {
float:left;
width: 100%;
}
ul#navigation li {
border:1px black solid;
min-width:200px;
display: inline-block; /* replaced float:left; */
}
Changing the display of the #navigation's lis to inline-block seems to solve the issue:
JSFiddle
You get a gap on the right-hand-side, though. This can be eliminated with negative margins.
Related
I've searched around and found a lot of questions about this problem, but none of the answers I tried seemed to work in my case. So I have a unordered list inside of the nav tag and I want the list to be centered relative to the parent nav tag. But the list is always a bit to the right and never in the center no matter what I tried.
HTML pretty straight forward:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
Here is the CSS so far:
nav {
float: left;
width:15%;
margin: 0;
padding:0;
background:gray;
text-align:center;
}
nav ul {
list-style-type: none;
color:blue;
}
Any ideas how can I get this to work?
try this
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
this is because ul have a padding and margin applied to it by browsers by default you need to remove them
nav {
float: left;
width: 50%;
margin: 0;
padding: 0;
background: gray;
text-align: center;
}
nav ul {
list-style-type: none;
color: blue;
margin: 0;
padding: 0;
}
<nav>
<ul>
<li>MENU</li>
<li>Opt 1
</li>
<li>Opt 2
</li>
<li>Opt 3
</li>
</ul>
</nav>
Test this:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
nav {
display:table;
margin:0 auto;
padding : 10px;
}
I have created a vertical navigational menu in css with two sub-menus.
But I can't figure out how to position them in one column so that they work properly.
Is this possible?
html
<ul>
<li>works
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>photos
<ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>friends</li>
<li>contact</li>
</ul>
</div></html>
css
#menu {
font-size: 14px;
font-family: "Courier New", Courier, monospace;
}
#menu ul {
margin: 0px;
list-style-type: none;
}
#menu ul li {
position: relative;
}
#menu ul li a {
line-height: normal;
color: #000;
text-decoration: none;
}
#menu ul li ul {
display: none;
position: absolute;
top: 0px;
left: 180px;
float: left;
z-index: 99999;
width: 180px;
}
#menu ul li ul li {
min-width: 180px;
}
#menu ul li ul ul {
float: left;
top: 0px;
}
#menu ul li:hover > ul { display:block;
}
First of all your html structure is messy. the clean structure could be something like this:
<div id="menu">
<ul>
<li>
works
<li>
works subcategory
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</li>
<li>something</li>
<li>something</li>
<li>
photos
<ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>friends</li>
<li>contact</li>
</ul>
</div>
You had mistakes in closing tags,..
And i suggest you to use css resets while making dropdown menus. because user-agent predefined styles get you in trouble (try Normalize.css)
In CSS: you don't need to float the 2nd-level ul blocks and also setting list items position property to relative and using top and left properties for children ul is not a good solution.
I styled your menu a little bit and it looks fine. you can view it here: http://codepen.io/anon/pen/sdomr
In my HTML doc I have a nested list with style:
li {
list-style-type:none;
border:1px solid;
margin:3px;
}
li li {
list-style:none;
}
<ul>
<li>something
<ul>
<li>hello</li>
<li>there</li>
</ul>
</li>
</ul>
With my current CSS rule borders looks like this:
I want them to look like this, but without inserting <span> tags:
Any ideas?
Maybe something like that:
li {
clear: both;
width: 200px;
list-style-type:none;
border:1px solid;
margin:3px;
}
li ul{
float: left;
}
<ul>
<li>something
<ul>
<li>hello</li>
<li>there</li>
</ul>
</li>
<li>something
<ul>
<li>hello</li>
<li>there</li>
</ul>
</li>
</ul>
The result:
I am trying to build a CSS menu with dropdowns,something like:
MENU1 MENU2 MENU3
Item1 Item1 Item1
Item2 Item2 Item2
Item3 Item3
Item4
The Menus bar is a UL with further li and sub ULs for menu dropdowns. I have wrote the CSS and the dropdown occurs on Menu hover but as soon as I try to go through the dropdown list the menu disappears. Obviously because I have set the css hover property on Menu hover. I am trying to use only CSS. Can you direct me what should I do to keep the menu dropdown visible while I go through the dropdown items?
Here is my css:
#menuNav{width:100%; position:relative; height:28px; list-style:none;}
#menuNav li{float:left; position:relative;} //MENU1, MENU2, MENU3
#menuNav li ul{position:absolute; visibility:hidden; width:100px;} //Each Dropdown is a UL
#menuNav a{display:block;}
#menuNav li:hover ul, #menuNav a:hover ul{visibility:visible;} //Show dropdown on MENU hover
CSSPlay has a variety of menu examples.
You might find something you can use as a template.
CSS
<style>
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#3A4956;
}
#navMenu ul li a{
text-align:center;
color:black;
text-decoration:none;
font-family:"Comic Sans MS";
height:30px;
width:150px;
display:block;
border-bottom:1px black solid;
}
#navMenu ul li a:hover{
color:white;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
}
#navMenu ul li:hover ul{
visibility:visible
}
#wrapper1{
border-radius:8px 0 0 0;
border-right:1px black solid
}
#wrapper4{
border-radius:0 8px 0 0;
}
</style>
HTML
<div id="wrapper">
<div id="navMenu">
<ul style="height: 30px; width: 308px">
<li id="wrapper1" style="left: 0px; top: 0px; width: 150px; height: 31px"><a style="color:black" href="#">Products</a>
<ul>
<li id="wrapper3">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</li>
<li id="wrapper4"><a style="color:black" href="#">Products</a>
<ul>
<li id="wrapper3">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</li>
</ul>
</div>
</div>
Good afternoon,
My current task is to create several stylesheets for a website. One of the websites styles requires me to create a drop-down menu, I however am not allowed to change the HTML code at all, so basically I'm asked to create a drop-down like menu with CSS only.
Here is the HTML code I have to display in form of a drop-down menu:
<div id="global-nav">
<ul>
<li>Products
<ul>
<li>Widgets</li>
<li>Sites</li>
<li>Gadgets</li>
</ul>
</li>
</ul>
There however are different requirements as well:
There shouldn't be any dots or circles preceding each list item.
I'm wondering whether it is possible to accomplish this task with CSS only or not.
Is there any way I can do this with CSS?
Vertical menu with horizontal expansion
jsBin demo
*{padding:0;margin:0;}
body{font:16px/1 sans-serif}
/*VERTICAL MENU*/
nav.vertical{
position:relative;
width:200px;
}
/* ALL UL */
nav.vertical ul{
list-style: none;
}
/* ALL LI */
nav.vertical li{
position:relative;
}
/* ALL A */
nav.vertical a{
display:block;
color:#eee;
text-decoration:none;
padding:10px 15px;
background:#667;
transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
background:#778;
}
/* INNER UL HIDE */
nav.vertical ul ul{
position:absolute;
left:0%;
top:0;
width:100%;
visibility:hidden;
opacity:0;
transition: transform 0.2s;
transform: translateX(50px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
left:100%;
visibility:visible;
opacity:1;
transform: translateX(0px);
}
<nav class="vertical">
<ul>
<li>Home</li>
<li>Products +
<ul>
<li>Widgets</li>
<li>
Sites +
<ul>
<li>Site 1</li>
<li>Site 2</li>
</ul>
</li>
<li>
Gadgets +
<ul>
<li>Gadget 1</li>
<li>Gadget 2</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
Vertical menu (mobile only)
this one might best suit for mobile (smaller screens CSS) otherwise the show/hide would troll with User Experience
jsBin demo
*{padding:0;margin:0;}
body{font:16px/1 sans-serif}
/*VERTICAL MENU*/
nav.vertical{
position:relative;
background:#667;
}
/* ALL UL */
nav.vertical ul{
list-style: none;
}
/* ALL LI */
nav.vertical li{
position:relative;
}
/* ALL A */
nav.vertical a{
display:block;
color:#eee;
text-decoration:none;
padding:10px 15px;
transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
background:#778;
}
/* INNER UL HIDE */
nav.vertical ul ul{
background:rgba(0,0,0,0.1);
padding-left:20px;
transition: max-height 0.2s ease-out;
max-height:0;
overflow:hidden;
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
max-height:500px;
transition: max-height 0.25s ease-in;
}
<nav class="vertical">
<ul>
<li>Home</li>
<li>Services +
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Products +
<ul>
<li>Widgets</li>
<li>
Sites +
<ul>
<li>Site 1</li>
<li>Site 2</li>
</ul>
</li>
<li>Gadgets +
<ul>
<li>Gadget 1</li>
<li>Gadget 2</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
Just a slightly enhanced version of the great solution above.
<style type="text/css">
#global-nav {
width: 121px;
float: left;
background: #e8eef4;
}
#global-subnav {
width: 121px;
background: #09C;
}
#global-nav a {
color: #034af3;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
text-indent: 10px;
text-decoration:none;
font-weight: bold;
width: 100%;
}
#global-nav ul{
background: yellow;
padding: 0;
margin: 0;
}
#global-subnav ul{
background: orangered;
position: relative;
top: -10px;
left: 40px;
}
#global-nav li{
list-style: none;
border-bottom: #5C87B2 solid;
border-width: 3px;
}
#global-nav ul ul li{
display:none;
}
#global-nav li:hover {
background: #fff;
}
#global-nav li:hover ul li{
display:block;
}
</style>
<div id="global-nav">
<ul>
<li>One
<div id="global-subnav">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</li>
<li>Two
<div id="global-subnav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</li>
</ul>
</div>
The code is wrong on the last post.
You can't have more than 1 ID with the same name in a document, so if you use the code above, you'll need to change
ID="global-subnav" to class="global-subnav"
and then change the CSS from
#global-subnav to .global-subnav