I hav created a horizontal menu and a vertical menu,in both cases I noticed that the elements are not rendered properly,the horizontal menu is too large:
<ul class="menu-horizontal">
<li>Home</li>
<li>About Us</li>
<li>Recent Articles</li>
<li>Email</li>
<li>Resources</li>
<li>Links</li>
</ul>
.menu-horizontal
{
background:blue;
width:926px;
height:30px;
overflow:hidden;
list-style: none;
}
.menu-horizontal li
{
display:inline-block;
text-align:center;
font-weight:bold;
padding:7px 45px;
color:white;
font-size:14px;
border-right:1px solid black;
}
I floated a list to the right,in this case I found that the vertical menu does not reach it's left border:
.menu-vertical
{
list-style:none;
float:right;
border:1px solid black;
width:200px;
height:auto;
margin-left:10px;
}
.menu-vertical li
{
padding-top:10px;
font-weight:4;
font-size:1.25em;
text-align: center;
text-decoration: underline;
color:blue;
background-color: #bfbbc9;
}
<ul class="menu-vertical group">
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li> sit amet</li>
<li> consectetur</li>
<li> adipiscing</li>
<li> elit</li>
</ul>
The entire HTML and CSS is at a fiddle.
Make sure to remove or override browser defaults, such as padding. E.g.
.menu-horizontal {padding: 0; margin: 0;}
Related
Why does this gap between the nav menus and the container appear even though I tried to remove it. Couldn't figure it out.
HTML:
<div class="user-nav">
<i class="flaticon-down-arrow user-info"></i>
<div class="nav-content">
<ul>
<li>Profile</li>
<li>Notifications</li>
<li>Help</li>
<li>Sign out</li>
</ul>
</div>
</div>
CSS:
.user-nav .nav-content ul li a{font-weight: 500;padding:12px 16px;text-decoration: none;background:orange;display: block;}
.nav-content{display:none;z-index:1000;position:absolute;background:rgba(150, 203, 255,0.5);box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);right:10px;top:40px;}
.user-nav:hover .nav-content{display:block;}
.user-nav{position:relative;height:40px;top:15px;width:30px;}
Add top following top of the style sheet
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
These are using to remove elements default margin and paddings. This may be helpful to you.
margin:0; and padding:0; inside .user-nav ul will solve your problem.
.user-nav ul{
list-style:none;
margin:0;
padding:0;
}
.user-nav .nav-content ul li a{
font-weight: 500;padding:12px 16px;
text-decoration: none;
background:orange;
display: block;
}
.nav-content{
display:block;
z-index:1000;
position:relative;
background:rgba(150, 203, 255,0.5);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right:10px;
top:40px;
}
.user-nav:hover .nav-content{
display:block;
}
.user-nav{
position:relative;
height:40px;
top:15px;
width:130px;/* Added a little more width here*/
}
<div class="user-nav">
<i class="flaticon-down-arrow user-info"></i>
<div class="nav-content">
<ul>
<li>Profile</li>
<li>Notifications</li>
<li>Help</li>
<li>Sign out</li>
</ul>
</div>
</div>
How do I get my NAV to go in line beside each other because I don't really know at the moment how to fix it.
#menu {
display: inline-block;
position: absolute;
right:0;
top: 10%;
}
<ul id="menu">
<nav>
<li>Home</li>
<li>Services</li>
<li>My Hobbies</li>
<li>My favourite movies</li>
</nav>
</ul>
Are you want to such?
body {
padding:0;
margin:0;
}
#menu {
display:flex;
justify-content:flex-end;
position:absolute;
top:0;
right:0;
}
#menu a {
color:#000;
text-decoration:none;
padding:0 20px;
height:40px;
line-height:40px;
font-family:sans-serif;
}
#menu a:hover {
background:lightgray;
}
<div id="menu">
Home
Services
My Hobbies
My favourite movies
</div>
You can set the li class to float: left; - making sure to only apply this within your nav menu. I've change the class menu to nav-menu so that it makes a little more sense.
I've also removed the list-style-type so that there are not any dots.
ul#nav-menu {
display: inline-block;
position: absolute;
list-style-type: none;
right:0;
top: 10%;
}
ul#nav-menu li {
float: left;
margin-right: 4px;
}
<ul id="nav-menu">
<nav>
<li>Home</li>
<li>Services</li>
<li>My Hobbies</li>
<li>My favourite movies</li>
</nav>
</ul>
i was wondering if any of you could help me out, i have started to create a drop down menu for my blog it was going well in my perspective until i realized that the dropdown menu would disapear once i hovered over it with my cursor, the link is fine, but when i hover my cursor over the dropdown menu it disappears.
Source Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Yeti™</title>
<link rel="stylesheet" href="main.css" />
<style type="text/css">
body
{
background-image:url(img.jpg);
background-repeat:no-repeat;
}
a:link{color:yellow;
text-decoration:none;}
a:visited{color:yellow;}
a:hover{background-color:none;
color:green;
text-decoration:bold;
text-decoration:underline;
font-weight:bold;}
#footer {position: absolute;
width: 1500px;
height: 80px;
bottom: 1px;
left: 0px;}
#main {position: absolute;
width: 600px;
height: 200px;
top: 160px;
left: 0px;}
</style>
</head>
<ul id="nav">
<div id="Title">
<p> Yeti Corporation™ </p>
--------------------------------------------------> ( This is the drop down menu )--------
<div id="wrapper">
<div id="navMenu">
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
--------------------------------------------------> ( This is the drop down menu )--------
</div>
<body>
<div id="video">
<video src="csgo.mp4" width="540" height="380" poster="csgo.jpg" controls></video>
</div>
<div id="main">
<div id="yeti">
<p> <div id="play">
</div></P>
</div>
<p>There is never enough to what you can do with programming</p>
<p> a Small Indie Development company Consisting of 4 people that works on Video games and Websites, as well as many other project we hope to get to in the future. Originally we where two separate companies, but when we realised the potential we had together we decided to merge to create Yeti Corp™.
If you are interested in Hiring a web developer go to the web development page. If you want to check up on the newest games and software updates, go to the game development page. a Small Indie Development company Consisting of 4 people that works on Video games and Websites, as well as many other project we hope to get to in the future. Originally we where two separate companies, but when we realised the potential we had together we decided to merge to create Yeti Corp™.
If you are interested in Hiring a web developer go to the web development page. If you want to check up on the newest games and software updates, go to the game development page. </p>
</div>
</div>
<div id="footer">
<a href="#" />Contact Us|</a>
<a href="#" />Web Dev|</a>
<a href="#" />Game Dev|</a>
<a href="#" />Graphic Designer|</a>
<a href="#" />Twitter Page|</a>
<a href="#" />FaceBook Page|</a>
<a href="#" />Gmail Page</a>
<p> All Rights Reserver Yeti LTD. 2014 Created by Head Web Developer, Hamza Issa</P>
</div>
</body>
</html>
CSS:
#body{
background: white;
}
#wrapper{
font:20px Tahoma;
}
--------------------------------------------------> ( This is the drop down menu )--------
#navMenu{
margin:0;
padding:30;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}
#navMenu li ul a {
text-align:center;
text-decoration:none;
font:20px Tahoma;
height:30px;
width:130px;
display:block;
color: blue;
border:1px solid black;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul {
display: block;
visibility:visible;
display: block;
}
--------------------------------------------------> ( This is the drop down menu )--------
#Title{
font: 30px Candara;
-webkit-box-shadow:rgba(110,110,110,.4) 10px 10px 10px;
padding-top: 5px;
padding-left: 100px;
color: orange;
}
#Search{
margin-left: 200px;
padding-bottom: 10px;
}
#Links{
padding-left: 400px;
font: bold 20px Tahoma;
padding-bottom: 30px;
}
#Links a:hover{
color: green;
}
#sign{
color: white;
font:20px Tahoma ;
padding-right: 100px;
padding-top: px;
}
#Sign_up{
padding-left: 400px;
padding-bottom: 200px;
}
#main{
font: 14px Courier ;
color: white;
width: 650px;
padding-left: 100px;
}
#yeti{
font: 45px Candara ;
}
#footer{
background: #E6EAEE;
color: black;
font: 20px impact;
text-align: center;
padding-bottom: 20px;
padding-right: 60px;
width: 1300px;
}
#video{
padding-left: 850px;
padding-top: 50px;
}
So I made a simplified version of your code (In the future you should do this first) and was able to narrow down the problem. The positioning of your #main section is messing with the drop downs and it appears on top of them. So the simple thing I did was add z-index to the drop downs
#navMenu ul li ul {
position:absolute;
visibility:hidden;
top:30px;
z-index: 1;
}
#navMenu ul li:hover ul {
// display: block;
visibility:visible;
// display: block;
}
a:link {
color:yellow;
text-decoration:none;
padding: 10px;
}
a:visited {
color:yellow;
}
a:hover {
background-color:none;
color:green;
text-decoration:bold;
text-decoration:underline;
font-weight:bold;
}
#Title {
font: 30px Candara;
-webkit-box-shadow:rgba(110, 110, 110, .4) 10px 10px 10px;
padding-top: 5px;
padding-left: 100px;
color: orange;
}
#wrapper {
font:20px Tahoma;
}
#navMenu {
margin:0;
padding:30;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}
#navMenu li ul a {
text-align:center;
text-decoration:none;
font:20px Tahoma;
height:30px;
width:130px;
display:block;
color: blue;
border:1px solid black;
}
#navMenu ul li ul {
position:absolute;
visibility:hidden;
top:30px;
z-index: 1;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#main {
font: 14px Courier;
color: red;
padding-left: 100px;
position: absolute;
width: 600px;
height: 200px;
top: 160px;
left: 0px;
}
<div id="Title">
<p>Yeti Corporation™</p>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
<ul>
<li>top
<ul>
<li>Recipes</li>
<li>Recipes</li>
<li>Recipes</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<p>There is never enough to what you can do with programming</p>
</div>
</div>
</div>
Please help me to create sub menu of the below design. sub menu should be align into just below the list.i my design menu and sub menu seems the same.
CSS:
#vertmenu {
font-family:'Trebuchet MS';
font-size:14px;
width:250px;
margin:0 0 0 20px;
padding:0;
}
#vertmenu h1 {
display:block;
font-size:14px;
color:gray;
width:159px;
margin:0;
padding:3px 0 5px 3px;
}
#vertmenu ul {
list-style:none;
border:none;
margin:0;
padding:0;
}
#vertmenu ul li {
margin:0;
padding:0;
}
#vertmenu ul li a {
font-size:14px;
display:block;
border-bottom:1px dashed #C39C4E;
text-decoration:none;
color:#666;
width:160px;
padding:5px 0 2px 4px;
}
#vertmenu ul li a:hover,#vertmenu ul li a:focus {
color:#000;
background-color:#eee;
}
HTML Code:
<div id="vertmenu">
<h1>How to sell your images</h1>
<ul>
<li>Home
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>About Us</li>
<li>Computing</li>
<li>Web Sites</li>
<li>Games</li>
<li>Links</li>
</ul>
</div>
and sub menu visible by default not on the click of menu.
I have tried but it is not working .
help is really appreciated.
#vertmenu {
font-family:'Trebuchet MS';
font-size:14px;
width:250px;
margin:0 0 0 20px;
padding:0;
}
#vertmenu h1 {
display:block;
font-size:14px;
color:gray;
width:159px;
margin:0;
padding:3px 0 5px 3px;
}
#vertmenu>ul {
list-style:none;
border:none;
margin:0;
padding:0;
}
#sub{
list-style: none;
}
#vertmenu ul li {
margin:0;
padding:0;
}
#vertmenu ul li a {
font-size:14px;
display:block;
border-bottom:1px dashed #C39C4E;
text-decoration:none;
color:#666;
width:160px;
padding:5px 0 2px 4px;
}
#vertmenu ul li a:hover,#vertmenu ul li a:focus {
color:#000;
background-color:#eee;
}
HTML Code:
<div id="vertmenu">
<h1>How to sell your images</h1>
<ul>
<li>Home
<ul id="sub">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>About Us</li>
<li>Computing</li>
<li>Web Sites</li>
<li>Games</li>
<li>Links</li>
</ul>
</div>
Do you mean something like this?
Fiddle
<div id="vertmenu">
<h1>How to sell your images</h1>
<ul>
<li>Home
<ul class="children">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>About Us</li>
<li>Computing</li>
<li>Web Sites</li>
<li>Games</li>
<li>Links</li>
</ul>
</div>
#vertmenu {
font-family:'Trebuchet MS';
font-size:14px;
width:250px;
margin:0 0 0 20px;
padding:0;
}
#vertmenu h1 {
display:block;
font-size:14px;
color:gray;
width:159px;
margin:0;
padding:3px 0 5px 3px;
}
#vertmenu ul {
list-style:none;
border:none;
margin:0;
padding:0;
}
#vertmenu ul li {
margin:0;
padding:0;
}
#vertmenu ul li a {
font-size:14px;
display:block;
border-bottom:1px dashed #C39C4E;
text-decoration:none;
color:#666;
width:160px;
padding:5px 0 2px 4px;
}
#vertmenu ul li a:hover,#vertmenu ul li a:focus {
color:#000;
background-color:#eee;
}
li:hover > .children {
display:block;
}
.children {
display:none;
}
Notice the added children class on ul and the hover event.
Screenshot of the header that's needing this work:
As you can see, the menu is below the logo. I was wanting the menu beside it, to the right of the logo. I don't know if it's possible, but if it is, I could use some help, please.
Here's the code for everything, separated for your convenience.
The menu and logo in their divs:
<div id="wrapper">
<div id="body-wrapper">
<div class="head">
<div class="head-wrapper">
<div class="logo">
<img src="http://i.imgur.com/sDnntOE.png">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
</ul>
</li>
<li>Products
<ul>
<li>Chaotix Browser</li>
<li>Useful Beta 1.7.5</li>
<li>Chaotix Cleaner 1.4</li>
<li>Forum</li>
<li>CDev</li>
<li>Infinite-PVP</li>
<li>Ulta-Craft</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>E-Mail</li>
<li>News Letter</li>
<li>Social Mediar</li>
</ul>
</li>
<li>Divisions
<ul>
<li>Gaming</li>
<li>Films</li>
</ul>
</li>
<li>Chaotix! Forum</li>
<li>Partnerships
<ul>
<li>GameFanShop</li>
<li>Forumotion</li>
</ul>
</li>
</ul>
The CSS:
<style>
*{
background-image:url('http://i.imgur.com/0u7sBsT.png');
background-color:#999999;
font-family:Tahoma;color:white;
}
div.head{
text-align:Center;
padding-top:10px;
}
div.body{
padding-top:100px;
padding-left:300px;
padding-right:300px;
text-align:center;
}
div.logo{
float:left;
}
a{
color:white;
}
a:hover{
color:gray;
}
/* Main menu
------------------------------------------*/
ul{
font-family: Lato,Tahoma,Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
padding-left:25px;
}
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 #000000;
padding: 5px 15px 5px 15px;
background: #000000;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover{
background: #999999;
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
font-size: 11px;
}
li:hover a{
background: #000000;
}
li:hover li a:hover{
background: #999999;
}
</style>
Add your css
.logo img
{
float:left;
}
.logo ul
{
float:left;
}
It working ok. Hope this help!