I have a menu. I need to show the submenus when I mouse hover on them. I have some code as follows. But the submenus overlaps with existing menu.
Following is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Drop Down Menus</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: 30px;
}
#menu a {
display: block;
width: 140px;
}
#menu ul {
list-style-type: none;
padding-top: 5px;
}
#menu li {
float: top;
position: relative;
padding: 3px 0;
text-align: center;
}
#menu ul.sub-menu {
display: none;
position: absolute;
top: 20px;
left: -10px;
padding: 10px;
z-index: 90;
}
#menu ul.sub-menu li {
text-align: top;
}
#menu li:hover ul.sub-menu {
display: block;
border: 1px solid #ececec;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Home
<ul class="sub-menu">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
<li>Recent Comments</li>
</ul>
</li>
<li>About
<ul class="sub-menu">
<li>Get to know us</li>
<li>Find out what we do</li>
</ul>
</li>
<li>Contact
<ul class="sub-menu">
<li>E-mail Us</li>
<li>Use Our Contact Form</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I need some effect like this.
How can I make it.
You've set left: -10px on #menu ul.sub-menu, which is why it's overlapping #menu. You should set that to a value that'll move it far enough to the right for your purposes, perhaps left: 140px since that's the width of the menu div.
I think you're looking for something called a "navigation rollover with dropdowns".
This is one of the best implementations that you can find - adapt and use as necessary:
http://jorenrapini.com/blog/web-development/css-navigation-rollovers-with-drop-downs#post-170
And, to see if it's worth what trying, this is the end result:
http://jorenrapini.com/posts/css-rollovers/post2.html
Good luck!
Related
I’m trying to figure out how to reposition the entire <ul> element to the center of the screen, yet every time I try a new method the drop-down items get jumbled up by either shifting slightly to the right or they lay on top of one another.
Can someone lend a hand, let me know what I’m doing wrong and give me some tips to make it a bit easier?
Here’s what I’m working with.
html,
body {
margin: 0px;
padding: 0px;
}
.menu ul {
/*This is blank because nothing I tried works*/
}
ul {
list-style: none;
font-family: cursive;
margin: 0;
padding: 0;
}
ul li {
float: left;
display: block;
height: 50px;
width: 200px;
background-color: lightgray;
}
ul li a {
display: block;
color: black;
text-decoration: none;
line-height: 50px;
text-align: center;
}
ul li a:hover {
background-color: lightblue;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Test</title>
</head>
<body>
<div class="menu">
<ul>
<li>About
<ul>
<li>About</li>
<li>About</li>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About
<ul>
<li>About</li>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About
<ul>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</body>
</html>
ul {
display: flex;
justify-content: center;
}
Add this code to your UL tag, it should center the whole thing
I'm a total newbie to CSS and HTML but I'm slowly constructing a website for uni. One thing that's bugging me: I can't figure out how to align the dropdown options. They're slightly off-centre, as shown in the screenshot
here. I'll paste the actual CSS below too (the preview doesn't work so don't bother with that. The code actually does work when run in Brackets, however):
ul {
list-style: none;
padding: 0px;
margin: 0px;
position: absolute;
padding-left: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border:1px solid #ed85c4;
text-align:center;
}
li ul {
display: none;
}
ul li a {
display: block;
background: #ffeff8;
padding: 4px 20px 2px 25px;
text-decoration: none;
white-space: nowrap;
color: #ed85c4;
font-family: Luna;
font-size: 14px;
}
ul li a:hover {
background: #f1dae8;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #ffeff8;
color: #ed85c4
}
li:hover li a:hover {
background: #f1dae8;
color: #d771ae
}
li:hover li {
color:#d771ae
}
#drop-nav li ul li {
border-top: 0px;
}
ul {
display:table;
margin:auto;}
}
And here's the html (ignore that the links are currently empty):
<!DOCTYPE html>
<html>
<head><meta charset="UF-8">
<title>Happea Organic Restaurant</title>
<link href="style.css" rel ="stylesheet" type ="text/css">
</head>
<body>
<center><img src="images/eskimoo.png" width="600"></center>
<ul id="drop-nav">
<li>home</li>
<li>about
<ul>
<li>history</li>
<li>values</li>
<li>the truck</li>
<li>produce info.</li>
</ul>
</li>
<li>menus
<li>events
<ul>
<li>upcoming</li>
<li>past</li>
<li>booking/hiring</li>
</ul>
</li>
<li>find us
<ul>
<li>truck tracker</li>
<li>offices</li>
</ul>
</li>
<li>contact
<ul>
<li>message us</li>
<li>newsletter</li>
</ul>
</li>
<li>extras
<ul>
<li>gallery</li>
<li>competitions</li>
<li>mascot</li>
</ul>
</li>
</ul>
<br><br>
<c><img src="images/pad.png" width=1000></c>
</body>
<br><br><br>
</html>
Thanks in advance!
I have looked a few questions so far that are very similar to this one, but still can't find the answer to my question. (Please note that I am new to HTML and that this is my first post).
I want to have a navigation bar that spans the width of the page no matter the width of the screen that it is being viewed on. I tried making the 's width 100%, but it still did not do anything.
The code for the navigations bar is here:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</body>
</html>
Can you please help me to find a way to make the navigation bar span the width of the page?
Thanks!
If you want to expand the li to be the same size and fill the width of the ul, flexbox can do that.
Modern Browsers - Flexbox
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
}
li {
flex:1 0 auto;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding:10px 0;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
Alternative Solution: Old Browsers - CSS Tables
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: table;
width: 100%;
table-layout: fixed;
}
li {
display: table-cell;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
You have already given your nav a width of 100%. Now try adding a width to your LI element in your CSS to evenly distribute them across the 100% width of the nav.
li {
float: left;
width:25%;
}
nav is already 100% width,with this css configuration.Give it some background you will be able to see it.
So right how, the navigation bar is spanning the width of the page, however the objects inside aren't large enough to fill the gap. This can be seen if you add a background color to the navigation bar. What you might consider is center-aligning the objects within the nav bar or expanding the width of each object to near 25%
Are you trying to make the nav tag expand from window edge to window edge?
If so you will want to remove the margin on your body:
body {
margin: 0;
}
I was able to make a side menu and it shows the submenu when i hove over the menu items.
Now I am facing two issues
1. When hover to menu-item, it shows the sub-menu but when i am hovering over submenu the hover state of menu-item goes away. I need it to be in hover state.
2. The sub-menu block when shown, it shows as transparent and I can see the contents behind it. But how can i make it completely opaque?
My code is as follows...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Drop Down Menus</title>
<style type="text/css">
<!-- * {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
} -->
a {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
color: black;
}
#menu {
position: relative;
width:20%;
height:400px;
border:1px solid #000;
}
#menu a {
display: block;
width: 140px;
background-image:url(menuitemhover.png);
}
#menu ul {
list-style-type: none;
padding-top: 5px;
}
#menu li {
float: top;
position: relative;
padding: 3px 0;
text-align: center;
}
#menu ul.sub-menu {
display: none;
position: absolute;
top: -10px;
left: 170px;
padding: 10px;
z-index: 90;
}
#menu ul.sub-menu li {
text-align: top;
}
#menu li:hover > ul.sub-menu {
display: block;
border: 1px solid #ececec;
background-image:url(menuitemhover.png);
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Home
<ul class="sub-menu" style="border:1px solid #d14836"}>
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
<li>Recent Comments</li>
</ul>
</li>
<li>About
<ul class="sub-menu" style="border:1px solid #d14836">
<li>Get to know us</li>
<li>Find out what we do</li>
</ul>
</li>
<li>Contact
<ul class="sub-menu" style="border:1px solid #d14836">
<li>E-mail Us</li>
<li>Use Our Contact Form</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
If I've understood right, you need to apply a background color to #menu li:hover > ul.sub-menu and also #menu a. It's easier for me to try to use very obvious colors for testing as in green or red. After the testing is done, just replace the colors which whatever you wish
The sub-menus under the about link are a little shifted from the left even though I gave it position: absolute; left: 0px.
Basically, I want all the menu items (including sub-menus) to be overlapped. Here is the code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.nav{
position:relative;
}
#menu {
position:absolute;
left:0px;
margin: 0;
padding: 0;
}
#menu ul{
position:absolute;
left:0px;
list-style: none;
}
#menu li {
line-height:40px;
font: 100%;
font-family:Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background: #333333;
border-bottom:#444444 thin solid;
}
#menu a {
color: #CCCCCC;
text-decoration: none;
margin: 0;
padding: 8px 12px;*/
text-decoration: none;
font-weight:bold;
}
#menu a:hover {
color: #fff;
padding-bottom: 8px;
}
</style>
</head>
<body>
<div class="nav">
<ul id="menu">
<li>Home</li>
<li>About
<ul>
<li>Bio</li>
<li>Blog
<ul>
<li>Bloger Blog</li>
<li>Wordpress Blog</li>
<li>other</li>
</ul>
</li>
<li>Hobby</li>
</ul>
</li>
<li>Gallery</li>
<li>News</li>
<li>Links</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Try adding margin: 0; padding: 0; to #menu UL.