I have some problems with a dropdown. I want that it drops to the left side, but I don't know how to do that. I've tried some stuff with margin-right and padding, but I cant find a way to fix it. Code is here:
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: right;
}
li ul {
display: none;
margin-top: -11px;
}
ul li a {
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #f00;
}
li:hover ul {
display: block;
position: absolute;
right: 0px;
}
li:hover li {
float: left;
margin-left: 10px;
}
li:hover a {
background: transparent;
margin-left: 10px;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
border-top: 0px;
margin-right: 40px;
background-color: #FFFFFF;
width: 260px;
}
img.menu {
height: 39px;
width: 34px;
margin-top: 41px;
}
<ul id="drop-nav">
<li><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-256.png" class="menu">
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
li:hover ul {
display: block;
position: absolute;
right:0px;
}
Related
I have an issue with submenu, when i hovering on about section the dropdown menu width is more than it suppose to be.
What i did wrong and how can fix it?
Any other suggestion related to my css code would be appreciated.
JSFIDDLE
Here is my code:
* {
margin: 0;
padding: 0;
}
.main-nav ul {
margin-left: 40px;
margin-top: 40px;
list-style-type: none;
}
.main-nav>ul>li {
float: left;
}
.main-nav .active {
background-color: #0361D6;
}
.main-nav li a {
text-decoration: none;
font-size: 18px;
font-family: Verdana;
color: white;
}
.main-nav ul li {
padding: 20px 30px 20px 30px;
background-color: #066EFC;
}
.main-nav>ul>li {
border-right: 1px solid #0858C5;
}
.main-nav ul>li:last-child {
border-right: none;
}
.main-nav li {
border-bottom: 3px solid #0B418B;
}
.main-nav li:hover {
cursor: pointer;
background-color: #0361D6;
color: #C4C4C4;
}
.sub-nav ul {
display: none;
}
.sub-nav li {
border-bottom: 1px solid black;
}
.sub-nav {
padding: 0px;
float: none;
position: absolute;
top: 65px;
left: 85px;
overflow: hidden;
}
nav ul li:hover ul {
display: block;
}
<nav class="main-nav">
<ul>
<li class="active">Home</li>
<li>About
<nav class="sub-nav">
<ul>
<li>Company</li>
<li>Workers</li>
</ul>
</nav>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
I got the solution which you might be looking for. Refer to the link below...
https://jsfiddle.net/Dhruvil21_04/x40psw2c/1/
OR
Replace your 4 css selctors as given below...
/*--------Replace-------*/
.sub-nav {
padding: 0px;
float:none;
position: absolute;
top: 100%;
left: 0;
overflow: visible;
width: 100%;
}
.main-nav li:hover {
cursor:pointer;
background-color: #0361D6;
color: #C4C4C4;
position: relative;
}
/*--------Add-------*/
.main-nav ul ul > li {
padding: 20px 10px;
text-align: center;
}
.main-nav ul ul {
margin: 0;
padding: 0;
left: 0;
}
I have a menu, for which I put at the end 3 images, measuring 30x30 px each. After the images being inserted, it appeared a space between the bottom line of the menu and only the text. For the image there is no space between the bottom of the menu and the images. What I would like now to do, would be to have the text having the exact size (I managed to fix this space by increasing font size, but this is not a solution for me) as now and get rid of that space. Again, the space is only below the text and not the images. *Check with full-screen the menu.
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 245px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 100;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study
<ul>
<li>Present Simple</li><li>
Possesives</li><li>
Articles</li><li>
Modal Verbs</li><li>
Prepositions</li><li>
Plural of nouns</li><li>
Countability</li>
</ul>
</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Shop</li><li>
Contact</li><li>
About Us</li>
<li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>
</ul>
</div>
</div>
The simplest would be to set the same height to your texts as you have on your images
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
height: 30px; /* added */
text-decoration: none;
}
Stack snippet
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 245px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
height: 30px; /* added */
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 100;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study
<ul>
<li>Present Simple</li><li>
Possesives</li><li>
Articles</li><li>
Modal Verbs</li><li>
Prepositions</li><li>
Plural of nouns</li><li>
Countability</li>
</ul>
</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Shop</li><li>
Contact</li><li>
About Us</li>
<li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>
</ul>
</div>
</div>
I am trying to make horizontal menu navigation. I have several links in navigation, and I would like to have equal horizontal space between them.
How to make links in horizontal menu with equal space between them?
HTML:
<div id="header">
<div class="secondary-navigation">
<div itemscope itemtype="http://schema.org/SiteNavigationElement">
<nav id="navigation">
<ul id="menu-main" class="menu">
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
</ul>
Menu
</nav>
</div>
</div>
</div>
CSS:
#header {
position: relative;
float: left;
padding: 0 0 0 0;
clear: both;
}
/*-----------------------------------------------
/* Header navigation
/*---------------------------------------------*/
.secondary-navigation {
display: block;
width: 100%;
float: left;
}
.secondary-navigation a {
vertical-align: top;
color: #F1F1F1;
font-weight: bold;
margin-top: 8px;
margin-bottom: 4px;
line-height:18px;
font-size: 15px;
border-bottom: 2px solid #333888;
}
.secondary-navigation a:hover, .secondary-navigation .sfHover {
color: #F1F1F1;
border-bottom: 2px solid #F1F1F1;
}
.secondary-navigation li li a { line-height: 1 }
.secondary-navigation a .sub {
font-size: 12px;
font-weight: normal;
color: #CFCFCF;
text-transform: none;
}
.menu-item-has-children > a:after {
content: "▼";
font-size: 10px;
color: #F1F1F1;
position: absolute;
right: 12px;
top: 22px;
}
.footer-navigation .menu-item-has-children > a:after { display: none }
.sub-menu .menu-item-has-children>a:after {
right: 0;
top: 17px;
}
.menu .current-menu-item > a { background: #fff }
.menu .current-menu-item > a:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: #fff;
bottom: 0px;
left: 0;
z-index: 1;
}
#navigation {
margin: 0 auto;
font-size: 13px;
width: 100%;
float: left;
}
#navigation ul {
margin: 0 auto;
list-style: none; /*Added*/}
#navigation .menu { float: left; }
#navigation ul li {
float: left;
position: relative;
margin-left: 0;
}
#navigation > ul li:first-child a { }
#navigation > ul li:last-child a { border-right: 0 }
#navigation ul .header-search { float: right }
#navigation > ul > li:last-child { border-right: none }
#navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited { display: block }
#navigation > ul > .current a {
background: transparent;
color: #555 !important;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul {
opacity: 1;
left: -228px;
top: 0;
}
#navigation ul ul {
position: absolute;
width: 226px;
z-index: 400;
font-size: 12px;
color: #333888;
border: 1px solid #F1F1F1;
background: #FFFFFF;
padding: 0;
}
#navigation ul ul li {
margin-left: 0;
padding: 0 10%;
width: 80%;
color: #333;
}
#navigation ul ul li:hover { background: #F1F1F1 }
#navigation ul ul a, #navigation ul ul a:link, #navigation ul ul a:visited {
padding: 12px 0;
position: relative;
border-left: 0;
background: transparent;
border-right: 0;
text-transform: none;
line-height: 1.4;
margin-right: 0;
min-height: 100%;
}
#navigation ul ul li:last-child a { border-bottom: none }
#navigation ul ul {
opacity: 0;
left: -999em;
}
#navigation ul li:hover ul {
left: -1px;
opacity: 1;
top: 81px;
}
#navigation ul ul li:hover ul {
top: -1px;
left: -228px;
padding-top: 0;
}
#navigation ul ul ul:after { border-color: transparent }
I tried something like this, but it does not work for me.
You can use justify-content: space-between or justify-content: space-around flexbox property
ul {
display: flex;
justify-content: space-between;
border: 1px solid black;
list-style-type: none;
padding: 10px;
margin: 0;
}
<ul>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
</ul>
this might be a bit complicated but I really need some help here..
I made a HTML menu and a css file for it. This was for a desktop version of my website.
I was in need of a mobile menu and due to my low skills of html and css, I asked a friend to make a mobile css file for the menu.
He ended up changing a little bit of code of the original HTML menu, this means that the mobile version is working, but I have to update my original css file for desktop a bit.
That's where the problem is, I just can't get it done, I can't find the right tag to update the file.
Original Desktop HTML menu and css file
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" class="show-menu" role="button">
<div id="Logo"><img src="Images/logo.png" alt="logo"></div>
<nav id="primary_nav_wrap">
<ul id="menu" class="menu">
<ul>
<li class="current-menu-item">home</li>
<li>informatie
<ul id="navinformatie">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul id="navverblijf">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul id="navbezienswaardigheden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</ul>
</nav>
</header>
The new HTML menu and mobile css file for it
body {
margin: 0;
}
main {
margin: 0 auto;
width: 480px;
}
/*menu*/
ul{
list-style-type:none;
margin:0;
padding:0;
position: static;
display: none;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
border-bottom:1px solid #CCC;
}
li a {
display:block;
min-width:180px;
height: 50px;
text-align: center;
line-height: 50px;
color: black;
background: white;
text-decoration: none;
}
li:hover a {
border-bottom: 1px solid black;
}
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
border-bottom: 1px solid black;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
text-align:center;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
#Logo {
display: none;
}
.show-menu {
text-decoration: none;
color: white;
background: black;
text-align: center;
padding: 10px;
display: block;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
ul li, li a {
width: 100%;
text-align:left;
}
ul li a{
padding:0 10px;
}
li ul li a {
text-align:center;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">
<div id="Logo"><img src="logo.png" alt="logo"></div>
<ul id="menu" class="mobile-top">
<li class="current-menu-item">home</li>
<li>informatie
<ul class="hidden">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul class="hidden">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul class="hidden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</header>
<div style="clear:both;"></div>
So what I need now is some help to adjust the desktop css file to the new html menu, I can't figure it out where to start and what I should change.
You might want to use media queries to apply a different set of CSS for mobile and desktop. You could wrap your original css like this, to only apply the desktop CSS when the width is bigger than 600px.
#media (min-width: 600px) {
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
}
hey i was learning how to use the drop down menu with css, but i faced two problems:
The length of my first drop down menu changes, even though i kept playing with their percentages.
I am not able to bring my second drop down menu, i guess i don't know how to call the second drop down menu in css even though i gave it a different class name.
Here is the HTML code just for the drop down menu:
<div class="list">
<ul class="style">
<li class="international">International
<ul class="sub1">
<li class> Top 10</li>
<li> All</li>
</ul>
</li>
<li class="pop">Pop
<ul class="sub1" >
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li class="electronic">Electronic
<ul class="sub1">
<li> Top 10</li>
<li> All
<ul class="sub2">
<li> English</li>
<li> European</li>
<li> International</li>
</ul>
</li>
</ul>
</li>
</div>
and here is the CSS code:
div ul li {
display:inline-block;
background-color:#B2B28F;
float:right;
text-align: center;
width: 22%;
position: relative;
z-index: 1;
bottom: 19px;
padding-top: 5px;
font-size: 18px;
padding-bottom: 3px;
font-weight: bold;
font-family: harrington;
margin-right: 12px;
border-bottom:5px;
margin-bottom: 10px;
text-align: center;
margin-top: 2px;
}
div ul li a {
display: block;
height: 30px;
text-align: center;
border-bottom:5px;
position: relative;
font-size: 20;
z-index: 1;
margin-top: 2px;
}
.sub1 li {
display: none;
position:relative;
width:100%;
height: 20px;
margin-bottom:-8px;
margin-top:12px ;
float: right;
font-size: 17;
margin-right: 4px;
padding: 2px;
text-align: center;
left:-20px;
}
.sub1 li a {
text-align: left;
margin-right: 15px;
}
.sub2 li {
position: relative;
left: 15px;
top: -30px;
width: 100%;
text-align: left;
margin-top: -3px;
margin-bottom: 4px;
display: none;
float: left;
}
div ul li:hover ul li{
display: block;
position: absolute;
top: 27px;
float: left;
width: 97%;
left: 0px;
height: 23px;
border-top: 5px;
text-align: center;
}
div ul li :hover ul li ul li {
display: block;
position: absolute;
text-align: center;
}
a:link {
text-decoration: none;
}
a:visited {
color:#520029;
}
a:hover {
color: #293D66;
}
also any comments on how i did would be appreciated!
Hope you like this..
Just made some changes on your html and css.
HTML:
<div class="nav">
<ul>
<li>International
<ul>
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li>Pop
<ul>
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li>Electronic
<ul>
<li> Top 10</li>
<li> All
<ul>
<li> English</li>
<li> European</li>
<li> International</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
.nav {
margin: 50px auto;
text-align: center;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background: #C0C0C0;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
.nav ul:after {
content: ""; clear: both; display: block;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
background: #4b545f;
}
.nav ul li:hover a {
color: #fff;
}
.nav ul li a {
display: block; padding: 10px 20px;
color: #757575; text-decoration: none;
}
.nav ul ul {
background: #5f6975; padding: 0;
position: absolute; top: 100%;
}
.nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
.nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
.nav ul ul li a:hover {
background: #4b545f;
}
.nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Also Here is the fiddle, Check this working here
I would recommend not using absolute positioning and floats to elements that don't need it..
regarding your second sub, I got it working in this example..
div > ul > li {
display:inline-block;
background-color:#B2B28F;
float:right;
text-align: center;
width: 22%;
position: relative;
z-index: 1;
bottom: 19px;
padding-top: 5px;
font-size: 18px;
padding-bottom: 3px;
font-weight: bold;
font-family: harrington;
margin-right: 12px;
border-bottom:5px;
margin-bottom: 10px;
text-align: center;
margin-top: 2px;
}
div ul li a {
display: block;
text-align: center;
padding:5px 0;
position: relative;
font-size: 20px;
z-index: 1;
color:#212121;
padding-left:10px; box-sizing:border-box;
}
ul { padding:0;}
ul li { list-style:none;}
.sub1 { display:none; width:100%;}
.sub1 li {
position:relative;
width:100%;
clear:both;
font-size: 17px;
text-align: center;
}
.sub1 li a {
text-align: left;
}
.sub2 { display:none; position: relative; background:#B2B28F;}
.sub2 li {
width: 100%;
text-align: left;
margin-bottom: 4px;
padding-left:20px;
box-sizing:border-box;
}
.sub2 li a { font-size:14px;}
div ul li:hover ul li{
width: 100%;
left: 0px;
border-top: 5px solid;
text-align: center;
}
div ul li:hover > ._sub { display:block;}
a:link {
text-decoration: none;
}
a:visited {
color:#520029;
}
a:hover {
color: #293D66;
}
http://jsfiddle.net/2mSzr/
notice I make more specific rules with the '>' option in css, so the styling rules will not
apply to the wrong elements..
Also in the HTML I've added _sub class to all sub menus, and changed the behavior so the display:none/block will be on the actual ul._sub elements and not on their li's.. it just
makes more sense..
go over the example above, let me know if you have any questions.