I am working on getting my CSS Menu setup, I have followed some tutorials but got myself stuck after hiding some secondary menu items. I just want the items to show up right below their parents. (Not to the side like most tutorials I've seen)
My code is here
http://codepen.io/anon/pen/pJMdqv
HTML
<nav>
<ul>
<li>Home</li>
<li>Lessons</li>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
<li>Dictionary</li>
<ul>
<li>Phrases</li>
<li>Onomatopoeia</li>
</ul>
<li>Sentences</li>
<ul>
<li>Beginner</li>
<li>Intermediate</li>
<li>Advanced</li>
</ul>
</ul>
</nav>
CSS
nav {
width: 180px;
margin-top: 15px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
position: relative;
}
nav a {
color: 101010;
padding: 12px 0px;
display: block;
text-decoration: none;
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
nav a:hover {
background: #ececec;
}
nav ul ul {
display: none;
}
nav ul li:hover ul {
display: block;
}
Your nesting is off. Instead of:
<li>Lessons</li>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
You need to include your submenu ul within the parent li that gets hovered over:
<li>
Lessons
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
</li>
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 found a lot of posts about centering submenu <ul> absolute positioned, but none of them solved the problem of center the submenu that have dynamic width determined by the text length of the <li> children...
Most of those posts offer a solution based on the use of negative margin-left,
and this means that it can work only for a specific width, but not for dynamic width!
So I have prepared a quick FIDDLE HERE with a very basic menu,
please can you help me to figure out how is possible to automatically center submenus?
nav {
background-color: red;
}
ul {
background-color: rgb(88, 164, 228);
padding: 0;
margin: 0;
list-style-type: none;
}
li {
display: inline-block;
margin: 0 20px;
}
ul ul {
background: rgb(119, 193, 255);
position: absolute;
outline: 1px solid black;
}
ul ul li {
margin: 0;
display: block;
}
<nav>
<ul>
<li>Menu</li>
<li>Menu
<ul>
<li>aa aa aa aa</li>
<li>bb bb</li>
</ul>
</li>
<li>Menu
<ul>
<li>cc cc cc</li>
<li>dd dd dd dd dd</li>
<li>ee ee ee</li>
</ul>
</li>
<li>Menu
<ul>
<li>ff ff</li>
<li>gg gg</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
I am trying to create a drop down menu using CSS and HTML, it is working fine but the problem is the sub menu items does not show the full texts. For example: If I hover on the link-1 the sub menu items shows up but I can only see first few of the texts from the sub menu items.
I want to increase the width of ul of the submenu items and see the full texts.
Would you please kindly show me how to do it?
Here's my COde:
HTML:
<div id="menu">
<ul>
<li>Link 1
<ul>
<li>ABC INFORMATION SYSTEM</li>
<li>ABC INFORMATION SYSTEM</li>
<li>ABC INFORMATION SYSTEM</li>
</ul>
</li>
<li>Link 2
<ul>
<li>Link 2-1</li>
<li>Link 2-2</li>
<li>Link 2-3</li>
</ul>
</li>
<li>Link 3
<ul>
<li>Link 3-1</li>
<li>Link 3-2</li>
<li>Link 3-3</li>
</ul>
</li>
</ul>
</div>
CSS
#menu{
text-align:left;
top:90px;
margin-left:230px;
position:absolute;
z-index:100;
}
#menu ul{
padding:0;
margin:0;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#menu li a{
width:135px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: #A7C66B;
color: white;
}
#menu li a:hover{
background-color: red;
}
#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
}
#menu ul li:hover ul{
visibility:visible;
}
to increase the size of the submenus add the following to your css:
#menu ul ul li a{
width:335px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: #A7C66B;
color: white;
}
In #menu li a make the width higher or put no width at all.
If you put no width at all, then it adjusts itself to the width of the text.
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
This may be an easy one. I looked through previous questions (and other places on the web) but cannot find a good solution for my current problem.
I am trying to have a centered drop down menu with CSS based on a list. Nothing very complicated.
This one has a very simple solution for it, but I cannot find what I am doing wrong.
I have two problems at this point (it's mostly in the first list, have not really looked at the links in the list yet) :
(1) I would like the list coming down to have a background as a large rectangle that encompass all the items in the sub-list
(2) the items in the sub-list are "truncated", a new line is inserted so that the width does not exceed the width of the list title.
Thanks.
The CSS part
#navbar ul {
text-align: center;
width: 100%;
font-variant: small-caps;
padding: 5px 0;
margin-top: 0;
margin-left: 0;
}
#navbar ul li {
background-color: #ccc;
margin-right: 2%;
color: #069;
text-decoration: none;
position: relative;
display: inline;
padding: 5px 4px;
}
#navbar li a {
text-decoration: none; }
#navbar li ul {
display: none;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
text-align: left;
margin: 8px 0 0 0;
padding: 0;
background-color: #eee; }
#navbar li:hover li, #navbar li.hover li {
padding: 4px 0;
clear: left;
}
#navbar li:hover li a, #navbar li.hover li a {
background-color: #eee;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #333; }
The HTML part
<div id="navbar">
<ul>
<li>
Link 1
<ul>
<li>item 1.1 and more</li>
<li>item 1.2</li>
<li>item 1.3</li>
<li>item 1.4 truncated?</li>
<li>item 1.5</li>
<li>item 1.6</li>
</ul>
</li>
<li>
Link 2
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
<li>Link 2.4</li>
<li>Link 2.5</li>
<li>Link 2.6</li>
</ul>
</li>
<li>
Link 3
<ul>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3</li>
<li>Link 3.4</li>
<li>Link 3.5</li>
<li>Link 3.6</li>
</ul>
</li>
</ul>
</div>
1) It looks like you already have a background rectangle. Do you just want more padding?
If so, add padding like so:
#navbar li:hover ul, #navbar li.hover ul {padding:10px}
2) As for truncating, try
#navbar li:hover ul, #navbar li.hover ul {word-wrap: break-word;}
I would however suggest you look take a look at this article, to help you with drop down menus: http://matthewjamestaylor.com/blog/centered-dropdown-menus
EDIT: Unfortunately, word-wrap is a CSS3 property, and is not supported by all browsers. Additionally, word wrap with cross browser CSS does not appear to be trivial. This post word wrap in css / js has some more information.