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.
Related
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>
I've looked at all of the questions already posed on this subject, but can't find anything wrong with my coding. I need another person's eye to find what's wrong. There must be something I am just not seeing, as I've successfully made drop down menus before...
Here is my html5 coding for my menu:
<nav id="menu">
<ul>
<li>Home</li>
<li>Biography</li>
<li>Artwork</li>
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
<li>Exhibitions</li>
<li>Commissions</li>
</ul>
</nav>
And here is my CSS styling that is attempting to make a drop down menu:
/**** Main Menu ****/
#menu {
background-image: url(../images/paintbanner.png);
height: 55px;
width: 793px;
margin-left:125px;
margin-top: -25px;
}
#menu ul a {
color: #f7f5f1;
}
#menu ul a:hover {
color: #635ccb;
}
#menu ul {
margin-left: 75px;
}
#menu ul li {
float: left;
margin-right: 60px;
font-family: "Bell MT",
serif;
font-size: 1.1em;
margin-top: 20px;
}
#menu ul ul {
display: none;
position: absolute;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul li {
float: none;
margin-top: 0;
margin-right: 0;
position: relative;
background-image: url(../images/dropdown.png);
height: 100%;
width: 120px;
}
#menu ul ul a {
color: #1e1b1b;
font-size: .9em;
}
You closed a <li> before I think you meant to. Look here:
<li>Artwork</li>
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
Should probably be:
<li>
Artwork
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
</li>
This happens because the li:hover should enable <ul> with display:block's out of <li>
Try this:
<nav id="menu">
<ul>
<li>Home</li>
<li>Biography</li>
<li>Artwork
<ul>
<li>Paintings</li>
<li>Drawings</li>
<li>Sculpture</li>
<li>View All</li>
</ul>
</li>
<li>Exhibitions</li>
<li>Commissions</li>
</ul>
</nav>
example: http://jsfiddle.net/9zfsr/
I am making a horizontal menu and sub menu (level 2) inside a wrapper. Please imagine this menu is on the top right of the page / wrapper. The problem is, since the sub menu is also horizontal it can (will) be too wide and will overflow outside the wrapper.
Here it is:
http://jsfiddle.net/5DWer/
There is "menu-wrapper" there, but it is not the wrapper I was referring above.
The wrapper is right after "Tab 3" so "Tab 3 sub 2" is outside the wrapper.
I think the solution is to have the second level menu to start at the same point below the first level so it will never flow outside the wrapper (assuming the first level is wide enough). In the fiddle link: "tab 3 sub 1" starts right below "tab 1". I can't just use margin-left or left because I don't know under which tab the sub menu will start.
Is this possible or is there other solution? If possible in pure CSS, but I'll take Javascript if it isn't.
Thanks in advance :)
Thanks for the explanation. Sorry, here is the code:
<div class="menu-wrapper">
<ul class="menu">
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
<ul>
<li>tab 3 sub 1</li>
<li>tab 3 sub 2</li>
</ul>
</ul>
</div>
and the CSS
.menu-wrapper {
width: 100%;
}
.menu {
max-width: 450px;
float: right;
}
.menu li a,
.menu li {
display: inline-block;
text-decoration: none;
}
.menu li:hover > ul {
display: block;
}
.menu li ul {
display: none;
width: 404px;
position: absolute;
}
.menu li li{
width: 200px;
margin: 0;
}
.menu li ul ul {
top: 100%;
left: 50%;
width: 200px;
}
.menu ul li:hover > ul {
border-left: 0;
display: block;
}
.menu li ul li a {
display: block;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
here is the solution to your problem: (I added a 3rd subtab to show it works)
http://jsfiddle.net/5DWer/3/
However, like I mentioned in the fiddle as comment:
You have to manually specify the width of the second-level ul.
Also, you have to nest your second level properly, like this:
<div class="menu-wrapper">
<ul class="menu">
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3
<ul>
<li>tab 3 sub 1</li>
<li>tab 3 sub 2</li>
</ul>
</li>
</ul>
</div>
and not outside the li.
For reference (jsfiddle code):
HTML:
<div class="menu-wrapper">
<ul class="menu">
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3
<ul>
<li>tab 3 sub 1</li>
<li>tab 3 sub 2</li>
<li>tab 3 sub 3</li>
</ul>
</li>
</ul>
</div>
And CSS:
.menu-wrapper {
width: 100%;
}
.menu {
max-width: 450px;
float: right;
}
.menu li {
display: inline-block;
text-decoration: none;
font-family: Arial, sans-serif;
background-color: yellow;
width: 50px;
height: 20px;
text-align: center;
}
.menu li ul {
display: none;
width: 500px; /* caveat : you have to specify the width manually */
margin-top: 10px;
}
.menu li:hover ul {
display: block;
float: right;
}
.menu li ul li {
float: right;
background-color: orange;
height: 100%;
}
.menu li ul li a {
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
Looking at your code, it seems to be operating as expected. It seems to me, from what I can see (given the float:right for example) that this is more of a ui/design problem than a code problem. If not, maybe you can provide further details on your actual design so I can provide a css solution.
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.